pretty photo too big

[DS928]

I am using prettyphoto and on the iPhone / iPad the images are too big. How can I make the images smaller so that the slider functions properly?

schuremediagroup.com

click on Portfolio or Event / click on small photo, the photos that are too big on the iPhone / iPad pop up.
Any help appreciated, thank you.

[jscheuer1]

In schuremediagroup.com/js/jquery.prettyPhoto.js we can see (near the beginning of the code):

 . . .ity:0.7,show_title:true,allow_resize:false,default_width:500,def . . .

So the first thing I would try is, using a text only editor like NotePad, editing that and changing it to true.

The browser cache may need to be cleared and/or the page refreshed to see changes.

[DS928]

Thanks John. I changed it and that gave me a small box in the upper right to make the image bigger or smaller. I also changed the size from 500 to 250 and 344 to 172. That made it smaller on the computer but had no effect on he iPhone or iPad.

title:true,allow_resize:true,default_width:500,default_height:344

[jscheuer1]

It might be cached on those devices. Or, you might have to go even smaller for them. But those dimensions are not supposed have anything to do with how large the image is. That's just how large the 'box' starts at as it's animating itself onto the screen.

It is working properly now on my laptop, where that image (events) was too large before.

Obviously you don't want to go so much smaller that it's too small for a desktop or laptop though. You could use a screen size test for that. But let's first make sure that the problem isn't that it's cached on those devices. I don't know how to clear the cache on iPhone or iPad, do you? If nothing else, you could make a copy of the page with a different name and a copy of the script with a different name and use that renamed script on the new page. That way it cannot use a cached version. If that works, you don't have to worry about the old one, it will catch up with the change eventually.

One other possibility - that's an older version of the script. A newer version might behave better on those devices.

[DS928]

Hello John, I cleared all of the caches. There has to be a max width setting somewhere! I wish the css file was easier to read. It's smashed together (so to speak!). I will look into the newer version as well.

[jscheuer1]

You can unsmash the css. But if there is a max width setting, I'm not sure how that would come into play. I did a search of the script you're using, it has neither 'max' or 'min' in it anywhere. The allow_resize setting set to true is supposed to take care of that for you, setting the max width automatically using the window width (or a width proportional to the window height if the height of the page is more constricting) minus any margin that's set, which is also auto detected. It might be that, since those devices can have a different orientation (landscape vs. portrait), that the script isn't getting the window dimensions correctly, using width for height and vice versa. Or there could be some other problem entirely for those devices.

That's one reason why a more recent version of the script might work better. But I see nothing on the Pretty Photo homepage that indicates that it works with touch devices. It is rated for Safari though. That probably only includes on a desk or lap top. You can disable Pretty Photo for iPhone/Pad. Then they would be taken to the image where presumably they could resize/rotate it to their liking using iPhone/Pad's native pinch and other gestures.

We could try setting a max-width/height of our own. I would need a little time to work that out. It would have to be able to adapt to changing window sizes.

There are also other scripts that might be better, like Fancy Box.

[DS928]

How do you disable PrettyPhoto for the iPad. I will try that. Also I am looking at Fancy Box. Thank you, John.

[jscheuer1]

To disable Pretty Photo in iPad/Phone you need to make it's initialization conditional. The initialization looks like it happens in schuremediagroup.com/js/script.js, here (around line #30):

	// prettyPhoto
		$("a[data-type^='prettyPhoto']").prettyPhoto({theme:'light_square'});

So you could:

	// prettyPhoto
		if(!/ipad|iphone/i.test(navigator.userAgent)){
			$("a[data-type^='prettyPhoto']").prettyPhoto({theme:'light_square'});
		} else {
			$("a[data-type^='prettyPhoto']").attr('target', '_blank');
		}

The highlighted part is optional, it will make the larger images open in a new tab in those devices.

This all assumes that's the init and that there's no other init someplace else.

[DS928]

Mercy. The picture fits the screen on the iphone /ipad. But there is nothing to close the photo or move to the next photo. It opens in a different tab.

[jscheuer1]

Can't they just close the tab?

Or as I say, you can do just:

	// prettyPhoto
		if(!/ipad|iphone/i.test(navigator.userAgent)){
			$("a[data-type^='prettyPhoto']").prettyPhoto({theme:'light_square'});
		}

Then it will open in the same window, and they can hit the back button.