[爆卦]jquery lightbox範例是什麼?優點缺點精華區懶人包

為什麼這篇jquery lightbox範例鄉民發文收入到精華區:因為在jquery lightbox範例這個討論話題中,有許多相關的文章在討論,這篇最有參考價值!作者frostyjoan (洛洛)看板Web_Design標題Re: [問題] jquery切換圖片...


回文比較好解釋(推文好難斷句啊~~~)

妳做的檔案主要有兩個效果

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
revo3512: 謝謝F大!! 另外想在請問~~ 放大的圖須修改哪邊才可以隨 01/04 17:50
revo3512: 螢幕調整寬高呢? 01/04 17:50
frostyjoan: http://www.jacklmoore.com/colorbox/ 01/04 21:24
frostyjoan: 下方的setting,很多參數可以調整(包括妳問的寬高) 01/04 21:25
※ 編輯: frostyjoan (114.36.163.185), 01/04/2017 21:25:55
revo3512: 我找到啦!!!!! 感謝F大~ 01/05 10:33
revo3512: 想再補充~ 點圖放大完之後,回到原本頁面,會發現中圖有 01/05 10:34
revo3512: 藍色的外框,將a加上{outline: medium none;}就能取消了 01/05 10:35

你可能也想看看

搜尋相關網站