Grow your CSS skills. Land your dream job.

Displaying multiple thumbnail and a main image with different source

  • # January 16, 2013 at 1:52 am

    I have a record from the database which I’m fetching to display in my site. It has different thumbnails that when you click, a bigger image of it on the side will change according to the one you clicked. I am using the same image source for the thumb and bigger image, I am only scaling it’s size. The problem is that the page might take some time to load if the images are too big. How can I separate the image source from the bigger-image source but still be in a dynamic way?

    Here’s the sample [view](http://sphotos-h.ak.fbcdn.net/hphotos-ak-ash4/320989_10151361539905980_469056649_n.jpg “sample-view”)

    # January 25, 2013 at 6:38 am

    Hello @ajnoguerra,

    I would create a new folder in your images directory called thumbs so /images/thumbs/ then save your thumbnails in that folder with the same name as the larger images in the main images directory, then when calling the database get your image name, then when echoing out the images for the thumbnails just direct them to the thumbs dir like so:

    echo ‘
    ‘;

    This way you can use the same image name in the database but two image sources, I hope that helps get you started.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".