Streaming live at 10am (PST)

Need help creating a portfolio gallery area with sorting function


#1

Hi,

I want to create an area similar to this https://mixitup.kunkalabs.com . The photos won't be too many.

I saw some similar topics about this but I am not good at coding. If you know how to add the Mixitup plugin (or eventually another plugin, if you know a better one) to the Webflow editor please let me know and if you can give me some basic steps on how to do it, that would be great! Any help would be appreciated. Thank you!

Meanwhile I will continue to make it work however I am not sure I will have any success.


Image Gallery...?
#2

At the moment adding custom code is the only way to add this kind of sorting functionality. Here's a topic that has a basic tutorial:


#3

Hi thesergie,

Thank you for your reply. I spend some time trying to make it work however I had no success.. I don't know what is the right way to add the custom code I think.. Here is what I have done: I created a container and the target elements by adding in webflow a container element with the class "container" and some div elements inside it with the classes "mix category-1", "mix category-2", "mix category-3" and these attributes data-myorder="1", data-myorder="2", data-myorder="3". I also added a list element with 3 list items which have the class "filter". I made all the list items links and added them these attributes data-filter=" .category-1", data-filter=" .category-2" , data-filter=" .category-3" . I also added a background colour and some sizes for the container, the div blocks inside the container and the list items. Then I added this lines in the custom code area first before tag and then to the tag:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
	<script src="main.js"></script>

But unfortunately it didn't work.. I know I might sound like a noob developer. I love the design part. I am a designer, that's why I don't know to code yet.

Please if you can let me know what I have done wrong. Meanwhile I will continue to make it work however I think there is something I am always doing wrong.


Stack or Tile Images
#4

You may have everything set up correctly. It's important to note that adding custom code to the site settings will not be reflected in the designer. You'll have to publish your site and test it there to see if it works. Have you tried that?


#5

I just published the site. However it is still not working. Here is the link http://mixituptest.webflow.com/# The design is very basic, I wanted just to see if it works first.


#6

Hi @dunnope, it looks like you may be using some outdated script tags. Please try the following:

  1. Remove all code from your <head> section

  2. Then, copy the following into your </body> code section:

<script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
<script>
  $('.container').mixItUp();
</script>

Once that is in place, I would suggest reading through the MixItUp documentation to figure out how set up your elements on the page. This can be found here: https://mixitup.kunkalabs.com/learn/tutorial/get-started/#build-your-content


#7

Hi danro,

Thank you for your reply. I just did what you suggested me to but it is still not working. I feel pretty noob right now, sorry for bothering you guys with this. I am not sure what I am doing wrong..


#8

@dunnope I have tested it and work well here http://livehelper.webflow.com/#mixitup-jquery-sort-filter

I made few modification there as below:

  1. I named id Container as mix-container
  2. class category-1 & category-2 as cat-1 & cat-2

  3. I add my own css that hide target elements. I named it mixadd.css you can find it in Custom Code head tag

Webflow public link for livehelper is on the page if you need it.

Cheers


#9

@pastiwibawa thank you very much for the link and for your instructions! Finally it works! smile


#10

Cool. Glad can help smiley


#11

Hey, do you have a functioning site with this implemented? I'd love to take a look. I have a new page for a client who wants this type of functionality.

Thanks


#12

I’ve recreated this Codepen exactly in Webflow, though when using filters, the targets (shapes) jump in and out. I’ve had the same issue with other projects – any ideas?

http://codepen.io/anon/pen/YXpbvj

TO

http://creativelabsbook28015419.webflow.io/untitled


#13

Hi @joshhopkins, Could you share the read-only link to the site? http://help.webflow.com/faq/general/how-do-i-share-my-sites-read-only-link, I am happy to take a look smile Cheers,
Dave


#14

@cyberdave https://preview.webflow.com/preview/creativelabsbook28015419?preview=5f2a7210e566d00480749c5ce59e225b


#15

Thanks @joshhopkins ! I will go take a look and get back to you after I have some info. smile


#17

Any luck @cyberdave? Still struggling with this one.


#18

Hi @joshhopkins, sorry I do not yet have a root cause for this yet, but I am still investigating this...sometimes the custom code things take longer as it is not a standard supported feature. As soon as I have more info, I let you know smile

Cheers,
Dave


#19

Hi @dunnope, May not be exactly what you're looking for, but if the existing plugin (mixitup) is causing trouble - try a plugin that has been successfully integrated with Webflow sites in the past: http://isotope.metafizzy.co/

Hope this helps!


#20

That's so cool! Need to use this in a site for sure smiley
Thanks @thewonglv smile


#21

Hi @joshhopkins. I am not entirely sure what is wrong with the copy of the site you were working on with this mixitup plugin, but I was able to get this to work without the jump in and out issue:

https://webflow.com/website/filtering-elements
You can clone this if you want. I hope this helps !

Cheers,
Dave