Nice jQuery filter images effect

Features:
  • shows specified collection on startup
  • three types of animation
  • callback functions
Changelog:

 

25.1.2011 – shows specified collection on startup, plugin parameter names have been changed

$('.selecter').mobilyselect({
collection: 'all', // shows specified collection on startup
animation: 'absolute', // type of animation, available options: plain, fade, absolute
duration: 500, // duration of animation
listClass: 'selecterContent', // main container
btnsClass: 'selecterBtns',
btnActiveClass: 'active', // add class name to the button
elements: 'li',
onChange: function(){}, // call the function when collection changes
onComplete: function(){} // call the function when animation is completed
});

HTML:

  • ..
  • ..

 

Note that ‘rel’ attribute need to be the same as ‘class’ name! (classes: poster, card are only examples)

CSS:

.selecterContent {
width:960px;
min-height:; /* you need to specify minimum height value */
float:left;
clear:both;
}

.selecterContent li {
width:140px; /* you need to specify width and height values of the element */
height:120px;
overflow:hidden;
}

ul.nolist,
ul.nolist li {
display:block;
list-style:none;
padding:0;
margin:0;
}

ul.nolist li {
float:left;
}

Download: http://www.htmldrive.net/items/download/829

Be Sociable, Share!

Leave a comment