jQuery FancyBox 插件动态展示图库
jQuery FancyBox Plugin display gallery dynamically
我在我的 CodeIgniter 应用程序中有一个视图。我正在使用 fancybox 显示用户提交的来自 foreach php 循环的图像。我的观点是这样的:
<ul>
<?php
foreach($photo_strip['photos'] as $photo) { ?>
<li>
<a href="" class="fancybox" rel="group"><img src="<?= $photo->image ?>" alt=""/></a>
</li>
</ul>
在 <li>
个元素中,我不仅显示图像,而且 link 它们。请注意正在显示的图像或在拇指文件夹中。为了让缩略图显示实际图像,我通过使用 Jquery 更改 href 路径,将每个缩略图动态地 link 到其父图像。所以这是我的 jQuery :
$(document).ready(function()
{
$('.fancybox').click(function()
{
var srcPath = $(this).find("img").attr("src");
var newFilename = srcPath.split('/').pop();
var newPath = 'http://example.com/images/trip/' + newFilename;
});
因此,每次当用户单击保存在目录 /trip/thumbs/ 中的缩略图时,我的 jQuery 会更改文件路径并从以下位置加载实际图像:/trip/
到目前为止,这很有效。但是当我向它添加 fancybox 时,它要么只显示缩略图,除了第一个点击的图像,或者尽管点击导航按钮它加载相同的图像。所以我的完整脚本如下所示:
$(document).ready(function()
{
$('.fancybox').click(function()
{
var srcPath = $(this).find("img").attr("src");
var newFilename = srcPath.split('/').pop();
var newPath = 'http://example.com/images/trip/' + newFilename;
$('.fancybox').attr("href", newPath);
$('.fancybox').fancybox({
padding: 0
});
});
});
我的问题是:我希望能够单击一个拇指,它会打开 fancybox,当我导航时,它应该从父目录打开图像,而不是拇指本身。
有办法吗?
由于 fancybox 从每个锚点(为空)中的 href
值集合构建图库,因此不值得在 click
之后更改这些值(但对于第一个元素)因为,fancybox 画廊的导航箭头不知道 click
事件 绑定到带有 class 的锚点fancybox
。换句话说,导航箭头上的 click
事件与绑定到 class fancybox
.
元素的事件不同
您可能需要使用 .each()
方法在锚点绑定到 fancybox 之前为锚点添加 data-fancybox-href
属性。然后你可以将 fancybox 链接到同一个选择器。
此外,由于您只是将 <img>
标记的路径从 /trip/thumbs/
更改为 /trip/
,为了简单起见,您可以使用 .replace()
方法,而不是声明许多带有分裂和流行音乐的变量,如:
jQuery(document).ready(function () {
jQuery(".fancybox").each(function () {
$(this).attr("data-fancybox-href", $(this).find("img").attr("src").replace("/trip/thumbs/", "/trip/"));
}).fancybox({
padding: 0
});
});
我在我的 CodeIgniter 应用程序中有一个视图。我正在使用 fancybox 显示用户提交的来自 foreach php 循环的图像。我的观点是这样的:
<ul>
<?php
foreach($photo_strip['photos'] as $photo) { ?>
<li>
<a href="" class="fancybox" rel="group"><img src="<?= $photo->image ?>" alt=""/></a>
</li>
</ul>
在 <li>
个元素中,我不仅显示图像,而且 link 它们。请注意正在显示的图像或在拇指文件夹中。为了让缩略图显示实际图像,我通过使用 Jquery 更改 href 路径,将每个缩略图动态地 link 到其父图像。所以这是我的 jQuery :
$(document).ready(function()
{
$('.fancybox').click(function()
{
var srcPath = $(this).find("img").attr("src");
var newFilename = srcPath.split('/').pop();
var newPath = 'http://example.com/images/trip/' + newFilename;
});
因此,每次当用户单击保存在目录 /trip/thumbs/ 中的缩略图时,我的 jQuery 会更改文件路径并从以下位置加载实际图像:/trip/ 到目前为止,这很有效。但是当我向它添加 fancybox 时,它要么只显示缩略图,除了第一个点击的图像,或者尽管点击导航按钮它加载相同的图像。所以我的完整脚本如下所示:
$(document).ready(function()
{
$('.fancybox').click(function()
{
var srcPath = $(this).find("img").attr("src");
var newFilename = srcPath.split('/').pop();
var newPath = 'http://example.com/images/trip/' + newFilename;
$('.fancybox').attr("href", newPath);
$('.fancybox').fancybox({
padding: 0
});
});
});
我的问题是:我希望能够单击一个拇指,它会打开 fancybox,当我导航时,它应该从父目录打开图像,而不是拇指本身。
有办法吗?
由于 fancybox 从每个锚点(为空)中的 href
值集合构建图库,因此不值得在 click
之后更改这些值(但对于第一个元素)因为,fancybox 画廊的导航箭头不知道 click
事件 绑定到带有 class 的锚点fancybox
。换句话说,导航箭头上的 click
事件与绑定到 class fancybox
.
您可能需要使用 .each()
方法在锚点绑定到 fancybox 之前为锚点添加 data-fancybox-href
属性。然后你可以将 fancybox 链接到同一个选择器。
此外,由于您只是将 <img>
标记的路径从 /trip/thumbs/
更改为 /trip/
,为了简单起见,您可以使用 .replace()
方法,而不是声明许多带有分裂和流行音乐的变量,如:
jQuery(document).ready(function () {
jQuery(".fancybox").each(function () {
$(this).attr("data-fancybox-href", $(this).find("img").attr("src").replace("/trip/thumbs/", "/trip/"));
}).fancybox({
padding: 0
});
});