Add Class to Following Element

Question

I had a look out on the interwebs for a jQuery image gallery and couldn't find one that suited what I wanted to do. So I, ended up creating one myself and am trying to figure out how to get the prev and next buttons to work.

<div class="gallery portrait">
    <nav>
      <div class="close"><a href="#"></a></div>
      <div class="prev"><a href="#"></a></div>
      <div class="next"><a href="#"></a></div>
    </nav>
    <div class="cover">
        <a href="#"><img src="image.jpg"></a>
    </div>
    <ul class="thumbs">
        <li class="thumb">
            <a href="#"><img src="image.jpg"></a>
        </li>
        ...
    </ul>
</div>

I'm also using a bit of jQuery to add a class of .full to the .thumb a element, which makes the thumbnails go fullscreen.

$( ".thumb a" ).click(function() {
  $( this ).toggleClass( "full" );
  $( "nav" ).addClass( "show" );
});

Now I can't work out this next bit, I need a way when the .prev or .next buttons are clicked for it to remove the class of .full from the current element and add it to the next or previous .thumb a element, depending on which was clicked.

I've got a demo setup here: http://codepen.io/realph/pen/hjvBG

Any help is appreciated, thanks in advance!

P.S. If this turns out well, I plan on releasing it for free. I guess you can't have too many jQuery image galleries, eh?

Answer 1

Something like this will get you started, but what you're wanting to do takes a little time to get just right.

<script type="text/javascript">

    var imgSrcs = ['/imgs/this.jpg', '/imgs/will.jpg', '/imgs/work.jpg', '/imgs/just.jpg', '/imgs/fine.jpg'];//img url loaded into an array


    var btnPrev = document.getElementById('prev'),
        btnNext = document.getElementById('next'),
        cover = document.getElementById('cover'),
        thumb = document.getElementById('thumb'),
        currImgIx = 0;

    btnPrev.onclick = function () {

        if (currImgIx === 0) { return; };

        currImgIx--;
        cover.src = imgSrcs[currImg];
        thumb.src = imgSrcs[currImgIx];
    };

    btnNext.onclick = function () {

        if (currImgIx === imgSrcs.length - 1) { return; };

        currImgIx++;
        cover.src = imgSrcs[currImgIx];
        thumb.src = imgSrcs[currImgIx];
    };

</script>

<div class="gallery portrait">
    <nav>
        <div class="close">X</div>
        <div id="prev" class="prev">Prev</div>
        <div id="next" class="next">Next</div>
    </nav>
    <div class="cover">
        <a href="#"><img id="cover" src="image.jpg"></a>
    </div>
    <ul class="thumbs">
        <li class="thumb">
            <a href="#"><img id="thumb" src="image.jpg"></a>
        </li>
        ...
    </ul>
</div>

Answer 2

I suggest the following additions to your code to handle wrapping around with your next and previous links:

$(".next").click(function (event) {
  navigate("next");
  return false;
});

$(".prev").click(function (event) {
  navigate("prev");
  return false;
});

function navigate(operation) {
  var $thumbs = $(".thumb"),
      $full = $thumbs.find("a.full").closest(".thumb"),
      $next;
  $thumbs.find('a').removeClass('full');
  if (operation == 'prev' && $full.is($thumbs.first()))
     $next = $thumbs.last();
  else if (operation == 'next' && $full.is($thumbs.last()))
    $next = $thumbs.first();
  else
    $next = $full[operation]();
  $next.find('a').click();
}

Here is a forked CodePen.

Answer 3

You can use $.next() and $.prev():

$(".prev").click(function () {
    var current = $('.full');
    current.prev('.thumb').addClass('full');
    current.removeClass('full');
    return false; // stop propagation; prevents image click event
});

$(".next").click(function () {
    var current = $('.full');
    current.next('.thumb').addClass('full');
    current.removeClass('full');
    return false; // stop propagation; prevents image click event
});