0

我正在尝试通过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
    });
});

当我单击图库链接时，所有图像都显示在一个窗口中，彼此相邻，而不是幻灯片。我搜索了谷歌和堆栈溢出来寻找答案，但没有成功。希望有人可以提供帮助。提前致谢。

4

2 回答 2

0

使用 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 模板框架（mustache 等），并且仅通过 ajax 返回 JSON 并将其传递给模板。

于 2013-10-18T10:59:32.800 回答
0

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

解释

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>

脚本

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

有关更多信息，您可以在此处查看

于 2013-09-30T13:02:31.467 回答