點擊jQuery圖片縮略圖更改

我附上了一個可用的jsFiddle。是的，它可以工作，但是我試圖達到的似乎超出了我的經驗。點擊jQuery圖片縮略圖更改

目前它顯示一排縮略圖，當你點擊其中一個縮略圖時，它將顯示與特色圖像相同的圖像。

我需要做的是能夠將縮略圖顯示爲與顯示爲特色圖像的圖像不同的圖像。

例如，我有一個產品特色圖片，該圖片也將放大此圖片的裁剪版本作爲縮略圖。

縮圖1（放大裁剪版本）/特色圖片1

縮圖2（放大裁剪版本）/特色圖片2

縮圖3（放大裁剪版本）/特色圖片3

<img id="image" src="http://www.981powerfm.com.au/images/stories/2014/09/happy_animal_5.jpg" border="0" /> 

<img src="http://www.981powerfm.com.au/images/stories/2014/09/happy_animal_5.jpg" class="thumb" width='100px' /> 
<img src="http://smartyvet.com/site/wp-content/uploads/2014/05/happy5.jpg" class="thumb" width='100px' /> 
<img src="http://www.telegram.ee/wp-content/uploads/2013/11/a.aaa-Happy-animals.jpg" class="thumb" width='100px' /> 

$(document).ready(function() { 
$(".thumb").click(function() { 
    var dir = $(this).attr("src"); 
    $('#image').hide(); 
    $('#image').fadeIn('fast'); 
    $('#image').attr("src", dir); 
}); 
});

這是否有道理？

任何幫助將不勝感激。

乾杯

來源

2015-10-15 tebrown

你需要的是當您單擊縮略圖出現隨機圖像，而不是點擊縮略圖？ – Bak

@Bak不是隨機圖像，而是縮略圖的相關圖像。 – tebrown

[嘗試在點擊時更改圖片並再次返回]可能的重複（http://stackoverflow.com/questions/24811672/trying-to-change-an-image-on-click-and-back-again） –

數據標記添加到包含要顯示上點擊即可，而不是得到IMG的src圖像的URL您的縮略圖獲取數據的屬性值。

看到：https://jsfiddle.net/gq74rgc3/3/

<img data-big="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTUM5JaTT3WP59hqqcL5pYEgcfyB4qUvzLFv4k5pzLqBeRsJaOi" src="http://www.981powerfm.com.au/images/stories/2014/09/happy_animal_5.jpg" class="thumb" width='100px' />

和JavaScript：

$(document).ready(function() { 
    $(".thumb").click(function() { 
     var dir = $(this).data("big"); 
     $('#image').hide(); 
     $('#image').fadeIn('fast'); 
     $('#image').attr("src", dir); 
    }); 
});

來源

2015-10-15 21:56:26

謝謝堆格雷格，完美的作品！ – tebrown

要添加到此 - 我們能夠在縮略圖周圍集成邊框，點擊時第一個縮略圖處於活動狀態？ @Gregg鄧肯 – tebrown

很容易通過在你的css中創建一個類.thumb.active {border：1px solid red;}。然後添加該頁面加載時將激活的img標籤。然後從所有.thumbs中刪除活動類並將其添加回單擊的一個。 https://jsfiddle.net/gq74rgc3/4/ –

像這樣的事情？

$(document).ready(function() { 
    var images_array = ["http://www.981powerfm.com.au/images/stories/2014/09/happy_animal_5.jpg","http://www.981powerfm.com.au/images/stories/2014/09/happy_animal_5.jpg","http://smartyvet.com/site/wp-content/uploads/2014/05/happy5.jpg","http://www.telegram.ee/wp-content/uploads/2013/11/a.aaa-Happy-animals.jpg"]; 
    $(".thumb").click(function() { 
     var dir = $(this).attr("src"); 
     $('#image').hide(); 
     $('#image').fadeIn('fast'); 
     $('#image').attr("src", images_array[Math.floor((Math.random()*4))]); 
    }); 
});

http://jsfiddle.net/xL3p0drv/1/

它從陣列中的隨機指標和顯示圖像

來源

2015-10-15 21:59:51 Bak

點擊jQuery圖片縮略圖更改

回答

相關問題