點擊贊顯示大圖

Question

我有一個旋轉木馬滑塊， 當我點擊一個拇指圖像需要加載在大橫幅。 我該怎麼做？

它需要平滑，它顯示一個大圖像，當點擊拇指需要淡入現有圖像的拇指。但首先我需要讓它工作。

Example here

New other example is here!

<div class="big"> 
    <img src="http://placehold.it/476x300&text=first" /> 
    <img src="http://placehold.it/476x300&text=sec" /> 
    <img src="http://placehold.it/476x300&text=third" /> 
    <img src="http://placehold.it/476x300&text=four" /> 
    <img src="http://placehold.it/476x300&text=five" /> 
    </div> 

    <div class="owl-carousel small"> 
    <div class="item"> 
     <img src="http://placehold.it/238x150&text=first" /> 
    </div> 
    <div class="item"> 
     <img src="http://placehold.it/238x150&text=sec" /> 
    </div> 
    <div class="item"> 
     <img src="http://placehold.it/238x150&text=third" /> 
    </div> 
    <div class="item"> 
     <img src="http://placehold.it/238x150&text=four" /> 
    </div> 
    <div class="item"> 
     <img src="http://placehold.it/238x150&text=five" /> 
    </div> 
    </div> 

腳本：

$(document).ready(function() { 
     $('.owl-carousel').owlCarousel({ 
     loop: true, 
     margin: 10, 
     responsiveClass: true, 
     responsive: { 
      0: { 
      items: 2, 
      nav: false 
      }, 
      600: { 
      items: 3, 
      nav: false 
      }, 
      1000: { 
      items: 4, 
      nav: false, 
      loop: false, 
      margin: 20 
      } 
     } 
     }) 
    }) 

Answer 1

您需要一個事件處理程序附加到每個圖像，

我看你裝的jQuery這使得這個好和容易

$(function(){ 
    $(".big img:eq(0)").nextAll().hide(); 
    $(".es-slides .es-slide-inner img").click(function(e){ 
    var index = $(this).index(); 
    $(".big img").eq(index).show().siblings().hide(); 
    });  

    $('#basic_slider img').each(function(i,image){ 
    $(image).on('click', function(){ 
     $('.big').html('<img src=\''+ image.src + '\'/>'); 
    }); 
    }); 
}); 

我們正在使用通過轉盤每個圖像jQuery的每個方法來循環，然後更新裏面的html的使用具有對圖像的正確SRC圖像標記。

或者，您可以顯示/隱藏.big容器中的圖像，就像您的html已經顯示的一樣。這可能會更好地按照您的意願淡入淡出圖像。

Fiddle