アイソトープと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

答えて

関連する問題