fancybox ajax图片库

我想通过ajax加载fancybox图片库。这是我第一次使用fancybox和我的jQuery知识是有限的。这是我迄今为止所做的一切。图库链接;fancybox ajax图片库

<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 
    }); 
});

当我点击图库链接，所有的图像出现在一个窗口彼此相邻，而不是作为一个幻灯片放映。我已经通过Google和堆栈溢出找到了答案，但没有成功。希望有人能帮忙。在此先感谢。

来源

2013-09-30 Rob

您的ajax链接不需要具有“fancybox”类，因为它只会将链接带到页面。然后，当链接（和缩略图）通过ajax调用进入页面时，您仍然需要点击其中一个来激发fancybox图库。另一方面，如果您希望从单个链接中激活图库，则可能需要采用不同的方法，可以将图库元素放在一个变量中，或者将它们放在可以通过ajax读取的json文件中。 – JFK

取出型阿贾克斯，然后就放$(".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

来源

2013-09-30 13:02:31

这种方法只适用于当href和image src值指向图像时，在我的版本中，它们指向一个创建值的php脚本，因此类型为：ajax。 – Rob

好吧，然后用'$ .fancybox.open（arr，{//你的选项在这里 }）试试''就像[this]（http://jsfiddle.net/wg4MD/） –

谢谢，但我不确定这是我需要的。我试图使用ajax加载图库的原因是每个页面上有许多画廊，每个画廊都包含许多图像，全部来自mysql数据库。我已经测试了一个页面加载所有图像引用到一个隐藏的div，但页面加载是减慢的方式，因此需要一个即时的ajax解决方案。 – Rob

使用PHP页面来显示图像

有点像

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

所以如果你去那个网址就会显示出图像本身

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

然后只需调用的fancybox normaly ..

$(".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>

您传递给缩略图的任何文件。PHP页面将呈现（我加入了W和H得到，因为你可能会使用PHP端发送到客户端之前调整）你的情况东西

像

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

，并用上面的东西回合PHP页面调用图像

也想指出，使用Ajax调用HTML是不是最佳实践。你可能要考虑使用javascript templting框架（小胡子等），并且只能通过ajax将它传递给模板来返回JSON。

来源

2013-10-18 10:59:32 WilliamStam

fancybox ajax图片库

回答

相关问题