The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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]( “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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed