Re: [問題] jquery切換圖片+lightbox

看板Web_Design作者frostyjoan (洛洛)時間8年前 (2017/01/04 17:33)推噓2(2推 0噓 5→)

留言7則, 2人參與討論串2/2 (看更多)

回文比較好解釋（推文好難斷句啊～～～）妳做的檔案主要有兩個效果 1. 切換圖片 2. lightbox 首先 1.的切換圖片，程式在 42～55 行點了 .abgne-block-20120106 a 後，把 #show-image 的 src 換掉（其中還有檢查圖片不同張時才執行、<a> 預設超連結要取消）再來 2.lightbox 妳有使用套件 jquery.colorbox 偷看一下，套件範例點選打開 lightbox 的開關都是 <a> 說明文件也有寫 set a href to assignment to an element 因此可以知道，只要把 href 寫好，套件會自動幫我們把圖片 show 出來所以把剛剛的程式加一段，讓 href 值為目前顯示的圖片 var $showImage = $('#show-image'); // 當滑鼠移到 .abgne-block-20120106 中的某一個超連結時 $('.abgne-block-20120106 a').click(function(){ // 把 #show-image 的 src 改成被移到的超連結的位置 //$showImage.attr('src', $(this).attr('href')); var $this = $(this), _src = $this.attr('href'); if($showImage.attr('src') != _src){ $showImage.stop(false, true).fadeTo(0, 0).attr('src', _src).stop(false, true).fadeTo(400, 1); 加上這一行 $showImage.parents('.group1').attr('href', _src); } }).click(function(){ // 如果超連結被點擊時, 取消連結動作 return false; }); ※ 引述《revo3512 (brands)》之銘言： : 版上大家午安~~ : 小妹最近剛開始接觸Jquery，目前僅在會套用套件，微調數據的新手程度>< : 想請教版上大家...我想要做一個可以切換圖片，然後點選大圖會出現lightbox的效果。 : 但現在卡在，我不管切換哪張圖片，點選大圖後的lightbox永遠都是第一張圖的大圖... : 沒辦法點選第二張後，lightbox的圖片自動跑第二張... : 請問有前輩可以幫忙修正或指導嘛？ : 謝謝>< : 檔案如連結：https://goo.gl/XqVEAg -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 223.137.189.95 ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1483522381.A.063.html ※ 編輯: frostyjoan (223.137.189.95), 01/04/2017 17:37:43