magna
Follow @magnawebstudio on Twitter Follow @magnawebstudio on Twitter
Follow /magnawebstudio on LinkedIn Follow /magnawebstudio on LinkedIn
awarded site
BS"D
magna web studio
Contact us! Contact us!
WB-Developers' Corner
WB-Developers' Corner
       [rz] Masonry Filter


This extension -for the WB's Masonry object- allows you to filter which layers can be shown or hidden.


HTML 4.01 Transitional
W3C compliant


DEMO


* Just a brief about some of the changes that were made lately...

* New in version 1.0.0.2:

- Fixed an inherited bug handling layers with borders.

* New in version 1.0.0.1:

- Optimized code.


How to use?

First things first: please read in full the masonry's documentation so as you can know how it works, also please take a look at the available samples.

  1. Design your page according to the masonry scheme.
  2. As you added class="item" ('item' or the class/selector name you want), add the 'filter name' you
      want, i.e. 'music' and as many as you need for each element; so, you will have something like that:
     
class="item media image" and in other element can be 'class="item media music" or
     
class="item media video" or class="item media image color", etc...
  3. Add the masonry object and specify your desired .selector and #container.
  4. Add the [rz] Masonry Filter extension and set-up the same #container and .selector as in the
      masonry wb's object, this way both extensions will be "shake their hands".
  5. Add texts, shapes or any other object that accepts events, they will act as "filter buttons".
  6. For each "filter button" -the object that accepts events-, open its properties dialog.
  7. Go to the Events tab.
  8. Click on "add..." button.
  9. In the Add event dialog, select:
  
   Event -> onclick
      Action -> Javascript Function
      Javascript -> MyMasonryFilter('filterstring')
10. Click on the OK button (twice) until the object's dialog is closed.
11. Remember to go to the step #6 until all of your links/events are defined.

Just replace
MyMasonryFilter by the actual object (extension) id; the same for the quoted filterstring, enter the actual filter criterium such as 'video', 'image', etc. The function call may be: filter('image');
If you don't specify any filter, all of the objects will be shown. The function may be:
filter();

Enjoy!
w3c compliant
© 2012-17 by MAGNA web studio • all rights reserved


new shop with