image gallery :

Question

Hi I'm currently trying to make an image gallery for a website. At the moment I don't really care about the look as I'm quite good at styling I really just want to get the functionality right. Heres what I got so far below:

http://port-80-rzczno273y.treehouse-app.com/

I want to now make the arrows clickable so that when clicked left or right they shift to the next picture to the order of the thumbnails above. I'm currently finding javascript and jquery difficult so I guess I'm looking for some general direction or help but of course I will try to work it out alone as well. I want to be able to click the arrows and achieve what this website is achieving :

http://www.sandrageringinc.com/artists/nancy-dwyer/

heres my code below so far if interested:

html code

<body>
  <div id="container">
    <div id="gallery">
      <a href="img/large/dotted-large.jpg"><img src="img/small/dotted-small.jpg"</a>
      <a href="img/large/gold-large.jpg"><img src="img/small/gold-small.jpg"</a>
      <a href="img/large/purple-large.jpg"><img src="img/small/purple-small.jpg"</a>
      <a href="img/large/dotted-large.jpg"><img src="img/small/dotted-small.jpg"</a>
      <a href="img/large/gold-large.jpg"><img src="img/small/gold-small.jpg"</a>
      <a href="img/large/purple-large.jpg"><img src="img/small/purple-small.jpg"</a>
      <a href="img/large/dotted-large.jpg"><img src="img/small/dotted-small.jpg"</a>
      <a href="img/large/gold-large.jpg"><img src="img/small/gold-small.jpg"</a>
      <a href="img/large/purple-large.jpg"><img src="img/small/purple-small.jpg"</a>
      <a href="img/large/dotted-large.jpg"><img src="img/small/dotted-small.jpg"</a>
      <a href="img/large/gold-large.jpg"><img src="img/small/gold-small.jpg"</a>
      <a href="img/large/purple-large.jpg"><img src="img/small/purple-small.jpg"</a>
    </div>
    <div id="photo">
      <a class="next" href="#">&rarr;</a>
      <a class="prev" href="#">&larr;</a>

    </div>
  </div>


</body>

jquery code

$(document).ready(function() {



$('#gallery a').click(function(evt) {
        //don't follow link
         evt.preventDefault();
         //get path to new image
       var imgPath = $(this).attr('href');
         //get reference to old image
         var oldImage = $('#photo img');

             //create HTML for new image
             var newImage = $('<img src="' + imgPath +'">');
             //make new image invisible
             newImage.hide();
             //add to the #photo div
             $('#photo').prepend(newImage);
             //fade in new image
             newImage.fadeIn(1000);

             //fade out old image and remove from DOM
             oldImage.fadeOut(1000,function(){
             $(this).remove();
                });      
    }); // end click

    $('#gallery a:first').click();
}); // end ready

Answer 1 · 2015-03-31T07:28:07Z

March 31, 2015 7:28am

Hi there, I can't access your project using this link you posted. Anyway, I know a good little tutorial to build a "similar project" which goes step by step to achieve what you want.

This little tut is on the codeacademy website, which is free. It's inside the "Make an interactive website" project / DOM manipulation. Check this here.

Once you 've seen this, you'll be able to create your photo gallery, in this case It demonstrates how to build a little slider, but the principle, with the clickable arrows is the same.

Welcome to the Treehouse Community

Looking to learn something new?

troy beckett

troy beckett

image gallery :

1 Answer

geoffrey

geoffrey