Jump to content

Archived

This topic is now archived and is closed to further replies.

Gabriel Lerner

Generating a lightbox with a video (or form, etc.) when clicking a 'button'

Recommended Posts

Gabriel Lerner    0
Gabriel Lerner

I am trying without success to emulate the example in this site: http://www.cleanprogram.com/.

When you click on "Play Video", what is probably a lightbox opens in the center of the screen, without leaving the page, and... well, plays a video.

The idea is to use a component like Masthead (or maybe Hero) and enable the video so that clicking in the Masthead Action Button will trigger the lightbox. 

I thought I could use popup plugins like Simple Popup Plugin, using a shortcode. Didn´t work. 

I then tried Lightbox Plus Color Box, and after reading about it in a forum, JQuery Colorbox plugin. No success there either. 

Then, here - http://support.pagelines.me/docs/miscellaneous/shortcodes/ - I found a PageLines shortcode to insert YouTube and Vimeo videos, but inserting 

 

  1. [pl_video type="vimeo" id="50522981"]

in the link destination just opened the video inside the button itself. 

I couldn´t find any other reference to this problem in the forums.

Please help.

 

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there, that site looks like it's using http://fancybox.net/ for the lightbox effect.

 

You wouldn't be able to trigger the video from the button inside the pre-set section. However if the section has a text field, like the highlight section, you could make your own button inside the text field using the shortcode the plugin provides to activate the video.

 

http://screencast.com/t/PVVTBZZR8


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Thanks for informing us the issue has been resolved.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • StuLeeUK
      By StuLeeUK+
      Good morning,
      I have set up my homepage using the Elements sections, a Masthead at the top and then a selection of Heroes lower down.
      I only just realised that the Heroes set a H1, as does the Masthead.
      Is there an easy way I can change the Heroes to an H2/H3 etc so as to improve the structure of my headers, whilst keeping the Masthead as H1?
      I really don't know much at all about CSS, which is why I use Pagelines because it's just so easy to create good looking pages without too much confusion.
       
      page for reference is https://www.avangocouriers.co.uk
      Thanks,
      Stu
    • bjs198
      By bjs198
      Hey there,
       
      I use quite a few templates to handle the look and feel of many many pages on a site and then populate the templated pages with a wp-content loop. However a client has asked that I effectively place a DMS2 Masthead at the top of each page as they prefer the styling of the title & tagline to the standard in WP. Obviously I can't do this when using templates as the Masthead would just replicate over all the associated templated pages, so could you please tell me if it's possible to recreate the title and tagline styling of the Masthead using HTML rather than CSS in the text view of the wp-content editor? I did inspect the HTML/CSS but came up fruitless...
       
      Hope that makes some kind of sense, and please excuse my coding ignorance :)
       
      Best
       
      Barney
    • knasen81
      By knasen81
      Hi! I want to link a button in the musthead så that when clicked it send the visitor to a lower position/place in the same page. It is clear how you can type a link in a button så that the person sends to another page, but how do you send them to a lower place in the same page?
       
       
    • MobileParity
      By MobileParity+
      My Masthead text is not formatting to mobile devices. It was working fine last week and once I added the ShareBar section everything got a little off. At first I thought it was the width of the ShareBar that was causing the issue so I used a media query to resize the width and it works for the tablet size of 767px however my Masthead text is now askew and does not resize for the screen. I am using FitText.js to resize the headings (h1, h2, etc). Here is the media query that I am using for the ShareBar. For some reason I am 
       
      @media only screen and (max-width:767px) {  #sharebarui2dj1f .pl-sharebar { width:540px;     } }  
       
       
      Website URL:www.bingerr.com
      Framework Version:dms2
      WordPress Version:4+
      Plugins in Use:FitText.js
      Server/Host:flywheel
      Screenshots:
      Details:
    • DanatTLFN
      By DanatTLFN
      Hello there!
       
      I'm a bit panicky this evening as I was just making a quick change to the top half of my page when the DMS decided to stop loading up.
       
      The steps I took before refreshing are as follows: 
       
      Added in a Masthead
      Embedded a YouTube Video into the Video field on the editing panel
      Refreshed 
      Began pulling hair out
       
      After this I went to troubleshoot it and have deactivated all plugins however the problem still persists with all plugins deactivated. I am pretty sure it is a something to do with the Masthead, however not being able to get in and remove that section, makes seeing a solution somewhat rather difficult.
       
      Anyway I shall look forward to hearing your response.
       
      PS. I am running DMS 2 
      GoDaddy hosting
      and 21 Plugins all of which I have mentioned in previous posts.
×