<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>
我有以下代码，根据我点击的类别过滤我的画廊...但我想不淡出其他图片我只是想改变它们的不透明度我试图替换fade out()功能使用fade to()功能，但它不起作用所以任何人都可以帮助我
$(".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
答案 0 :(得分：1)
您使用fadeTo走在正确的轨道上，但最后使用fadeIn假设这些项目之前已fadeOut。因此，我们使用fadeTo将我们想要的项目设置回完全不透明度。
代码段的代码是从demo page here修改的。
更新：我假设您希望它们同时发生，而不是使用过滤器函数链接淡出和淡入淡出。所以我修改了过滤器选择代码。
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-->