Question

我正在使用Pulse CMS来设计一个需要可编辑的简单静态网站。我正在使用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>

Answer 1

如果你想要的是all the images to automatically be associated with FancyBox，那么你甚至可能不需要用锚来包装 - .wrap() - 它们。另一种方法是将它们直接链接到click上的fancybox，如：

$("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(){

Answer 2

使用jQuery的.wrap（）函数来包装页面中的所有图像，其中锚标记指向图像位置

Answer 3

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

这应该有用。

编辑：谁输错了wazoo

Answer 4

我想通过jquery可以实现。首先，您需要为要转换为fancybox url的img标记提供类，而不是使用以下jquery代码

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

我没有测试过代码，所以如果它不起作用请告诉我

Answer 5

使用

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

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

5 个答案: