Template:BGIC-Union/gallery-javascript

$(window).load(function() {

// page resize response $(window).resize(function() { resizeDelay(function(){

 $('#filterOptionsGallery li.active a').trigger('click');

}, 200); });

 var QSandAnimationStart = true;
 // get the action filter option item on page load
 var $filterType = $('#filterOptionsGallery li.active a').attr('class');

 // get and assign the ourHolder element to the

// $holder varible for use later

 var $holder = $('ul.ourHolderGallery');
 

 $holder.find('li').each(function(){
 	var hImg = $(this).find('img');
 	$(this).css('width', hImg.width());
 	$(this).css('height', hImg.height());
 });
 // clone all items within the pre-assigned $holder element
 var $data = $holder.clone();
 
 $holder.masonry({

itemSelector : '.item', columnWidth : 242 });

$("img.lazy").lazyload({ effect : "fadeIn" });

 var $currentImage;
 // attempt to call Quicksand when a filter option

// item is clicked $('#filterOptionsGallery li a').click(function(e) { e.preventDefault();

// reset the active class on all the buttons $('#filterOptionsGallery li').removeClass('active');

// assign the class of the clicked filter option // element to our $filterType variable var $filterType = $(this).attr('class'); $(this).parent().addClass('active');

if ($filterType == 'all') { // assign all li items to the $filteredData var when // the 'All' filter option is clicked var $filteredData = $data.find('li'); } else { // find all li elements that have our required $filterType // values for the data-type element var $filteredData = $data.find('li[data-type~=' + $filterType + ']');

}

$('body').append('

');

var $filterMasonary = $('#filterMasonary'); $filteredData.each(function(){ $filterMasonary.append($(this).clone()); });

$filterMasonary.masonry({ itemSelector : '.item', columnWidth : 242 }); $filterMasonary = $('#filterMasonary').clone(); $('#filteredDataHolder').remove(); $holder.animate({height : $filterMasonary.height()}, 400); $data.find('li').each(function(){

$replacement = $filterMasonary.find('li[data-id~=' + $(this).attr('data-id') + ']'); $replacement.hide(); $moving = $holder.find('li[data-id~=' + $(this).attr('data-id') + ']');

// dont lazyload loaded images if($moving.html() != null) { if ($moving.find('img').attr('src') == $moving.find('img').attr('data-original')) { $moving.find('img').removeClass('lazy'); $(this).find('img').attr('src', $moving.find('img').attr('src')).removeClass('lazy'); } }

// rearange images if($replacement.html() != null && $moving.html() != null) { $moving.animate({top: $replacement.css('top'), left: $replacement.css('left')}, 600); $replacement.addClass('dontFadeIn'); } else if ($replacement.html() != null) { $holder.append($replacement); $holder.find('li[data-id~=' + $(this).attr('data-id') + ']:first').fadeIn(1000).find('img.lazy').lazyload({effect: 'fadeIn'}); $holder.find('li[data-id~=' + $(this).attr('data-id') + ']:first').conRolloverWithCheck(true); } else { $moving.fadeOut(1000).delay(1000).remove(); } }); $holder.find('li:first').promise().done(function(){ $holder.find('img.lazy').lazyload(); connectImage(); });

}); });