自动将fancybox类添加到图像链接

我正在使用Pulse CMS设计一个需要可编辑的简单静态网站。我正在使用FancyBox进行图像突出显示和增强。自动将fancybox类添加到图像链接

我想要的是所有的图像自动与FancyBox关联，而无需手动添加代码。

基本上是这样的

<img src="image.jpg">

应该成为

<a class="fancybox" href="image.jpg"><img src="image.jpg"></a>

我希望这是清楚我的目标。我摆弄着使用jQuery和PHP，但无法真正弄清楚。我甚至不知道这是否可能，如果没有其他选择。

针对肯尼迪的建议 - 请告诉我在做什么错在这里：

<html> 
    <head> 
     <link rel="stylesheet" href="includes/jquery.fancybox.css" type="text/css" media="screen"/>  
     <script type="text/javascript" src="includes/jquery-1.9.1.min.js" type="text/javascript"></script> 
     <script type="text/javascript" src="includes/jquery.fancybox.js" type="text/javascript"></script>  
     <script type="text/javascript"> 
      $("img").on("click", function(){ 
       $.fancybox($(this).attr("src"),{ 
        // API options 
        padding : 0 // example 
       }); 
      }); 
     </script> 
    </head> 

    <body> 

     <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" alt=""/> 

    </body> 
</html>

来源

2013-04-08 Daniel

你需要用你的代码在'。就绪（）'方法...检查** [更新的jsfiddle（http://jsfiddle.net/g5uzx/3/）** – JFK 2013-04-09 23:12:16

如果你想要的是all the images to automatically be associated with FancyBox，那么也许你甚至都不需要包装 - .wrap() - 他们有一个锚。一种不同的方法将他们直接链接到的fancybox上click，如：

$("img").on("click", function(){ 
    $.fancybox($(this).attr("src"),{ 
     // API options 
     padding : 0 // example 
    }); 
});

这样，实际的图像被点击，直到你不处理任何事情。这将是在性能方面更好（考虑100+图片被包裹每个页面加载）

见JSFIDDLE

注意：.on()需要jQuery的V1。7+

编辑：

Umair Abid的约特异性的评论是值得考虑的，因为你可能不喜欢的fancybox打开所有页面的图像（这将包括您的标志。），这将是一个更好的办法是针对你的具体内容容器的图像，所以这条线

$("img").on("click", function(){

...会更好地工作，像

$("#contentContainer img").on("click", function(){

来源

2013-04-08 02:54:47 JFK

我即将变得疯狂。您的jsFiddle当然可以正常工作，但它不适用于我的网站。点击图片不会做任何事情。对不起，我无法给出任何具体的反馈，但我被卡住了：/ – Daniel 2013-04-09 22:13:06

我在上面的原始问题中添加了一个示例以进行说明。 – Daniel 2013-04-09 22:45:03

@Daniel你需要用你的代码在'。就绪（）'方法...看看** [更新的jsfiddle（http://jsfiddle.net/g5uzx/3/）** – JFK 2013-04-09 23:13:27

使用jQuery的.wrap（）函数与锚标签包装的所有图像的页面指向图像位置

来源

2013-04-08 01:02:57 Neal

$("img").wrap(function() { 
    return '<a class="fancybox" href="' + $(this).attr("src") + '"/>'; 
});

这应该有效。

编辑：哇错别字出wazoo

来源

2013-04-08 01:05:42 hatkirby

我猜有可能通过jQuery的。首先，你需要给图片IMG要转换成的fancybox网址标签类，不是使用下面的jQuery代码

$('img.attach_fancybox').each(function(){ 
    var src = $(this).attr('src'); 
    $(this).after('<a class="fancybox" href="'+src+'"><img src="'+src+'"></a>'); 
    $(this).hide(); 
})

我没有测试代码，以便让我知道，如果它不工作

来源

2013-04-08 01:08:35

我想你错过了其中的一部分它说：'不必手动添加代码.' – JFK 2013-04-08 03:12:11

@JFK：可能是但我想具体，你仍然可以删除类选择器，并选择所有的图像，但我认为这不会是一个很好的解决方案来转换所有img标签....没人想在fancybox中打开标志;） – 2013-04-08 06:10:07

同意。也许'$（'＃container img'）'会更好。 – JFK 2013-04-08 07:10:02

使用

$("img").wrap(function() { 
    return "<a class='fancybox' href='" + $(this).attr("src") + "' />"; 
});

来源

2013-04-08 01:09:41

自动将fancybox类添加到图像链接

回答

相关问题