Results 1 to 3 of 3

Thread: PHP Photo Album v2.11 - Thumbnail Size

  1. #1
    Join Date
    Mar 2009
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default PHP Photo Album v2.11 - Thumbnail Size

    1) Script Title: PHP Photo Album v2.11

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...photoalbum.htm

    3) Describe problem: I'm wondering if there's some way to make custom thumb nails for each image in the album. My images are many different sizes, so sticking with one strict thumbnail size makes some of the thumbnails look squished. Can I have a folder of full size images and a folder with thumb nail images and if so, how would I add this to the script to make it work?

    Thanks in advance.
    Last edited by wyllomoon; 07-24-2012 at 08:38 PM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    If you're using the built in lightbox, it's fairly simple. Just configure the folder for the main script to be the thumbnail folder. Put your thumbnails in there. Each one should have the same name as their larger versions in another folder. Then configure the onphotoclick function like so:

    Code:
     onphotoclick:function(thumbref, thumbindex, thumbfilename){
       thumbnailviewer.loadimage("http://www.mysite.com/large/" + thumbfilename, "fit2screen")
      }
    where the highlighted path is the path to the larger images on your server.

    For more information on this approach, see the supplemental page:

    Utilizing the onphotoclick event handler and built in Lightbox

    Refer especially to Scenario 2.

    One other trick you may or may not want to employ is that regardless of the source of the thumbnail images, whether they're scaled down by the browser from the larger versions or are thumbnails you've created, if they don't all have the same aspect ratio, you can allow the browser to resize them in a relatavistic fashion by only setting one of the two dimensions in the css, or by not setting either dimension, rather setting max-width and max-height for the thumbnails. Either:

    Code:
    .photodiv img{ /*CSS for each image tag*/
    border: 0;
    width: 200px;
    cursor: hand;
    cursor: pointer;
    }
    Or:

    Code:
    .photodiv img{ /*CSS for each image tag*/
    border: 0;
    max-width: 200px;
    max-height: 106px;
    cursor: hand;
    cursor: pointer;
    }
    The actual values in both cases are up to you.

    This makes it easier to use the full size images as thumbnails. But as a matter of efficiency, it's still better to use actual thumbnails. If their byte load is less than the full size images, the page will load faster and the transition between the virtual pages of the gallery will be faster.

    And of course if you're using thumbnails and their native dimensions are acceptable to you, set no dimensions at all. Or if they're all the same dimensions, set those for even faster page loads and transitions.
    - John
    ________________________

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

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    wyllomoon (07-24-2012)

  4. #3
    Join Date
    Mar 2009
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Thank you very much for taking the time to explain this to me. I got a little confused while reading the instructions and didn't realise that it was right there all along. I appreciate your help!!

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
  •