1

有没有人设法让 prettyPhoto 与 Isotope 一起工作？

我已经集成了它——但是当我使用同位素过滤来查看一组特定的图像时，我仍然可以在 prettyPhoto 中获得完整的图像集。

你可以在我的测试网站上看到页面：http ://wordpress.markrichardson.co.uk/wedding-photography-gallery/

我正在使用的代码是：

<script type="text/javascript" charset="utf-8">
    $(function(){ var $container = $('#wedding');
    $checkboxes = $('#filters input'); $checkboxes.change(function(){
        var filters = [];
        $checkboxes.filter(':checked').each(function(){
          filters.push( this.value );
        });
        filters = filters.join(', ');
        $container.isotope({ filter: filters });
    });
    $container.isotope({
        // options
    itemSelector : '.photo',
    layoutMode : 'fitRows', 
    sortBy : 'random',
    sortAscending : true
     });
    }); </script> <script type="text/javascript" charset="utf-8">  
    $(document).ready(function(){    
    $("a[rel^='[wedding_photography]']").prettyPhoto({
    slideshow: 5000, /* false OR interval time in ms */
                opacity: 0.70,
                show_title: false,
                allow_resize: false,
                default_width: 950,
                default_height: 500,
                theme: 'light_rounded', 
                horizontal_padding: 20,
    overlay_gallery: false,
                social_tools: false,
    deeplinking: false
    });
      });
    </script>
4

1 回答 1

0

我不确定你是否解决了这个问题，但我可以分享我是如何通过将同位素与 shadowbox.js 集成来完成这项任务的。我一直在寻找与您描述的功能相同的功能，但使用了不同的工具来实现。首先，我从 shadowbox 网站下载了 css 和 js 代码并将它们放在我的文件夹中。然后我将以下代码添加到我的 html 文档的 header 元素中：

<head>
    <link rel="stylesheet" type="text/css" href="shadowbox.css">
    <script type="text/javascript" src="shadowbox.js"></script>
</head>

然后，在 HTML 中，我将其添加到图像中，以使它们出现在阴影框内。[niceboxes] 是画廊名称，所有带有此标签的图像都被放入同一个画廊：

<div class="box brown square">
   <h2 class="box-title">Deluxe Brown Box</h2>
   <div class="box-img">
   <a href="brown_box.jpg" rel="shadowbox[niceboxes]" title="brown box"><img src="brown_box_thumbnail.png"/></a>  
 </div>
</div>
于 2012-08-08T16:06:54.543 回答