Top

shop_thumbnails_pro_Isotope

Isotope Visual Layouts – jQuery toggleClass

Isotope Visual Layouts Pro plugin introduces a click to enlarge feature for box items that are part of the grid layout. This uses a cool jQuery element that changes the CSS class and refreshes the layout of the page.

Checkout the demo and click on each box / image.

It took me a bit to learn how to do this – only cause I’m not a frontend developer. But if you’d like to add toggleClass to your Isotope WordPress project, then you might like this.

 

Here is the code for toggleClass which needs to be part of the Isotope jQuery script.

// Change size of clicked element 
container.delegate( 'li.box', 'click', function(){ $j(this).toggleClass('span3').toggleClass('span5'); 
container.isotope('reLayout'); });

The most interesting thing here is that you can link multiple toggleClass – kind of like adding one class and removing the other class

 

 

 

toggleClass is a feature of the Isotope Visual Layouts Pro plugin — you can get order it online from my e-shop

 

, , ,

No comments yet.

Leave a Reply

Read previous post:
Why I use WordPress?

Why use WordPress and Compare WordPress features sound like pretty SEO friendly keywords. Right? And if you're new to WordPress,...

Close