同位素和prettyPhoto

有沒有人設法讓prettyPhoto與Isotope一起工作？同位素和prettyPhoto

我已經整合了它 - 但是當我使用同位素過濾來查看一組特定的圖像時，我仍然在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>

來源

2011-11-11 Mark Richardson

我不知道，如果你解決了這個，但我可以分享如何我通過將同位素與shadowbox.js集成來實現這一任務。我正在尋找與您所描述的功能相同的功能，但使用了不同的工具來實現此功能。首先，我從shadowbox網站下載了css和js代碼，並將它們放在我的文件夾中。然後，我添加以下代碼到我的HTML文檔的頁眉元素：

<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-08 16:06:54

同位素和prettyPhoto

回答

相關問題