Jump to content

Button that pops-up a video lightbox

Go to solution Solved by Caue,

Recommended Posts

  • 4 weeks later...
  • Solution

Out of so many possible ways to do it, this is how I've done it:

http://www.cregox.com/full-video/

There are quite many steps and options there. Here I'll write the most simplified version, with very basic steps which might not be so easy to follow but should be enough if you know how to find your way:

First,

.

Then, create a link anywhere you want with this updated to your video ID:


javascript:jqueryLightbox('RpLBR38kVvY');

Then, add the following script somewhere:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script name="full video lightbox" author="cregox.com">
 // to use it, create a gallery block, make it a grid and check the Lightbox.
 // now add an item to it, either with the plus button or from another gallery.
 // finally add a link to any block you want,
 // calling jqueryLightbox function with a video url string.
 // for instance, to a vimeo video:
 // javascript:jqueryLightbox('video/127121696');
 //
 // for more info, visit www.cregox.com/full-video

 $(document).ready(function(){
   $('a[href^="javascript:jqueryLightbox("]').each(function(){
     var $videoButton = $(this);
     var videoString = $videoButton.attr('href').split("('")[1].split("')")[0];
     var $galleryLightbox = $('div[data-html*="'+ videoString +'"]');
     $galleryLightbox.parents('.sqs-block-gallery').hide(); // this is the line not being used in this page
     var $galleryLightboxImg = $galleryLightbox.find('img');
     $videoButton.click(function(){
       $galleryLightboxImg.hide(); // as to not show them before loading video
       $galleryLightboxImg.click();
     });
     $videoButton.attr('href', 'javascript:');
     $videoButton.addClass('lightboxed');
   });
 });

 function jqueryLightbox (videoString) {
   alert('jQuery not loaded');
 }
</script>


Edited by Caue

If you need support building your website, talk to me! <-- Check the link on the side.

Link to comment
  • 1 month later...
  • 4 weeks later...
  • 9 months later...
  • 2 months later...

@Caue, I'm looking to implement this in my website melvin-sng-axe3.squarespace.com.

I should have made a mistake somewhere because nothing happens when I click on the button I created for the javascript.

What I did was:

  1. I created a page under the Not Linked section to contain the gallery grid.
  2. I created a button on one of my index pages with the javascript.
  3. I put the above script via Code Injection section under Advanced settings.

Would you please advise?

Thanks in advance!

Mel

Link to comment

Sorry, @fuzzykit I couldn't find the button or the script loaded there. Where are they supposed to be, exactly? Maybe they're in a page we can't see unless you link it to us.

I'm actually amazed my script is still working 1 year later...

It doesn't matter if the page is linked or not, at all. The gallery grid could have an effect, but probably not as well.

Try looking on the javascript console for error messages, they are usually very helpful.

That 5 minute challenge does sound interesting. :)

If you need support building your website, talk to me! <-- Check the link on the side.

Link to comment

@Caue, Thanks for being interested in the challenge. It is indeed interesting.

I removed the button since I could not get it to work. I have put it back on the main banner. It's the "Watch Video" button. I have now created the gallery grid as part of the index. You should be able to see the same.

I tried looking at the console but there is not error message. I have tried adding the script at multiple locations - Advanced > Code Injection and "Advanced" tab of the index page. None works. :(

Hope you could help me. Thanks!

screen-shot-2016-07-23-at-104804-pm.png.c98c45f6705209bb04a6d8137f1c64b8.png

Link to comment

Ok, I'm just guessing here, but maybe you should keep the thumbnail on the gallery.

Maybe the script could be modified to work even with "No Thumbnail" but right now I think it pretty much relies on it. Hopefully that's all.

If you need support building your website, talk to me! <-- Check the link on the side.

Link to comment
  • 1 year later...
  • 2 years later...
  • 4 months later...

This is a great video lightbox option: 

https://www.fusehub.ca/video-plugin

I run FuseHub Creative Group, a syndicate of creatives from all over the world with one common goal - to develop creative and strategic solutions for ambitious organizations, and develop cool plugins which you can find on the SQS Mods platform - Circle Members always get a 10% discount with this code: SQSMOD10.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.