Home > Blog > Advanced Design HowTo's > @article.title


How to create a pop-up lightbox window

GOAL:

You want to have a video or image on your page, and when you click on it you want it to pop up in a larger window in the middle of the page.  And, you want the background of the current page to be slightly grayed out.  The steps below show you how to use a "fancybox" window to display your pop up video or image.

STEPS:

  1. SiteNinja has the included functionality of embedding fancybox iframes. 
  2. Use the iframe source as the href (or link URL) for the link
  3. Use classes "fancy-iframe-small" "fancy-iframe-medium" or "fancy-iframe-large" to determine how big you want your pop up window.

Here is an example of the Html code generated by your Html Editor.  You do not need to type this code by hand, just use your Html editor as shown in the images below.

<div><!--<iframe src="http://player.vimeo.com/video/58746108" width="310" height="180" frameborder="0"></iframe>--> <a href="http://player.vimeo.com/video/58746108?byline=0&amp;portrait=0" class="fancy-iframe-medium"><img src="http://s3.amazonaws.com/siteninja/site-ninja1-com/1362596781/original/solvang-video.png" width="650" height="650" alt="Solvang Chamber of Commerce Video Introduction" /></a></div>

This is the effect of the pop up window on the public site.

Step 1 - How to create a pop-up lightbox window
Step 2 - How to create a pop-up lightbox window
Step 3 - How to create a pop-up lightbox window
Step 4 - How to create a pop-up lightbox window

Archives