Question

有没有人设法让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>

Answer 1

我不确定你是否解决了这个问题，但我可以通过将isotope与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>

同位素和prettyPhoto

1 个答案: