Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

troy beckett
troy beckett
12,035 Points
Posted by troy beckett
troy beckett
12,035 Points

image gallery??

So I know how to make a lightbox, I know how to put an image slider on my website, but what confuses me is putting it all together to look something like this website below:

http://www.sandrageringinc.com/artists/todd-james/

How hard is it to make a gallery display like that and how do you go about putting it all together is it easier than I thinking

2 Answers

nnuxiragwh
nnuxiragwh
10,345 Points
nnuxiragwh
nnuxiragwh
10,345 Points

Hi Troy,

This is my solution, although it's been built with Jquery, you can achieve the same goal with pure JS.

http://jdilla.tklekner.cba.pl/

    <div id="wrapper">
        <div id="inner-wrapper">
            <div id="popup">
                <img src="tomaszklekner/img/draw/big/01.jpg" alt="" />
            </div>

            <div id="gallery">
                <div class="row">                       
                    <div class="col-lg-2"><img src="tomaszklekner/img/draw/small/01.jpg" alt="" /></div>
                    <div class="col-lg-2"><img src="tomaszklekner/img/draw/small/02.jpg" alt="" /></div>
                    <div class="col-lg-2"><img src="tomaszklekner/img/draw/small/03.jpg" alt="" /></div>
                    <div class="col-lg-2"><img src="tomaszklekner/img/draw/small/10.jpg" alt="" /></div>
                    <div class="col-lg-2"><img src="tomaszklekner/img/draw/small/12.jpg" alt="" /></div>
                    <div class="col-lg-2"><img src="tomaszklekner/img/draw/small/13.jpg" alt="" /></div>
                    <div class="col-lg-2"><img src="tomaszklekner/img/draw/small/14.jpg" alt="" /></div>
                </div><!-- End row class -->
            </div>
        </div>
    </div>

body {
    overflow-x: hidden;
}
#wrapper {
    position: absolute;
    top: 0;
    width: 100%;
    height: 450px;
    background: #fff;
}
#inner-wrapper {
    margin: 0 auto;
    width: 1100px;
}
#popup {
   margin: 0 auto;
    width: 300px;
    height: 400px;
}
#gallery {
    width: 100%;
    height: 100%;
}
#gallery img {
    float: left;
    margin: 5px;
}

// Call a click event on a small image
$("#gallery img").click(function(){
        // Get the images current location
    var imageLocation = $(this).attr("src");

    // Update the big image with the image linked in the link
    var imageLocationBig = imageLocation.replace('small','big');

    $('#popup img').attr("src", imageLocationBig);
});
nnuxiragwh
nnuxiragwh
10,345 Points
nnuxiragwh
nnuxiragwh
10,345 Points

In the main img folder I've got 2 other folders: small and big.

The main big image is loaded as default, and when I click on one of the images from the small images gallery, I call a click() event

     $("#gallery img").click(function(){

which gets the current images "src" attribute

     var imageLocation = $(this).attr("src");

The next step is to replace the word "small" with "big" in the "src" attribute of the clicked image

     var imageLocationBig = imageLocation.replace('small','big');

and pass the new src attribute to the main big image

     $('#popup img').attr("src", imageLocationBig);