<script type="text/javascript">
jQuery(function ($) {
// filter selector
$(".filter").on("click", function () {
var $this = $(this);
// if we click the active tab, do nothing
if ( !$this.hasClass("active") ) {
$(".filter").removeClass("active");
$this.addClass("active"); // set the active tab
// get the data-rel value from selected tab and set as filter
var $filter = $this.data("rel");
// if we select view all, return to initial settings and show all
if ($filter == 'all') { // if we select "view all", return to initial settings and show all
$(".fancybox")
.attr("data-fancybox-filter", "gallery")
.fadeTo("fast", 1); // otherwise
} else {
$('.fancybox[data-filter="'+$filter+'"]') // select all items with the current filter
.attr("data-fancybox-filter", $filter) // set the data-fancybox-group
.fadeTo("fast", 1); // make them go "solid"
$('.fancybox[data-filter!="'+$filter+'"]') // select all items not in the current filter
.fadeTo("slow", 0.5); // fade them out partially
} // filter if
} // active if
}); // on
// fancybox
$(".fancybox").fancybox({
modal: false, // enable regular nav and close buttons
// add buttons helper (requires buttons helper js and css files)
padding:0,
helpers: {
thumbs : {
width : 50,
height : 50,
},
}
});
}); // ready
</script><html>
<head>
<meta charset="utf-8">
<title>Qyas Engineering Consultancy</title>
</head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Qyas Engineering Consultancy</title>
<!-- Bootstrap stylesheet -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- sheet style -->
<link href="css/styles.css" rel="stylesheet" type="text/css">
<!-- include jquery -->
<script src="js/jquery.js"></script>
<!-- javscript jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- fancybox -->
<!-- fancybox jquery -->
<script src="js/fancybox/lib/jquery-1.10.2.min.js"></script>
<!-- jquery easing -->
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<!-- fancybox stylesheet -->
<link rel="stylesheet" href="js/Fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<!-- fancybox javascript -->
<script type="text/javascript" src="js/Fancybox/source/jquery.fancybox.pack.js"></script>
<!-- fancybox buttons stylesheet -->
<link rel="stylesheet" href="js/fancybox/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
<!-- fancybox buttons javascript -->
<script type="text/javascript" src="js/fancybox/source/helpers/jquery.fancybox-buttons.js"></script>
<!-- fancybox media javascript -->
<script type="text/javascript" src="js/fancybox/source/helpers/jquery.fancybox-media.js"></script>
<!-- fancybox media stylesheet -->
<link rel="stylesheet" href="js/fancybox/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
<!-- fancybox thumbs javascript -->
<script type="text/javascript" src="js/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container" id="project">
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="defaultNavbar1">
<a href="index.html"><img src="images/Office Logo.jpg" width="45" height="90" alt="" /></a>
<a href="index.html"></a>
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">Home</a></li>
<li><a href="about_us.html">About Us</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="careers.html">Careers</a></li>
<li></li>
<li><a href="contact_us.html">Contact Us</a></li>
</ul>
</div>
<a href="index.html"></a>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div id="galleryTab">
<a data-rel="all" href="javascript:;" class="filter active">All Projects</a>
<a data-rel="vil" href="javascript:;" class="filter">Villas</a>
<a data-rel="res" href="javascript:;" class="filter">Residential and Commercial</a>
<a data-rel="mix" href="javascript:;" class="filter">Mixed Used</a>
<a data-rel="port" href="javascript:;" class="filter">Previous Projects</a>
</div>
<div class="container">
<div id="galleryWrap" class="cf">
<!--First Row Start -->
<div class="row" style="height: 460px;">
<div class="col-md-3" style="height: 460px; margin-left: 0px; margin-right: 5px;">
<!-- P17 Mixed Use (Previous Projects) -->
<a title="P17 Mixed Use-Dubai" class="fancybox" data-tags="Previous Projects" data-filter="port" rel="port5" href="images/Projects/P17 Mixed Use/p17 1.jpg"><img src="images/Projects/Thumbnails/p17 1s.jpg" alt="p17" width="240" height="450" class="img-responsive" border="0" style="float: left; margin-right: 10px; margin-left: 1px; display: block"></a>
<div class="hidden">
<a class="fancybox" data-filter="port" rel="port5" href="images/Projects/P17 Mixed Use/p17 2.jpg"><img src="images/Projects/P17 Mixed Use/p17 2.jpg" alt="p17"></a>
<a class="fancybox" data-filter="port" rel="port5" href="images/Projects/P17 Mixed Use/p17 3.jpg"><img src="images/Projects/P17 Mixed Use/p17 3.jpg" alt="p17"></a>
</div>
</div>
<div class="col-md-4" style="margin-left: -32px">
<div class="row" style="height: 225px;">
<!-- Omran villa -->
<a title="Mr.Omran Villa (G+1+R)" class="fancybox" data-filter="vil" rel="villa1" href="images/Projects/1.jpg"><img src="images/Projects/Thumbnails/1s.jpg" alt="omran" width="350" height="220" style="float: left; margin-left: 5px; margin-right: 5px; display: block"></a>
<div class="hidden">
<a class="fancybox" data-tags="Villas" data-filter="vil" rel="villa1" href="images/Projects/1h.jpg"><img src="images/Projects/1h.jpg" alt="omran"></a>
<a class="fancybox" data-tags="Villas" data-filter="vil" rel="villa1" href="images/Projects/12h.jpg"><img src="images/Projects/12h.jpg" alt="omran"></a>
</div>
</div>
<!-- Saif villa -->
<div class="row" style="height: 225px;">
<a title="Mr.saif Villa (G+1+R)" data-tags="Villas" class="fancybox" data-filter="vil" rel="villa2" href="images/Projects/2.jpg"><img src="images/Projects/Thumbnails/2s.jpg" alt="saif" width="350" height="220" class="img-responsive" style="float: left; margin-left: 5px; margin-right: 5px; margin-top:5px; display: block"></a>
<div class="hidden">
<a class="fancybox" data-tags="Villas" data-filter="vil" rel="villa2" href="images/Projects/21h.jpg"><img src="images/Projects/21h.jpg" alt="saif"></a>
<a class="fancybox" data-tags="Villas" data-filter="vil" rel="villa2" href="images/Projects/22h.jpg"><img src="images/Projects/22h.jpg" alt="saif"></a>
</div>
</div>
</div>
<!-- Yonge st. (Previous Projects) -->
<div class="col-md-4" style="height: 460px; margin-left: -40px; margin-right: 0px;">
<a title="625 Yonge st.-Toronto" class="fancybox" data-tags="Previous Projects" data-filter="port" rel="port2" href="images/Projects/yonge/yonge 1.jpg"><img src="images/Projects/Thumbnails/yonge 1s.jpg" alt="yonge" width="240" height="450" class="img-responsive" border="0" style="float: left; margin-left: 5px; margin-right: 0px; display: block"></a>
<div class="hidden">
<a class="fancybox" data-filter="port" rel="port2" href="images/Projects/yonge/yong 2.jpg"><img src="images/Projects/yonge/yong 2.jpg" alt="yonge"></a>
<a class="fancybox" data-filter="port" rel="port2" href="images/Projects/yonge/yonge 3.jpg"><img src="images/Projects/yonge/yonge 3.jpg" alt="yonge"></a>
</div>
</div>
</div>
<!--Second Row Start -->
<div class="row" style="height: 460px; margin-top: 5px;">
<div class="col-lg-4">
<div class="row" style="height: 225px;">
<!-- Split Tower (Previous Projects) -->
<a title="Split Tower-Dubai" class="fancybox" data-tags="Previous Projects" data-filter="port" rel="port3" href="images/Projects/SplitTower/split 1.jpg"><img src="images/Projects/Thumbnails/split 1s.jpg" alt="split" width="350" height="220" class="img-responsive" border="0" style="float: left; display: block"></a>
<div class="hidden">
<a class="fancybox" data-filter="port" rel="port3" href="images/Projects/SplitTower/split 2.jpg"><img src="images/Projects/SplitTower/split 2.jpg" alt="split"></a>
<a class="fancybox" data-filter="port" rel="port3" href="images/Projects/SplitTower/split 3.jpg"><img src="images/Projects/SplitTower/split 3.jpg" alt="split"></a>
</div>
</div>
<div class="row" style="height: 225px;">
<!-- Hilton Resort Rak (Previous Projects) -->
<a title="Hilton Resort - RAK" class="fancybox" data-tags="Previous Projects" data-filter="port" rel="port4" href="images/Projects/RAK/rak 1.jpg"><img src="images/Projects/Thumbnails/rak 1s.jpg" alt="split" width="350" height="220" class="img-responsive" border="0" style="float: left; margin-top: 5px; display: block"></a>
<div class="hidden">
<a class="fancybox" data-filter="port" rel="port4" href="images/Projects/RAK/rak 2.jpg"><img src="images/Projects/RAK/rak 2.jpg" alt="split"></a>
<a class="fancybox" data-filter="port" rel="port4" href="images/Projects/RAK/rak 3.jpg"><img src="images/Projects/RAK/rak 3.jpg" alt="split"></a>
</div>
</div>
</div>
<div class="col-lg-4" style="margin-left: -25px;">
<!-- Ajman Tower (Buildings) -->
<a title="Ajman Tower (G+8Podium+26 Typical+R)" class="fancybox" data-tags="Residential and Commercial" data-filter="res" rel="bldg1" href="images/Projects/4.jpg"><img src="images/Projects/Thumbnails/4s.jpg" alt="ajman" width="240" height="450" class="img-responsive" border="0" style="float: left; margin-left: 0px; display: block"></a>
<div class="hidden">
<a class="fancybox" data-filter="res" rel="bldg1" href="images/Projects/41h.jpg"><img src="images/Projects/41h.jpg" alt="ajman"></a>
<a class="fancybox" data-filter="res" rel="bldg1" href="images/Projects/42h.jpg"><img src="images/Projects/42h.jpg" alt="ajman"></a>
</div>
</div>
<!-- Cumberland (Previous Projects) -->
<a title="8 Cumberland-Toronto" class="fancybox" data-tags="Previous Projects" data-filter="port" rel="port1" href="images/Projects/Cumberland/cumber 1.jpg"><img src="images/Projects/Thumbnails/cumberland 1s.jpg" alt="cumber" width="240" height="450" class="img-responsive" border="0" style="float: left; margin-left: -120px; display: block "></a>
<div class="hidden">
<a class="fancybox" data-filter="port" rel="port1" href="images/Projects/Cumberland/cmber 2.jpg"><img src="images/Projects/Cumberland/cmber 2.jpg" alt="cumber"></a>
<a class="fancybox" data-filter="port" rel="port1" href="images/Projects/Cumberland/cumber 3.jpg"><img src="images/Projects/Cumberland/cumber 3.jpg" alt="cumber"></a>
</div>
</div>
</div>
<!--Third Row Start -->
<div class="row" style="height: 460px; margin-top: 5px;">
<div class="col-lg-4">
<!-- Seef Tower (Previous Projects) -->
<a title="Seef Tower - Manama" class="fancybox" data-tags="Previous Projects" data-filter="port" rel="port6" href="images/Projects/Seef Tower/seef 1.jpg"><img src="images/Projects/Thumbnails/seef 1s.jpg" alt="seef" width="240" height="450" class="img-responsive" border="0" style="float: left; margin-left: 0px; display: block "></a>
<div class="hidden">
<a class="fancybox" data-filter="port" rel="port6" href="images/Projects/Seef Tower/seef 2.jpg"><img src="images/Projects/Seef Tower/seef 2.jpg" alt="seef"></a>
</div>
</div>
<div class="col-lg-4">
<!-- Seef Tower (Previous Projects) -->
<a title="Golden Falcon - Abu Dhabi" class="fancybox" data-tags="Previous Projects" data-filter="port" rel="port7" href="images/Projects/Golden Tower/golden 1.jpg"><img src="images/Projects/Thumbnails/golden 1s.jpg" alt="golden" width="240" height="450" class="img-responsive" border="0" style="float: left; margin-left: -135px; display: block "></a>
</div>
<div class="col-lg-4">
<div class="row" style="height: 225px;margin-left: -150px">
<!-- Hydra Square (Previous Projects) -->
<a title="Hydra Square - Abu Dhabi" class="fancybox" data-tags="Previous Projects" data-filter="port" rel="port8" href="images/Projects/Hydra/hydra 1.jpg"><img src="images/Projects/Thumbnails/hydra 1s.jpg" alt="hydra" width="350" height="220" class="img-responsive" border="0" style="float: left; margin-left: -120px; display: block "></a>
<div class="hidden">
<a class="fancybox" data-filter="port" rel="port8" href="images/Projects/Hydra/hydra 2.jpg"><img src="images/Projects/Hydra/hydra 2.jpg" alt="hydra"></a>
<a class="fancybox" data-filter="port" rel="port8" href="images/Projects/Hydra/hydra 3.jpg"><img src="images/Projects/Hydra/hydra 3.jpg" alt="hydra"></a>
</div>
</div>
<div class="row" style="height: 225px;">
<!-- Keneth Shepard (Previous Projects) -->
<a title="Shepard and Keneth - Toronto" class="fancybox" data-tags="Previous Projects" data-filter="port" rel="port9" href="images/Projects/Keneth/keneth 1.jpg"><img src="images/Projects/Thumbnails/keneth 1s.jpg" alt="keneth" width="350" height="220" class="img-responsive" border="0" style="float: left; margin-left: -255px;margin-top: 5px; display: block "></a>
<div class="hidden">
<a class="fancybox" data-filter="port" rel="port9" href="images/Projects/Keneth/keneth 2.jpg"><img src="images/Projects/Keneth/keneth 2.jpg" alt="keneth"></a>
<a class="fancybox" data-filter="port" rel="port9" href="images/Projects/Keneth/keneth 3.jpg"><img src="images/Projects/Keneth/keneth 3.jpg" alt="keneth"></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<footer id="footeri">©2017 QYAS Engineering Consultancy - All Rights Reserved. </footer>
</div>i have the below code where it filter my gallery according to category i click on... but i want not to fade out the other pictures i just want to change opacity of them i tried to replace fade out() function with fade to() function but it didn't work so can anyone help me with that
$(".filter").on("click", function () {
var $this = $(this);
// if we click the active tab, do nothing
if ( !$this.hasClass("active") ) {
$(".filter").removeClass("active");
$this.addClass("active"); // set the active tab
// get the data-rel value from selected tab and set as filter
var $filter = $this.data("rel");
// if we select view all, return to initial settings and show all
$filter == 'all' ?
$(".fancybox")
.attr("data-fancybox-filter", "gallery")
.not(":visible")
.fadeIn()
: // otherwise
$(".fancybox")
.fadeTo("slow", 0.4)
.filter(function () {
// set data-filter value as the data-rel value of selected tab
return $(this).data("filter") == $filter;
})
// set data-fancybox-group and show filtered elements
.attr("data-fancybox-filter", $filter)
.fadeIn(1000);
} // if
}); // on
}); // ready
You were on the right track with fadeTo, but the use of fadeIn at the end assumes the items had been previously fadeOuted. So instead, we use fadeTo to set the items we want back to full opacity.
The code for the snippet is modified from the demo page here.
Update: Rather than chaining the fade out and the fade in with a filter function, i assume you would prefer them to happen concurrently. So I have modified the filter select code.
jQuery(function($) {
$(".fancybox").fancybox({
modal: true,
helpers: {
buttons: {}
}
});
$(".filter").on("click", function() {
var $this = $(this);
// if we click the active tab, do nothing
if (!$this.hasClass("active")) {
$(".filter").removeClass("active");
$this.addClass("active"); // set the active tab
var $filter = $this.data("rel"); // get the data-rel value from selected tab and set as filter
if ($filter == 'all') { // if we select "view all", return to initial settings and show all
$(".fancybox")
.attr("data-fancybox-group", "gallery")
.fadeTo("fast", 1); // otherwise
} else {
$('.fancybox[data-filter="'+$filter+'"]') // select all items with the current filter
.attr("data-fancybox-group", $filter) // set the data-fancybox-group
.fadeTo("fast", 1); // make them go "solid"
$('.fancybox[data-filter!="'+$filter+'"]') // select all items not in the current filter
.fadeTo("slow", 0.2); // fade them out partially
} // filter if
} // active if
}); // on
}); // ready.imgContainer {
width: 100px;
height: 100px;
overflow: hidden;
text-align: center;
margin: 10px 20px 10px 0;
float: left;
border: solid 1px #999;
display: block;
}
.imgContainer:hover {
border-bottom: solid 1px #444;
border-left: solid 1px #444;
-webkit-box-shadow: -3px 3px 10px 1px #777;
-moz-box-shadow: -3px 3px 10px 1px #777;
box-shadow: -3px 3px 10px 1px #777;
margin: 9px 19px 11px 1px;
}
#galleryTab {
margin: 10px 5px 20px 0;
top: 26px;
width: 450px;
}
.galleryWrap {
padding: 0 0 30px;
}
.filter {
border: 1px solid #ccc;
color: #333333;
float: left;
font-size: 12px;
margin: 0 12px 0 0;
padding: 5px 15px;
text-align: center;
text-decoration: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.filter:hover {
background-color: #f8f8f8;
-webkit-box-shadow: -2px 2px 5px 1px #a3a3a3;
-moz-box-shadow: -2px 2px 5px 1px #a3a3a3;
box-shadow: -2px 2px 5px 1px #a3a3a3;
margin: -1px 11px 1px 1px;
border-bottom: solid 1px #aaa;
border-left: solid 1px #aaa;
}
.filter.active {
background-color: #e2e2e2;
border: 1px solid #ccc;
color: #000;
cursor: default;
margin: 0 12px 0 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}<link href="http://picssel.com/demos/demos.css" rel="stylesheet" />
<link href="http://picssel.com/scripts/fancybox2.1.5/jquery.fancybox.css" rel="stylesheet" />
<link href="http://picssel.com/scripts/fancybox2.1.5/helpers/jquery.fancybox-buttons.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://www.picssel.com/scripts/fancybox2.1.5/jquery.fancybox.pack.js"></script>
<script src="http://www.picssel.com/scripts/fancybox2.1.5/helpers/jquery.fancybox-buttons.js"></script>
<div id="wrap" class="cf">
<h2>Create a filtered image gallery (Isotope style) with Fancybox and jQuery [DEMO]</h2>
<div id="galleryTab" class="cf">
<a data-rel="all" href="javascript:;" class="filter active">View all</a>
<a data-rel="anim" href="javascript:;" class="filter">Animals</a>
<a data-rel="land" href="javascript:;" class="filter">Landscapes</a>
<a data-rel="arch" href="javascript:;" class="filter">Architecture</a>
</div>
<div class="galleryWrap cf">
<a class='fancybox imgContainer' href='http://www.picssel.com/demos/gallery/architecture/lorenteJerome_barcelona.jpg' data-fancybox-group='gallery' data-filter='arch'><img src='http://www.picssel.com/demos/gallery/thumbs/lorenteJerome_barcelona.jpg' alt='image http://www.picssel.com/demos/gallery/thumbs/lorenteJerome_barcelona.jpg' /></a>
<a class='fancybox imgContainer' href='http://www.picssel.com/demos/gallery/landscape/sarahKlockars_aquatic.jpg' data-fancybox-group='gallery' data-filter='land'><img src='http://www.picssel.com/demos/gallery/thumbs/sarahKlockars_aquatic.jpg' alt='image http://www.picssel.com/demos/gallery/thumbs/sarahKlockars_aquatic.jpg' /></a>
<a class='fancybox imgContainer' href='http://www.picssel.com/demos/gallery/animals/johnEllingsworth_opossum.jpg' data-fancybox-group='gallery' data-filter='anim'><img src='http://www.picssel.com/demos/gallery/thumbs/johnEllingsworth_opossum.jpg' alt='image http://www.picssel.com/demos/gallery/thumbs/johnEllingsworth_opossum.jpg' /></a>
<a class='fancybox imgContainer' href='http://www.picssel.com/demos/gallery/landscape/miroslavVajdic_winter.jpg' data-fancybox-group='gallery' data-filter='land'><img src='http://www.picssel.com/demos/gallery/thumbs/miroslavVajdic_winter.jpg' alt='image http://www.picssel.com/demos/gallery/thumbs/miroslavVajdic_winter.jpg' /></a>
<a class='fancybox imgContainer' href='http://www.picssel.com/demos/gallery/architecture/erikaMlejova_malta.jpg' data-fancybox-group='gallery' data-filter='arch'><img src='http://www.picssel.com/demos/gallery/thumbs/erikaMlejova_malta.jpg' alt='image http://www.picssel.com/demos/gallery/thumbs/erikaMlejova_malta.jpg' /></a>
<a class='fancybox imgContainer' href='http://www.picssel.com/demos/gallery/architecture/antonelloMastinu_italy.jpg' data-fancybox-group='gallery' data-filter='arch'><img src='http://www.picssel.com/demos/gallery/thumbs/antonelloMastinu_italy.jpg' alt='image http://www.picssel.com/demos/gallery/thumbs/antonelloMastinu_italy.jpg' /></a>
<a class='fancybox imgContainer' href='http://www.picssel.com/demos/gallery/animals/chibi_rabbit.jpg' data-fancybox-group='gallery' data-filter='anim'><img src='http://www.picssel.com/demos/gallery/thumbs/chibi_rabbit.jpg' alt='image http://www.picssel.com/demos/gallery/thumbs/chibi_rabbit.jpg' /></a>
<a class='fancybox imgContainer' href='http://www.picssel.com/demos/gallery/landscape/vaughanBourke_skyline.jpg' data-fancybox-group='gallery' data-filter='land'><img src='http://www.picssel.com/demos/gallery/thumbs/vaughanBourke_skyline.jpg' alt='image http://www.picssel.com/demos/gallery/thumbs/vaughanBourke_skyline.jpg' /></a>
<a class='fancybox imgContainer' href='http://www.picssel.com/demos/gallery/animals/danielSteger_deers.jpg' data-fancybox-group='gallery' data-filter='anim'><img src='http://www.picssel.com/demos/gallery/thumbs/danielSteger_deers.jpg' alt='image http://www.picssel.com/demos/gallery/thumbs/danielSteger_deers.jpg' /></a>
<a class='fancybox imgContainer' href='http://www.picssel.com/demos/gallery/landscape/adrianvanLeen_cars.jpg' data-fancybox-group='gallery' data-filter='land'><img src='http://www.picssel.com/demos/gallery/thumbs/adrianvanLeen_cars.jpg' alt='image http://www.picssel.com/demos/gallery/thumbs/adrianvanLeen_cars.jpg' /></a>
<a class='fancybox imgContainer' href='http://www.picssel.com/demos/gallery/landscape/stuartMaxwell_desert.jpg' data-fancybox-group='gallery' data-filter='land'><img src='http://www.picssel.com/demos/gallery/thumbs/stuartMaxwell_desert.jpg' alt='image http://www.picssel.com/demos/gallery/thumbs/stuartMaxwell_desert.jpg' /></a>
<a class='fancybox imgContainer' href='http://www.picssel.com/demos/gallery/landscape/michaelJastremski_autum.jpg' data-fancybox-group='gallery' data-filter='land'><img src='http://www.picssel.com/demos/gallery/thumbs/michaelJastremski_autum.jpg' alt='image http://www.picssel.com/demos/gallery/thumbs/michaelJastremski_autum.jpg' /></a>
<a class='fancybox imgContainer' href='http://www.picssel.com/demos/gallery/animals/stuartMaxwell_cheeta.JPG' data-fancybox-group='gallery' data-filter='anim'><img src='http://www.picssel.com/demos/gallery/thumbs/stuartMaxwell_cheeta.JPG' alt='image http://www.picssel.com/demos/gallery/thumbs/stuartMaxwell_cheeta.JPG' /></a>
<a class='fancybox imgContainer' href='http://www.picssel.com/demos/gallery/animals/sarahKlockars_moth.jpg' data-fancybox-group='gallery' data-filter='anim'><img src='http://www.picssel.com/demos/gallery/thumbs/sarahKlockars_moth.jpg' alt='image http://www.picssel.com/demos/gallery/thumbs/sarahKlockars_moth.jpg' /></a>
<a class='fancybox imgContainer' href='http://www.picssel.com/demos/gallery/landscape/erikaMlejova_green.jpg' data-fancybox-group='gallery' data-filter='land'><img src='http://www.picssel.com/demos/gallery/thumbs/erikaMlejova_green.jpg' alt='image http://www.picssel.com/demos/gallery/thumbs/erikaMlejova_green.jpg' /></a>
<a class='fancybox imgContainer' href='http://www.picssel.com/demos/gallery/animals/marekNovotny_puppy.jpg' data-fancybox-group='gallery' data-filter='anim'><img src='http://www.picssel.com/demos/gallery/thumbs/marekNovotny_puppy.jpg' alt='image http://www.picssel.com/demos/gallery/thumbs/marekNovotny_puppy.jpg' /></a>
<a class='fancybox imgContainer' href='http://www.picssel.com/demos/gallery/architecture/michJastremski_penetentiary.jpg' data-fancybox-group='gallery' data-filter='arch'><img src='http://www.picssel.com/demos/gallery/thumbs/michJastremski_penetentiary.jpg' alt='image http://www.picssel.com/demos/gallery/thumbs/michJastremski_penetentiary.jpg' /></a>
<a class='fancybox imgContainer' href='http://www.picssel.com/demos/gallery/architecture/emmanuelSale_gotic.jpg' data-fancybox-group='gallery' data-filter='arch'><img src='http://www.picssel.com/demos/gallery/thumbs/emmanuelSale_gotic.jpg' alt='image http://www.picssel.com/demos/gallery/thumbs/emmanuelSale_gotic.jpg' /></a>
<a class='fancybox imgContainer' href='http://www.picssel.com/demos/gallery/animals/meerkat.jpg' data-fancybox-group='gallery' data-filter='anim'><img src='http://www.picssel.com/demos/gallery/thumbs/meerkat.jpg' alt='image http://www.picssel.com/demos/gallery/thumbs/meerkat.jpg' /></a>
<a class='fancybox imgContainer' href='http://www.picssel.com/demos/gallery/architecture/lorenteJerome_barcelona2.jpg' data-fancybox-group='gallery' data-filter='arch'><img src='http://www.picssel.com/demos/gallery/thumbs/lorenteJerome_barcelona2.jpg' alt='image http://www.picssel.com/demos/gallery/thumbs/lorenteJerome_barcelona2.jpg' /></a>
<a class='fancybox imgContainer' href='http://www.picssel.com/demos/gallery/animals/derekKeats_zimbabwe.jpg' data-fancybox-group='gallery' data-filter='anim'><img src='http://www.picssel.com/demos/gallery/thumbs/derekKeats_zimbabwe.jpg' alt='image http://www.picssel.com/demos/gallery/thumbs/derekKeats_zimbabwe.jpg' /></a>
<br />
</div>
</div>
<!--wrap-->