Добавить класс к следующему элементу

Question

Я посмотрел на interwebs для галереи изображений jQuery и не смог найти тот, который подходит для того, что я хотел сделать. Таким образом, я, наконец, создал его и пытаюсь выяснить, как заставить предыдущие и следующие кнопки работать.

<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> 

Я также использую немного JQuery добавить класс .full к .thumb a элемента, что делает эскизы идти в полноэкранном режиме.

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

Теперь я не могу работать, это следующий бит, мне нужен способ, когда кнопки .prev или .next щелкают для того, чтобы удалить класс .full из текущего элемента и добавить его к следующему или предыдущему .thumb a элемент, в зависимости от которого был нажат.

У меня есть демо-установки здесь: http://codepen.io/realph/pen/hjvBG

Любая помощь приветствуется, спасибо заранее!

P.S. Если это будет хорошо, я планирую освободить его бесплатно. Наверное, у вас не может быть слишком много галерей изображений jQuery, а?

Answer 1

Вы можете использовать $ .next() и $ .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 
}); 

Answer 2

Я предлагаю следующие дополнения кода для обработки обтекания с следующей и предыдущей ссылкой:

$(".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(); 
} 

Описание: forked CodePen.

Answer 3

Что-то вроде этого поможет вам начать, но то, что вы хотите сделать, занимает немного времени, чтобы справиться с этим.

<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>