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 の Web サイトから 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-08T16:06:54.543 に答える