[rz] Masonry Filter *** UPD 2015-Aug-17 ***

In this section you can announce self-made paid extensions.
*** THIS SECTION CONTAINS PAID EXTENSIONS ONLY ***
User avatar
[RZ]
 
 
Posts: 2135
Joined: Tue Nov 04, 2008 12:08 pm

[rz] Masonry Filter *** UPD 2015-Aug-17 ***

Post by [RZ] » Thu May 16, 2013 7:58 am

[rz] Masonry Filter v1.0.0.2

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

DEMO

HTML 4.01 Transitional
W3C compliant


* 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... (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();

Enjoy!
Last edited by [RZ] on Mon Aug 17, 2015 1:02 pm, edited 2 times in total.

User avatar
zinc
 
 
Posts: 1511
Joined: Sat Dec 08, 2007 3:06 pm
Location: London, United Kingdom

Re: Masonry Filter

Post by zinc » Thu May 16, 2013 8:48 am

A very welcome addition RZ!!!! :)

User avatar
[RZ]
 
 
Posts: 2135
Joined: Tue Nov 04, 2008 12:08 pm

Re: Masonry Filter

Post by [RZ] » Thu May 16, 2013 9:18 am

thank you for your feedback!

User avatar
stamjoe
 
 
Posts: 246
Joined: Sat Feb 09, 2008 10:32 am
Location: GREECE

Re: Masonry Filter

Post by stamjoe » Thu May 16, 2013 11:15 am

Thanks RZ!!!
Its very usefull.
Joe

User avatar
[RZ]
 
 
Posts: 2135
Joined: Tue Nov 04, 2008 12:08 pm

Re: Masonry Filter

Post by [RZ] » Thu May 16, 2013 11:20 am

thanks for your feedback!

googledat
 
 
Posts: 26
Joined: Sun Sep 18, 2011 11:40 pm
Location: Arizona
Contact:

Re: Masonry Filter

Post by googledat » Fri May 24, 2013 8:32 pm

Hi RZ,

The masonry extension and filter are nice for making responsive websites. However, I'm puzzled to see so few using them because responsive web design is HUGE and soon most professional websites will be built this way. Is there a gallery with sites built like this in WWB? If not I suggest creating one.

Thanks,
Steve

User avatar
[RZ]
 
 
Posts: 2135
Joined: Tue Nov 04, 2008 12:08 pm

Re: Masonry Filter

Post by [RZ] » Sat May 25, 2013 6:47 pm

thanks for your feedback
(i don't know about this type of gallery)

naftalina
 
 
Posts: 276
Joined: Sun Jun 16, 2013 6:36 am
Location: Croatia
Contact:

Re: Masonry Filter

Post by naftalina » Wed Mar 18, 2015 7:32 am

I do not have enough knowledge to do what it says in the manual.
Would I be able to get a demo project or if someone who is already using this extensions can help me to complete the page that I started?

My project is here: https://www.dropbox.com/s/pjlzytslnwqad ... y.zip?dl=0

User avatar
[RZ]
 
 
Posts: 2135
Joined: Tue Nov 04, 2008 12:08 pm

Re: Masonry Filter

Post by [RZ] » Wed Mar 18, 2015 10:59 am

please refer to the wb masonry documentation and/or sample files
the [rz] Masonry Filter is an add-on for the wb masonry extension
first you must know how to configure it and lastly this extension

naftalina
 
 
Posts: 276
Joined: Sun Jun 16, 2013 6:36 am
Location: Croatia
Contact:

Re: Masonry Filter

Post by naftalina » Wed Mar 18, 2015 12:06 pm

So, I need WB Masonry extension?
I didn't know for that extension.
All this things are new to me.

Where I can find that extension?
I'm looking in extension manager but I can't find. :/

User avatar
[RZ]
 
 
Posts: 2135
Joined: Tue Nov 04, 2008 12:08 pm

Re: Masonry Filter

Post by [RZ] » Wed Mar 18, 2015 12:09 pm

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

naftalina
 
 
Posts: 276
Joined: Sun Jun 16, 2013 6:36 am
Location: Croatia
Contact:

Re: Masonry Filter

Post by naftalina » Wed Mar 18, 2015 12:12 pm

[RZ] wrote:from the first post:
This extension -for the WB's Masonry object- allows you to filter which layers can be shown or hidden.
Where I can find that extension?

User avatar
[RZ]
 
 
Posts: 2135
Joined: Tue Nov 04, 2008 12:08 pm

Re: Masonry Filter

Post by [RZ] » Wed Mar 18, 2015 12:15 pm

afaik it is called jquery masonry, so you should find it in the j area

naftalina
 
 
Posts: 276
Joined: Sun Jun 16, 2013 6:36 am
Location: Croatia
Contact:

Re: Masonry Filter

Post by naftalina » Wed Mar 18, 2015 12:19 pm

[RZ] wrote:afaik it is called jquery masonry, so you should find it in the j area
Yes! Thanks [rz]. Sorry fom missunderstanding. I don't know nothing about programing and my english is not so good, so manny times I miss things.

User avatar
[RZ]
 
 
Posts: 2135
Joined: Tue Nov 04, 2008 12:08 pm

Re: Masonry Filter

Post by [RZ] » Wed Mar 18, 2015 12:20 pm

:)

Post Reply

Who is online

Users browsing this forum: No registered users and 0 guests