Streaming live at 10am (PST)

Lightbox Combo of Video & Images


#1

Hi guys, I could really use some help here.

I am trying to make a main ‘work’ banner full screen width on my companies site (‘A’)
When a user hovers over any of the 4 images (the 4 colours), that image gets fully revealed left & right across screen width (‘B’).
Then when the image is clicked on a url vimeo/youtube link plays full width (‘C’) or an image loads full width with a close ‘X’ in the top right corner taking you back to ‘A’

Thanks

Arvind


#2

Hi. This effects called “accordion gallery”.

The problem

This idea/pattern was more in “fashion” before responsive design (How to implement this style on mobile?) - So, I don’t think it will be so easy to find update (2017 code) Plugin for this idea.

I think the best solution is to hide this accordion on mobile (and show regular video gallery).

OPTION ONE - jquery-plugin

List:
http://wpandsuch.com/top-20-horizontal-jquery-accordion-plugins-for-websites/

How to

First find the plugin you want & learn the docs - than you should add custom code, add CSS/JS (CDNs), Add the correct class and HTML structure and that’s it (Try to implement fullpage.js or slick (a lot of forum topics about this two)- to learn how-to integrate webflow with some JS-library) - and last initialize.

OPTION TWO - by webflow interactions

I dont know if this could be made by interactions, but give at a try

OPTION Three -freelancer

Its hard to solve this by forum answer -
Also you can find freelancer or forum freelancer


#3

Hi there, thanks for the reply Siton_Systems, it doesn’t seem to work even if I forget the accordion system, even if I just have the four colours from ‘A’ as ‘clickable’ links to open a lightbox, they dont do anything.
Effectively I’m looking for a banner that is screen width that holds four images (the four colours in ‘A’) and wen you click on one it loads the video url or image fullscreen.

Is this possible?

Thanks

Arvind


#4

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