Results 1 to 10 of 10

Thread: pretty photo too big

  1. #1
    Join Date
    Feb 2013
    Posts
    58
    Thanks
    10
    Thanked 1 Time in 1 Post

    Default pretty photo too big

    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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,997
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

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

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Feb 2013
    Posts
    58
    Thanks
    10
    Thanked 1 Time in 1 Post

    Default

    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.

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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,997
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 09-24-2013 at 06:32 AM. Reason: add info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Feb 2013
    Posts
    58
    Thanks
    10
    Thanked 1 Time in 1 Post

    Default

    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.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,997
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Feb 2013
    Posts
    58
    Thanks
    10
    Thanked 1 Time in 1 Post

    Default

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

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,997
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    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):

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

    Code:
    	// 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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Feb 2013
    Posts
    58
    Thanks
    10
    Thanked 1 Time in 1 Post

    Default

    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.

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,997
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    Can't they just close the tab?

    Or as I say, you can do just:

    Code:
    	// 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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Dynamic Ajax Content and Pretty Photo
    By mylo in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 09-17-2011, 02:26 AM
  2. Resolved pretty URL
    By ggalan in forum PHP
    Replies: 6
    Last Post: 01-20-2011, 11:46 PM
  3. Wordpress is pretty big...
    By jzhang1013 in forum The lounge
    Replies: 1
    Last Post: 04-29-2009, 07:11 AM
  4. Forms help pretty please
    By karinagw in forum HTML
    Replies: 6
    Last Post: 07-16-2007, 03:07 PM
  5. Some one help me pretty please
    By SCJVS1 in forum The lounge
    Replies: 7
    Last Post: 05-14-2005, 12:04 AM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •