SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Preloading images for gallery

    Hi All

    I am developing a website for my budding photographer son, Tom, and I
    want to provide an gallery where the user clicks on a thumbnail and this
    displays a larger image.

    The only way I see that I can do this is to have a link on the thumbnail to load the page again passing the image name or id to the page using a query string and processing this using PHP.

    If I preload all of the larger images when the site first loads will these images be available in the cache for other pages.

    Another way is to hover the thumbnails and display the larger image but I need to find a way to keep the image displayed until the user hovers over another thumbnail.

    I am reluctant to start until I have it clear in my mind.

    Any ideas anyone?

    Thanks

  2. #2
    SitePoint Zealot Gar onn's Avatar
    Join Date
    Feb 2011
    Location
    Belgium
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code JavaScript:
    function preload(arrayOfImages) {
        $(arrayOfImages).each(function(){
            $('<img/>')[0].src = this;
            // Alternatively you could use:
            // (new Image()).src = this;
        });
    }
     
    // Usage:
     
    preload([
        'img/imageName.jpg',
        'img/anotherOne.jpg',
        'img/blahblahblah.jpg'
    ]);


    from: http://stackoverflow.com/questions/4...es-with-jquery
    by: http://stackoverflow.com/users/21677/j-p

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Making a js preloaded is easy:

    Code:
    function preload(images) {
        if (document.images) {
            var i = 0;
            var imageArray = new Array();
            imageArray = images.split(',');
            var imageObj = new Image();
            for(i=0; i<=imageArray.length-1; i++) {
                imageObj.src=images[i];
            }
        }
    }
    ( no jQuery required),

    You can call the function from <body onLoad="preload('your/list/of.jpg,image/urls.jpg');"

    Now, the question is... WHY do you want to make a user wait ? a photo site may contain dozens if not more thumbnails and and now you are adding an equal # of LARGE images before the functionality can be made available. Sure, you may say many people have broadband; that, on a good day, their mobile connection can handle this load, or that somehow your son has unlimited Gbs of of data transfer from his ISP ( since the page will transfer ALL his portfolio, even if they cam to see one pic or landed on the page by mistake).

    These are things to consider before reloading a gallery of full size images.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reponses

    I would like to avoid the flickering effect when the page reloads but maybe this is better than the user having to wait when the site loads before they have any functionality. Are there any other ways of doing this.

    There are only 18 images so the site is not huge.

    Thanks

  5. #5
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by highandwild View Post
    Another way is to hover the thumbnails and display the larger image but I need to find a way to keep the image displayed until the user hovers over another thumbnail.
    With this part you could put an onmouseover event handler on an image which displays the image enlargement in another container on the same page. You don't have to display the enlargement on a new page.

    The enlargement will remain visible until you mouse over another thumbnail that calls the same event handler and so replaces the current enlargement with the enlargement of the second thumbnail.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi webdev1958

    I would have to preload the images I assume?

    I will investigate this, thanks.

  7. #7
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You don't have to but I would recommend doing so.

    You could then assign the onmouserover event handlers to the images on window.onload (after all the images have been downloaded).

    There are also 2 schools of thought regarding whether you have 2 different sized image files for each thumbnail or just 1 image file per image (the enlargement size) and then scale it down to the thumbnail size. Personally I prefer to have just 1 enlarged image file and scale it down to whatever size I need for the thumbnail.


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
  •