调用的fancybox使用jQuery。点击功能
-
16-09-2019 - |
题
我想定制的fancybox这样,当点击了网页上显示的4张图片中的一个,这是在窗口的fancybox加载了一个。
要做到这一点我想使用.attr起作用jquery的传递图片src(作为变量)到主图像保持体。
我的当前jQuery代码是:
jQuery(document).ready(function($) {
$("a.group").click(function() {
var image = $(this).attr("name");
$("#largeId").attr({ src: image});
$("a.group").fancybox({
'frameWidth':966,
'frameHeight': 547,
'hideOnContentClick': false,
'overlayOpacity': 0.85,
'callbackOnShow': function() {
$("#container ul#thumbnails li a").click(function(){
var largePath = $(this).attr("title");
$("#largeId").fadeOut("fast").hide();
$("#largeId").attr({ src: largePath });
$("#largeId").fadeIn("slow");return false;
});
$("#container ul#thumbnails li a").click(function(){
$('.active').removeClass('active');
$(this).addClass("active");
});
}
});
});
});
主页图像的HTML是:
<ul id="images">
<li><a id="one_image" class="group" href="#hidden" title="images/1_large.jpg"><img src="Images/1.jpg" alt="MOMA NY #1" title="MOMA NY #1" /></a></li>
<li><a class="group" href="#hidden" title="images/2_large.jpg"><img src="Images/2.jpg" alt="MOMA NY #2" title="MOMA NY #2" /></a></li>
<li><a class="group" href="#hidden" title="images/3_large.jpg"><img src="Images/3.jpg" alt="MOMA NY #3" title="MOMA NY #3" /></a></li>
<li><a class="group" href="#hidden" title="images/4_large.jpg"><img src="Images/4.jpg" alt="MOMA NY #4" title="MOMA NY #4" /></a></li>
</ul>
有关的的fancybox窗口:
<div id="main_image">
<img id="largeId" src="" alt="" title="" />
</div>
------- EDIT ----------
只是让你知道,这主要是工作,如果我得到的fancybox所有通话做工精细内的开始摆脱点击功能,功能。
解决方案
我认为它变得过于复杂。
jQuery(document).ready(function($) {
$("a.group").fancybox({
'frameWidth': 300,
'frameHeight': 300
});
});
这应该是你需要的所有的JavaScript。然后,你应该标题和分组移动到一个标签。
<ul id="images">
<li><a class="group" rel="group" href="images/2_large.jpg" title="MOMA NY #1"><img src="Images/3.jpg" alt="MOMA NY #1"/></a></li>
<li><a class="group" rel="group" href="images/1_large.jpg" title="MOMA NY #2" ><img src="Images/3.jpg" alt="MOMA NY #2"/></a></li>
<li><a class="group" rel="group" href="images/3_large.jpg" title="MOMA NY #3" ><img src="Images/3.jpg" alt="MOMA NY #3"/></a></li>
<li><a class="group" rel="group" href="images/4_large.jpg" title="MOMA NY #4" ><img src="Images/4.jpg" alt="MOMA NY #4"/></a></li>
</ul>
这就是你要找的东西?
其他提示
我以前从未使用过的fancybox,但只是看你的代码,我想调用的fancybox需要从
固定线路$("a.group").fancybox({
这样:
$(this).fancybox({
对不起,我没有测试过这...但我相信这是你的问题。
当你需要一个被点击的链接的属性有些人可能会发现这很有用。
//html:
<a href="#popup" id="lnk_0">Create a new product w/ this image</a>
<div style="display:none;"><div id="popup"><h1>This is popup text.</h1></div></div>
//jquery:
$("a[href='#popup']").fancybox({
'onStart': function(selectedArray, selectedIndex, selectedOpts)
{
alert(selectedOpts.orig.attr('id'));
}
});
请注意:这是一个古老的线程,但我只想澄清,如果使用单击呼叫你不应该使用$(本),因为这将需要双击
。$(function() {
$("myelement").click(function() {
$.fancybox();
});
});
<a style="display: none;" href="#fancy-box" class="fancybox-inline" id="fancybox-trigger"></a>
<script type="text/javascript">
$(document).ready(function() {
$("#fancybox-trigger").trigger('click');
});
</script>
不隶属于 StackOverflow