1

我正在使用 Pulse CMS 设计一个需要可编辑的简单静态网站。我正在使用 FancyBox 进行图像突出显示和增强。

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

基本上是这样的

<img src="image.jpg">

应该成为

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

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

回应 JFK 的建议——请告诉我在这里做错了什么：

<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>
4

5 回答 5

1

如果你想要的是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-08T02:54:47.530 回答
0

使用 jQuery 的 .wrap() 函数将页面中的所有图像包装起来，并使用指向图像位置的锚标记

于 2013-04-08T01:02:57.253 回答
0 
$("img").wrap(function() {
    return '<a class="fancybox" href="' + $(this).attr("src") + '"/>';
});

这应该有效。

编辑：哇，错别字了

于 2013-04-08T01:05:42.153 回答
0

我想通过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();
})

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

于 2013-04-08T01:08:35.583 回答
0

采用

$("img").wrap(function() {
  return "<a class='fancybox' href='" + $(this).attr("src") + "' />";
});
于 2013-04-08T01:09:41.357 回答