Streaming live at 10am (PST)

Auto Sliding Thumbnail Gallery


#1

Hello to all Webflowers and staff members,

I am needing some help here in creating a auto sliding image thumbnail gallery.

I have created a thumbnail gallery already ... following example 2 found this is webflow page http://tabs.webflow.io/.

Anyhow I am stuck on the auto playing part. I want to create the effect similar to the one of a slider. Does anyone have any idea on how to accomplish this.

All / any help is greatly appreciate.

Thank you all. I will await for you feedback.

Cheers,

Diana smile


#2

Hello @DesignerDiana,

Unfortunately there is no such feature yet in Webflow. But I can show you some work-around with slider, if you have not too many pictures in the gallery.

Regards,
Anna


#3

Hello @sabanna,

Thanks for replying.
A workaround would be really helpful.
It isn't too much pictures ... around 20?

Thank you.

I hope to hear from you soon.

Diana


#4

Well, In that topic I created work-around for 10 pictures >>> Fellow Webflow Experts: Can this be done in Webflow?:

Not absolutely that you asked for, and honestly, don't know if this method will be good for 20 pics confused

But hope it will at least move you to some new ideas

Cheers,
Anna


#5

This can be done in jquery... but not sure if you want to go the jquery route.

Plus... you gotta self-host the solution.


#6

Yea, I think if I used jquery I would have to export the code and edit right?. This way I won't be able to view in the preview. Wish I could, Webflow isn't that advance yet ... or technology itself. smile
I wish webflow could add auto play tabs!!

I guess I would just use the workaround for now and after all is done in the browser, export and edit the code for self - hosting.

How might I do so with jquery ... have you had a solution before?

Thanks,

Diana


#7

I don't use Webflow hosting (nothing against their service... I haven't even tried it)

As a (server admin / exchange host / developer / designer / receptionist / dishwasher)...

I am an end-to-end consultant who runs my own dedicated servers.

I've got 4 servers now that I use exclusively for my clients.

You can use jquery with your Webflow site......

...but accessing the images might be a problem. I might be wrong about this.

Someone who hosts with webflow and uses jquery would better answer this.

I took the jssor code and forked it to my own (it's open source, so as long you credit the original author... you're good).

http://www.jssor.com/development/

There are quiet a few examples there as well... take a look.

I liked it because it
- has a ton of transitions
- has the ability to jump directly to an image
- and autoloads
- and allows "folders"
- and is touch friendly
- responsive

The original jquery code is actually quite small.

When I came across the (fully docucmented) code... I added 12 images which took the line count to about 350. Each images requires 4 lines. (open div / close div / image / thumb)... so 48 lines for the images... which means the actual code is about 300 lines or so (I use lot of line spacing... and as I said... the code is documented).

The code itself contains all the transitions... even if you don't use them.... so I went in and removed all the unneeded transition code (transitions that I didn't want / need) and all the documentation (since I already knew what the code does).

I rewrote a couple sections... resulting in (with 12 images)... 110 lines of code. That's tiny. Very fast to load.

If you rip it apart... you have to be careful with the transition code - as there is quite a bit of math going in there.

Hope this helps.


#8

I really like your amazing gallery smile


#9

owww blush thank you, it could be probably better, I thought already about different style, when "un-shaded" part moving from tumb to thumb


#10

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.