Filtered + Fancybox

Filtered results with fancybox lightbox

by Ajay Patel

HTML

<script src="https://raw.github.com/desandro/isotope/master/jquery.isotope.min.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<script src="//cdn.jsdelivr.net/isotope/1.5.25/jquery.isotope.min.js"></script>
<div id="related_links">
    <ul id="filters">
        <li><a href="#" data-filter="*">Show All</a>

        </li>
        <li><a href="#" data-filter=".1x3">1:3 Ratios</a>

        </li>
        <li><a href="#" data-filter=".1x1">1:1 Ratios</a>

        </li>
        <li><a href="#" data-filter=".central-coast">Central Coast</a>

        </li>
        <li><a href="#" data-filter=".bay-area">Bay Area</a>

        </li>
    </ul>
</div>
<br>
<br>
<div id="container" style="display: block; clear: both; ">
    <div class="photo 1x3 central-coast "> <a class="fancybox" data-title-id="photo1 " href="http://farm9.staticflickr.com/8186/8399069477_60b4f74336.jpg" rel="group"><img data-image="http://farm9.staticflickr.com/8186/8399069477_60b4f74336.jpg" src="http://farm9.staticflickr.com/8186/8399069477_60b4f74336.jpg" data-image-dimensions="1200x400 " data-image-focal-point="0.5,0.5 " alt=" "  class="photofit "/></a>

    </div>
    <div class="photo 1x1 bay-area "> <a class="fancybox" data-title-id="photo2 " href="http://farm9.staticflickr.com/8372/8371054624_3742d34f5e.jpg" rel="group"><img data-image="http://farm9.staticflickr.com/8372/8371054624_3742d34f5e.jpg" src="http://farm9.staticflickr.com/8372/8371054624_3742d34f5e.jpg" data-image-dimensions="1200x400 " data-image-focal-point="0.5,0.5 " alt=" "  class="photofit "/></a>

    </div>
    <div class="photo 1x3 bay-area "> <a class="fancybox" data-title-id="photo3 " href="http://farm9.staticflickr.com/8183/8371086578_8dec86b2f0.jpg" rel="group"><img data-image="http://farm9.staticflickr.com/8183/8371086578_8dec86b2f0.jpg"...

CSS

#related_links ul, #related_links li {
    list-style-type:none;
    margin:0;
    padding:0
}
/* this is for a horizontal menu if you want one */
 #related_links li {
    float:left;
}
#related_links a {
    display:block;
    background-color:#202020;
    color:#ffffff;
    padding:4px;
    text-transform:uppercase;
    text-decoration:none;
    font-size:10px;
    font-family:helvetica, sans-serif;
    margin-right:2px;
    margin-bottom:2px;
}
.photo {
    width: 220px;
    margin: 2px;
    float: left;
}
img {
    display: block;
    width: 100%;
}
#container {
    height:480px;
}
/**** Isotope Filtering ****/
 .isotope-item {
    z-index: 2;
    ddddddd
}
.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}
/**** Isotope CSS3 transitions ****/
 .isotope, .isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -ms-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
}
.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    -ms-transition-property: height, width;
    -o-transition-property: height, width;
    transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    -ms-transition-property: -ms-transform, opacity;
    -o-transition-property: -o-transform, opacity;
    transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
 .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -ms-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
}

JavaScript

////////isotope//////////

// cache container
var $container = $('#container');
// initialize isotope
$(window).load(function () {
    $container.isotope({
        // options...
        animationOptions: {
            duration: 1000,
            easing: 'linear',
            queue: false
        }
    });

    // filter items when filter link is clicked
    $('#filters a').on("click", function () {
        var selector = $(this).attr('data-filter');
        $('#container').isotope({
            filter: selector
        }, function () {
            if (selector == "*") {
                $(".fancybox").attr("data-fancybox-group", "gallery");
            } else {
                $(selector).find(".fancybox").attr("data-fancybox-group", selector);
            }
        });
        return false;
    });
});





////////fancybox//////////

$(document).ready(function () {
    $(".fancybox")
        .attr('rel', 'gallery')
        .fancybox({
        padding: 1,
        margin: [20, 20, 50, 20],
        autoResize: true,
        autoWidth: true,
        fitToView: true,
        nextEffect: 'fade',
        prevEffect: 'fade'


    });
});