fancybox ajax图片库 [英] fancybox ajax image gallery

问题描述

我正在尝试通过Ajax加载fancybox图像库.这是我第一次使用fancybox，而且我的jquery知识是有限的. 到目前为止，这是我整理的内容.图库链接；

Im am trying to load a fancybox image gallery via ajax. It's my first time using fancybox and my jquery knowledge is limited. Here's what I have put together so far. Gallery link;

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

galleryAj.php回显图像链接列表，如下所示；

the galleryAj.php echos a list of image links as follows;

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

这是JavaScript

And here's the javascript

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

当我单击图库链接时，所有图像都显示在彼此相邻的单个窗口中，而不是幻灯片显示. 我拖网了Google并堆栈溢出以获取未成功的答案.希望有人能帮忙. 预先感谢.

When I click the gallery link, all of the images appear in a single window next to each other, not as a slide show. I have trawled Google and stack overflow for answers without success. Hope someone can help. Thanks in advance.

推荐答案

使用php页面显示图片

use a php page to show the image

喜欢

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

因此，如果您转到该网址，它将显示图像本身

so if you go to that url it will show the image itself

种imagecreatefromstring($file);类型的东西，用于设置编码和内容.

sort of imagecreatefromstring($file); type thing setting the encoding and stuff.

然后只需正常调用fancybox即可.

then just call fancybox normaly..

js

js

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

html

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端调整大小)

any file you pass to the thumbnail.php page will be rendered (i added the w and h gets cause you'll probably use the php side to resize before sending to the client)

在您的情况下，类似

js

js

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

并使用上述内容在php页面调用图片

and use the above stuff bout the php page calling the image

还想指出，使用ajax调用html并不是最佳实践.您可能要考虑使用javascript模板框架(胡子等)，并且仅通过将其传递给模板的ajax返回JSON.

would also like to point out that using ajax to call html is sort of not best practises. you might want to consider using a javascript templting framework (mustache etc) and only return the JSON via ajax passing it to the template.

这篇关于fancybox ajax图片库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！