作者frostyjoan (洛洛)
看板Web_Design
标题Re: [问题] jquery切换图片+lightbox
时间Wed Jan 4 17:32:59 2017
回文比较好解释（推文好难断句啊～～～）
你做的档案主要有两个效果
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://webptt.com/cn.aspx?n=bbs/Web_Design/M.1483522381.A.063.html
※ 编辑: frostyjoan (223.137.189.95), 01/04/2017 17:37:43
1F：推 revo3512: 谢谢F大!! 另外想在请问~~ 放大的图须修改哪边才可以随 01/04 17:50
2F：→ revo3512: 萤幕调整宽高呢？ 01/04 17:50
4F：→ frostyjoan: 下方的setting，很多参数可以调整（包括你问的宽高） 01/04 21:25
※ 编辑: frostyjoan (114.36.163.185), 01/04/2017 21:25:55
5F：推 revo3512: 我找到啦!!!!! 感谢F大~ 01/05 10:33
6F：→ revo3512: 想再补充~ 点图放大完之後，回到原本页面，会发现中图有 01/05 10:34
7F：→ revo3512: 蓝色的外框，将a加上{outline: medium none;}就能取消了 01/05 10:35