同位素和漂亮照片

发布于 2024-12-15 02:26:55 字数 1516 浏览 3 评论 0原文

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

原文

Has anyone managed to get prettyPhoto to work along with Isotope?

I have got it integrated - however when I filter using isotope to view a particular set of images, I still get the full set of images in prettyPhoto.

You can see the page on my test site: http://wordpress.markrichardson.co.uk/wedding-photography-gallery/

The code I'm using is:

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

兲鉂ぱ嘚淚 2024-12-22 02:26:55

我不确定您是否已经解决了这个问题，但我可以分享我如何通过将同位素与 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 中，我将其添加到图像中，以使它们出现在 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>

I'm not sure if you solved this yet, but I can share how I approached this task by integrating isotope with shadowbox.js. I was looking for the same functionality as you described, but used a different tool to get there. First, I downloaded the css and js code from the shadowbox website and put them in my folder. Then I added the following code to the header element of my html document:

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

Then, in the HTML, I added this to the images to get them to appear inside the shadowbox. [niceboxes] is the gallery name and all images with this tag get put into the same gallery:

<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>

回复收藏 0 原文

~没有更多了~