Open Page In Lightbox View

Design help General
#1

Hey Guys,

Hoping someone can help! I want to open a page up in the enlarged lightbox view instead of just viewing the thumbnails first, then clicking on one to view the enlarged image.

Any ideas on how to do this?

This is the site I want to do it on:
http://dan-wilton.webflow.io/collections/overview

Thanks!

@Diarmuid_Sexton - any idea?

#2

Can only be done using custom code. Paste this in Page Settings > Custom Code > Footer Code.

<script>
$(function() {
  $('.w-lightbox').first().trigger('tap');
});
</script>
2 Likes
#3

Yep, @samliew got it!

#4

Thank you! Works perfectly.

#5

Is there a way to use this as a conditional? I need to create an option in the CMS to open the gallery in either Thumbnail or Gallery View.

I tried adding an embed code div and adding conditional visibility to it but it doesn’t seem to apply the script…

@samliew @Diarmuid_Sexton

#6

Yes, you could make two different pages - one with the “gallery view” code in the footer code…the other without - then link to both for whichever view the user wants.

#7

The challenge is that it needs to be in the CMS collection template page though

#8

it can definitely be achieved i think.

If you send a share link to your site and a more detailed description where the two separate links are, I’ll take a look.

also, you need to set the cursor on “all links” to the hand cursor. for some reason, when the lightbox embedcode is used, the “cursor hand” which indicates a link stops showing up after the first lightbox is opened but if you set all links to the “cursor hand”, it fixes the problem.

#9

Thank you! https://preview.webflow.com/preview/dan-wilton?preview=52cf87fb2448c1b2c6c1b3f0c8a3abbc

Noted on the cursor, will update that.

So its the cms “Collections Template” page. I’ve setup a switch in the CMS to have the option to open the collection template page in the lightbox open mode but need to make it conditional ie. If Switch is on, add Javascript.

Can’t find a way to do it… I’ve added an embed code element and put the script in there, then added the conditional visibility there but it doesn’t have an effect.

#10

Ok, so give this a try.

Create an element on the collections page and give it an ID of “script-test”. You can also give it a class name of whatever you like. Put a conditional test on that element so that if the “Gallery View” switch is on, then the element is invisible. The element can be set to display none.

Then add this script in the footer of the page

$( "#script-test" ).hasClass( "w-condition-invisible" ){
  $('.w-lightbox').first().trigger('tap');
});

See if that works. It works on the premise that if an element is set to not show when a conditional test is set, webflow adds a class called “w-condition-invisible” to that element. so then by testing if an element has that class attached to it, you can then run a script pending the true or false outcome of that test.

i’m not a javascript ninja - maybe others have a better idea of how to achieve it, but in my mind that should work!

best of luck

#11

I gave it a try but it didn’t work unfortunately!

#12

When i’m trying to solve something like this I go to this website http://codepen.io/pen

and try to recreate what you’re trying to achieve - copy some code which replicates your site - i.e. there’ll have to be a script to load jquery i think - and include the div with the id as described above and the “w-condition-invisible” class. then run a script at the end which produces a text alert if the outcome of that function is true.

you already know that the script to produce the lightbox on page load works - so if you can get the function to test for gallery or thumbnail view working, then it should work.

it’s a good excerise - you’ll learn some javascript / jquery along the way and it shouldn’t be too difficult.

1 Like
#13

What I really want to do is something like this:

if Gallery View Switch = True

Then Run Lightbox Function

Else

Do nothing

But I have no idea how to code that… Could you help? Do you think it will work? @samliew

#14

@Diarmuid_Sexton got the idea right. If you need custom code development, feel free to contact me

#15

I’ve got it! Working here: http://dan-wilton.webflow.io/collections/canyon

$( document ).ready(function() {
    if($( "#script-test" ).hasClass( "w-condition-invisible" )){$('.w-lightbox').first().trigger('tap');}
});

Thank you for your help guys!

@Diarmuid_Sexton @samliew

2 Likes
#16

well done!!!1

#17

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