Tuesday, 17 September 2013

combine 2 Isotope scripts for swipebox effect

combine 2 Isotope scripts for swipebox effect

I'm using a isotope script to filter images but it doesn't support the
swipe control. Now I have found a isotope script that does suppot swipe
effect. (http://brutaldesign.github.io/swipebox/)
I try to combine my script with the script from swipebox,can you hep me to
figure this out ?
My isotope script
//select isotope menu
function selectMenuItem(indx){
for(var i=0;i<isotopeMenu.length;i++){
if(i==indx){
isotopeMenu[i].link.css('background-color',
'#'+selectedBackColor);
filterIsotopeItems(indx);
}else{
isotopeMenu[i].link.css('background', 'none');
}
}
}
function filterIsotopeItems(index){
var selector = "."+isotopeMenu[index].categoryID;
(selector==".*")?selector="*":null;
rx_gallery_ui.find('.isotopeContainer').isotope({
layoutMode : 'masonry',
filter: selector,
});
}
}
the swipebox script
// Use the swipebox only for visible elements
var swipeboxInstance = $(".swipebox-isotope:not(.isotope-hidden
.swipebox-` isotope)").swipebox();
// Callback function that fire the refresh method, once the animation is
finished
onAnimationCompleted = function(){
swipeboxInstance.refresh();
};
// Isotope stuff
optionFilterLinks = $('#filter').find('a');
optionFilterLinks.attr('href', '#');
optionFilterLinks.click( function(){
var selector = $(this).attr('data-filter');
$('#grid').isotope({
filter : '.' + selector,
itemSelector : '.item',
layoutMode : 'fitRows',
animationEngine : 'best-available',
}, onAnimationCompleted); // callback here
optionFilterLinks.removeClass('active');
$(this).addClass('active');
return false;
});

No comments:

Post a Comment