1

I'm pretty new to jQuery and Javascript!

I've made a image gallery where you can click on small thumbnails below and it selects that picture and shows it in a bigger box.

What I want to add is a button on each side of the bigger image which you click on and it changes to the image to the left or right. Problem is, I just can't figure out how :P

(example: https://imagizer.imageshack.us/v2/757x654q90/34/t4y1.png)

So this is the code for the click on image and it changes to the image you clicked on: 

<script type="text/javascript">
    function changePic(img) {
        $("#gallery_img").hide();
        $("#gallery_img").attr ("src", img.src); 
        $("#gallery_img").fadeIn("slow")                
    }
</script>

And this is the HTML part (only the image buttons): 

            <div id="gallery_buttons">
                <img id="right" src="pics/right.png"></img>
                <img id="left" src="pics/left.png"></img>
            </div>

Thanks in advance! :)

user3183226
  • 11
  • 1
  • 3
  • Someone already posted example like your. Here a link http://stackoverflow.com/questions/16761868/very-simple-image-slider-slideshow-with-left-and-right-button-no-autoplay I hope this helped! – StudentIT Jan 16 '14 at 15:41
  • So how I would do this is have all your thumbnails in a list. When a users clicks on a thumbnail add a class to it called "thumbnail-selected" or something. Then when a user clicks one of your arrows you load the image from the next or previous sibling of the selected thumbnail. Add move the selected class over. Hope that makes sense. There are example galleries like http://www.tn3gallery.com/?refCode=fe8775 where you can inspect some code. – Dan Jan 16 '14 at 15:48

1 Answers1

1

Dunno if you're still looking for a solution or not but here is an example what you can do.

HTML

<div id="prev">Prev</div>
<div id="next">Next</div>
<ul>
    <li class="thumb"><img src="http://i.imgur.com/CdxLTkH.png"/></li>
    <li class="thumb"><img src="http://i.imgur.com/N4MgWLu.png"/></li>
    <li class="thumb selected"><img src="http://i.imgur.com/KJyey9r.png"/></li>
    <li class="thumb"><img src="http://i.imgur.com/8nqKP4I.png"/></li>
    <li class="thumb"><img src="http://i.imgur.com/vuvPGHg.png"/></li>
</ul>


<img id="gallery_img" src="#"/>

JQuery

$("li").click(function(){

    var img = $(this).find('img').attr('src');
    $("ul").children().removeClass('selected');
    $(this).addClass('selected');
    $("#gallery_img").attr("src", img); 
});


$('#prev').click(function(){
    var prev = $(".selected").prev();
    var img = prev.find('img').attr('src');
    $("#gallery_img").attr("src", img); 
    $("ul").children().removeClass('selected');
    prev.addClass('selected'); 
});

$('#next').click(function(){
    var next = $(".selected").next();
    var img = next.find('img').attr('src');
    $("#gallery_img").attr("src", img); 
    $("ul").children().removeClass('selected');
    next.addClass('selected'); 
});

Here is the jsfiddle where you can see an example of that code. http://jsfiddle.net/gdSD2/

Obviously it's really rough and can be cleaned up but it works. You also have to remember to account for when the user reaches the end of the list. Add some clause for if there is not next or previous sibling.

Dan
  • 2,299
  • 2
  • 20
  • 41