What is a light box link?
Light box links are links open a separate page in a popup that appears over the publication. These can be anything from a YouTube video or contact form to an image or series of images.
This tutorial covers usage of our "built-in" light box solution. For a summary of all light box solutions we offer, see the Lightbox Solutions Overview.
Note: When opening a light box link, it is neccesary to close the default fullscreen if it is currently in use. For more information, please see JavaScript Based Fullscreen.
Formatting light box appearance:
Shown above is what a light box looks like by default. It is possible to change the popup dimensions, border thickness, and corner style (round or square):
1) Log into Publicator and click "All Publications" on the left side.
2a) If you have not done so already, create a new viewer by clicking "Create Viewer" at the top. You'll need to choose an existing viewer to start from, click "Next" at the bottom, and choose a new name for it.
2b) If you have a new viewer selected on your publication already, simply click on its name (off to the right of your publication's name in the list) to access the Viewer settings.
3) If using a Verge viewer, the light box settings can be found at the bottom of the page; otherwise, select the 'Lightbox' tab at the top.
4) Change any settings as desired. (More advanced customizations may be made via the optional CSS functionality. See Lightboxes and CSS and Lightbox Style Examples for more information.)
5) Click "Save and Exit".
If this is a viewer you created just now, do the following to apply it to your publication(s):
1) Click "All Publications" at left. Click on one of your publications in the list.
2) Using the "Viewer" drop-down menu, select the viewer you've created.
3) Click "Save" at the bottom.
Steps to create a light box link:
1) From "All Publications", open Zmags Enriched by clicking on the icon off to the right of your publication in the list.
2) Once Zmags Enriched opens, click on the Link icon in the toolbar (Fig 1.0) on the left hand side of the interface and choose External Link. After this, mark an area on the page on which you want to place the link. (Fig 1.1)
Fig 1.0
Fig 1.1
3) This will open the external link dialog box, which has the following properties
Fig 1.2
URL - The URL of the content to be loaded into the light box. Be sure to include http:// at the beginning, as this is required for proper functionality.
To use a YouTube video for your lightbox, use the following URL format:
//www.youtube.com/embed/YOUTUBE_ID
To have the video auto-play as soon as the light box is opened, use this (note: you will need to use the Mute parameter in addition to Autoplay due to recent browser policies):
//www.youtube.com/embed/YOUTUBE_ID?autoplay=1&mute=1&modestbranding=1&rel=0
The "YouTube ID" is an 11 character string of letters, numbers, and symbols found after the ?v= in the address of the video on YouTube. For example, with this video the YouTube ID would be UkG9cV8xjn4:
http://www.youtube.com/watch?v=UkG9cV8xjn4
To use a Vimeo video for your light box, use the following URL format://player.vimeo.com/video/VIMEO_ID
The "Vimeo ID" is an 8 character string consisting entirely of numbers 0 - 9.
To use a Brightcove video for your light box, use the following URL format://bcove.me/BRIGHTCOVE_ID
The "Brightcove ID" is an 8 character string of numbers and letters. Be sure to size your light box to 849 x 477 pixels for proper performance.
Open link in - By default this is set to "New window/tab". Click on this and change it to "Lightbox" instead.
Lightbox Width & Height: The width and height of the popup opened to display your light box content. If not specified, the default lightbox width and height from the viewer settings will be used instead.
Dimensions and Variables
- Width & Height: The width and height of the link area in Pixels on the page
- Top & Left: The exact position of the link in Pixels on the page
Opacity determines how transparent the link should be. Set to 0% for completely invisible links.
4) After creating the link(s) choose File > Save All from the top menu (Fig 1.3) and Exit Zmags Enriched
Fig 1.3
Comments
0 comments
Please sign in to leave a comment.