Question

我正在尝试通过ajax加载fancybox图库。这是我第一次使用fancybox，我的jquery知识有限。这就是我到目前为止所做的一切。图库链接;

<a class="fancybox" href="galleryAj.php?galid=641"><img src="http://www.urllinktomyimage/4451_641.jpg" alt="#" height="140" width="210"></a>

galleryAj.php回显了如下图像链接列表;

<a class="fancybox" rel="gallery1" href="../images/4451_641.jpg" title=""><img src="../images/4451_641.jpg" alt="" /></a>

这是javascript

$(document).ready(function() {
$(".fancybox")
    .attr('rel', 'gallery1')
    .fancybox({
        type: 'ajax',
        padding : 0
    });
});

当我点击图库链接时，所有图像都显示在彼此相邻的单个窗口中，而不是幻灯片放映。我已经搜索了谷歌和堆栈溢出的答案没有成功。希望有人能提供帮助。提前谢谢。

Answer 1

删除类型ajax然后只是$(".fancybox").fancybox();这样放在画廊中显示它们，

<强> Explantion

HTML 的

<a class="fancybox" rel="gallery1" href="HREF1">
    <img src="SRC1" alt="" />
</a>
<a class="fancybox" rel="gallery1" href="HREF2">
    <img src="SRC2" alt="" />
</a>
<a class="fancybox" rel="gallery1" href="HREF3">
    <img src="SRC3" alt="" />
</a>
<a class="fancybox" rel="gallery1" href="HREF4">
    <img src="SRC4" alt="" />
</a>

SCRIPT

$(".fancybox").fancybox();

有关详细信息，请查看here

Answer 2

使用php页面显示图像

有点像

/images/thumbnail.php?file=this/is/my/path.jpg&w=100&h=100

所以，如果你去那个网址，它会显示图片本身

设置编码和内容的imagecreatefromstring($file);类型的东西。

然后只是正常地调用fancybox ..

js

$(".fancy").fancybox({type:'image'});

的 HTML 的

<a class="fancy" href="/images/thumbnail.php?file=this/is/my/path.jpg&w=1000&h=1000"> <img src="/images/thumbnail.php?file=this/is/my/path.jpg&w=50&h=50"/> </a>

您传递给thumbnail.php页面的任何文件都将被渲染（我添加了w和h，因为您可能会在发送到客户端之前使用php端调整大小）

在你的情况下像

的 JS 的

$("#galary_area").load("/galaries.php",function(){ $("a",this).fancybox({type:'image'}); })

并使用上面的东西回到调用图像的php页面

还要指出，使用ajax调用html并不是最佳实践。你可能想考虑使用javascript templting框架（胡子等），只通过ajax将JSON传递给模板。

fancybox ajax图片库

2 个答案: