Image responsive resize

B

bschulte

New member
Hi Guys,

I've come close to the settings I would like them to be but there is one thing I keep strugling with:

I need the popup to be responsive but when I open the popup in a smaller screen the framework is adjusting but the image is still large size. What Am I doing wrong? (see code below)

HOpe you can help.
thanks Barry


I'am using the popup function (in a slider) like this:

[wr360popup name="view01" gallery="true" width="1500" height="368" config="/wordpress/wp-content/plugins/webrotate-360-product-viewer/360_assets/letmeholdyou/letmeholdyou.xml"]<img class="aligncenter size-full wp-image-1040" src="http://www.barryschulte.nl/wordpress/wp-content/uploads/2013/07/let-me-hold-you-popart1.png" alt="" width="1500" height="368" />[/wr360popup]

In the viewloader.html I have:

.viewerbox
{
margin : 0;
padding : 0;
width : 1500px;
height : auto;
background-color: black;
}

and in basic.css:

.wr360_player
{
width:1500px;
height:368px;
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
-ms-touch-action:none;
touch-action:none;
background:#000; /*#fff*/
}
 
WebSupport

WebSupport

Active member
Hi Barry, I'm glad to hear from you :)

You seem to be trying to change plugin's out-of-the-box CSS while the popup scaling in your scenario should have worked without any changes I think. I remember there was that issue in your WordPress setup with the HTML rendering outside of <html><body> elements (where you had the webrotate popup shortcodes embedded) causing the popup script to stop calculating its position correctly. Did you manage to fix it?

If it's fixed, I suggest to rollback any of the changes in the plugin files first and then see if it works for you this way. And if not, we can brainstorm together what needs to be done. Shoot us an email if anything!
 
B

bschulte

New member
Hi Guys, Didn't get notification of your reply somehow. But glad to hear from you. Yes, I managed to fix that issue with the html chunk outside the <html> section. Had something to do with me adjusting some css styles not in the proper way :-(

That's the problem with amateurs :)

I've tried to rollback as many of the changes I made so far but no luck yet. But I will take it down a step futher to see if I can come up with something. I'll keep you posted.

Many thanks again!
 
B

bschulte

New member
quick question though,

As you know I use the popup style with pictures of 1500 x 368px.

Do I need to make changes to the viewloader.html, the basic.css or the prettyphoto css at all (in case of widht/height of the popup and or image) or can I leave it as is and is the widht/height setting in the [wr360popup] code enough to make it happen?

love to hear...
 
B

bschulte

New member
Hi guys,

tried to narrow it all down but so far no luck.

Can you explain a little more what you meant with "You seem to be trying to change plugin's out-of-the-box CSS"?

All I want is the image inside the viewerbox to be responsive. I've run out of options, so I hope you can help me out.

thanks!
 
WebSupport

WebSupport

Active member
Hi Barry,

Sure, what I meant was that the popup is responsive out-of-the box in that no further changes in the module's CSS are needed in most cases. Usually, you would just supply your default viewer size that you would like to see inside the popup via wr360popup shortcode's width/height parameters and then the popup and the images will scale down on its own if the browser window is smaller than your default viewer size.

As per your notes above, you are "hardcoding" the viewer size in css which can break a few things inside the 360 product viewer script which is what I think you saw in some of your tests. I suggest to re-install our plugin and if something doesn't work still with the popup scaling, just send us a URL to the page so we could review and comment.
 
B

bschulte

New member
Hi,

i've completly removed webrotate plugin and re-installed. So now I should have all the defaults settings back, but still not responsive. I think it has something to do with the slider I am using. I am opening the popup within a wooslider. you can check it out at:
www-barryschulte-nl
 
WebSupport

WebSupport

Active member
Hi Barry, I think I see now what's going on :) You have another copy of the prettyPhoto popup script that came with your theme that overrides the one we supply with our module and which was fine-tuned to work with our 360 product viewer. This copy is located here:

wp-content/themes/theonepager/includes/js/jquery.prettyPhoto.js

You can remove it safely I think. If you need help with disabling the second copy of prettyPhoto, please let me know.
 
B

bschulte

New member
Yiiihhhoooooooo!!!!!
Many many thanks! I did delete the pretyphoto.css from my theme but not the javascript and that is the solution indeed.

You just made my day! Thanks again!
Cheers Barry
 
B

bschulte

New member
back again :)

just noticed that deleting jquery from within my theme did cause a problem. My iPad and even sometimes (???) my own notebook won't load the site. When I refresh the page it will load (don't know why). I get an 'Uncaught TypeError: undefined is not a function' error in my google chrome console in jquery.js file.

Then I thought: ok, why not copy the webrotate js and css file to the theme folder maybe that will fix it, but unfortunatly it did not.

any suggestions?
 
WebSupport

WebSupport

Active member
Hi Barry, just had a chance to try your link in both Firefox and Chrome dev tools and I don't see the exception you mentioned above.

Did you fix it already by any chance? Otherwise I suspect you rather keep your theme's jquery as your theme may rely on a certain script loading order. WordPress folks actually don't recommend 3d party developers to supply their own copies for jquery (WP wouldn't approve our 360 product viewer plugin for that matter until we removed jquery file from the plugin distribution) as it already comes with a tested version of jquery ..
 
You must log in or register to reply here.
Top