Slimbox wont load images after running quicksand plugin
I have read numerous messages on here and elsewhere on the net suggesting
that after Quicksand.js has filtered my images you need to recall
Slimbox.js for it to work again using a callback function. Please excuse
my ignorance but I dont know how to implement the code that is suggested
or which JS file I need to put it into
My HTML with the images on it works fine with slimbox until you select a
category to sort the images into with quicksand, then slimbox quits.
There is also a portfolio.js file that works in conjunction with the
quicksand file and loads prettyphoto after quicksand.js has been run on
the page, but I want to use Slimbox as it is much more configurable.
Here is the code of the portfolio.js file:.....
/* ================ START ================ */
$(document).ready(function(){
/* ================ PRETTY PHOTO ================ */
if(jQuery().prettyPhoto) {
piPrettyphoto();
}
function piPrettyphoto(){
$("a[data-gal^='prettyPhoto']").prettyPhoto({social_tools: false});
}
/* ================ PORTFOLIO QUICKSAND FILTER ================ */
(function(){
// get and assign the holder element to the
// $holder varible for use later
var $holder = $('ul#filter-item');
// clone all items within the pre-assigned $holder element
var $data = $holder.clone();
// portfolio single filter
$('#quicksand-filter li a').click(function() {
var $filteredData;
// reset the active class on all the buttons
$('#quicksand-filter li').removeClass('active');
// assign the class of the clicked filter option
// element to our $filterType variable
var $filterType = $(this).attr('class');
// IE7 fix - Selectivizr brakes quicksand animation
$filterType = $filterType.replace(/slvzr-hover|slvzr-focus/gi, '');
$filterType = $filterType.replace(/^\s+|\s+/g, '');
$(this).parent().addClass('active');
if ($filterType === 'all') {
// assign all li items to the $filteredData var when
// the 'All' filter option is clicked
$filteredData = $data.children('li').not('li[class="clearfix"]');
}
else {
// find all li elements that have our required $filterType
// values for the data-type element
$filteredData = $data.find('li[data-alpha*=' + $filterType +
']');
}
// call quicksand and assign transition parameters
$holder.quicksand($filteredData, {
duration: 800,
easing: 'swing'
},function() {
// reload other plugins
piPrettyphoto();
});
return false;
});
})(); });
I noticed that it has a callback function for prettyphoto near the end,
which is presumably why it works after the quicksand plugin runs. How can
I modify this file to callback slimbox.js to do the same. The HTML code
was from an old template I had, but the author is no longer around and I
desperately need to get this to work. Any help would be greatly
appreciated.
No comments:
Post a Comment