Изотоп и довольно фото - PullRequest
Новая
       19

Изотоп и довольно фото

1 голос
/ 12 ноября 2011

Кому-нибудь удалось заставить 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>

1 Ответ

0 голосов
/ 08 августа 2012

Я не уверен, что вы уже решили это, но я могу поделиться тем, как я подошел к этой задаче, интегрировав изотоп с shadowbox.js. Я искал ту же функциональность, что вы описали, но использовал другой инструмент, чтобы добраться туда. Сначала я загрузил код css и js с сайта shadowbox и поместил их в свою папку. Затем я добавил следующий код в элемент заголовка моего HTML-документа: 

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

Затем в HTML я добавил это к изображениям, чтобы они появлялись внутри shadowbox. [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>
...