Re: Masonry Filter
Posted: Thu Mar 19, 2015 5:47 pm
instead of complaint about the file format, why you dont tell me which part is unclear for you from the following simple steps?
(from the info file)
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... (without the single quotes.)
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();
(from the info file)
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... (without the single quotes.)
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();