Fancybox Links

Options

These are the options availables in the Add/Edit dialog (yes, it is that long):

fancybox_ui.png

  • Selector. This is a CSS selector that will be used to select the links that will be converted to "Fancybox" links. If you are unsure just leave the default value and follow the instructions in the next sections. If you want different sets of options for different blocks in the page you can leave as is and simply add a sequential number (like .fancybox_links1, .fancybox_links2, ...), later, when following the steps in the next section add the same numbering to the CSS class.
  • Change transparency of content for elastic transitions. Well, that's pretty much it: change transparency of content for elastic transitions.
  • Modal. When checked, the overlay is shown, and the options hide on overlay click, hide on content click, enable escape button and show close button are ignored and set to unchecked. That means that the Fancybox window can't be closed. It can be useful when used together with inline content.
  • Cyclic galleries. When checked, galleries will be cyclic, allowing you to keep pressing next/back.
  • Hide scrollbars. Never show scrollbars in the fancybox.
  • Auto dimensions (inline and ajax content). For inline and ajax views, resizes the view to the element recieves. Make sure it has dimensions otherwise this will give unexpected results.
  • Width. Fancybox width for URLs and flash content. Also set for inline content if 'Auto dimensions' is unchecked. Leave empty for the default value.
  • Height. Fancybox height for URLs and flash content. Also set for inline content if 'Auto dimensions' is unchecked. Leave empty for the default value.
  • Scale to fit in viewport. If checked, FancyBox is scaled to fit in viewport.
  • Centered while scrolling page. This prevents the pop-up to be scrolled out of view. Notice that when using a mobile device (and depending on the settings used), sometimes all the content might not be displayed at once so you have to scroll up and down. In such cases keep this setting unchecked to allow the scrolling.
  • Clicking the overlay closes FancyBox/Clicking the content closes FancyBox. Self-explanatory.
  • Show overlay. When checked it shows an overlay to dim out the rest of the page.
  • Overlay opacity. Opacity of the overlay, from 0 to 100%.
  • Overlay color. Color of the overlay. Choose the color that fits your site colors (like in concrete5 site, where such kind of overlays are blue) or leave the default, neutral gray.
  • Show title. Show the title... or not.
  • Title position. Can be inside (in the margin), outside (outside the fancybox window), float (outside, framed in a black box) or over (over the content). See the images below.title_inside.pngtitle_outside.pngtitle_float.pngtitle_over.png
  • Transition type (In) / Transition type (Out). Determines how the Fancybox is show/hidden. Can be set to 'Elastic', 'Fade' or 'None'.
  • Show close button. You can figure it out yourself.
  • Show navigation arrows for galleries. Even if you uncheck it, you can still click the left and right sides of the images to move throughout theĀ  gallery.
  • Enable scape button. Whether the scape key closes the fancybox or not.
  • Enable keyboard navigation.

Once added, the block will VISIBLE ONLY WHILE EDITING THE PAGE. It will show an informative message:

informative_message.png

How to make any block's links open in a Fancybox

Just click the block in edit mode and select "Design" in the context menu.

design_menu.png

Go to the CSS tab and add the class fancybox_links in the "CSS Class Name(s)" textbox. Notice how the class doesn't start with a dot!

fancybox_links_class.png

Now your links open in a Fancybox!

If the block is a content block you can exclude a link adding the class no_fancybox_links to it. Just position the cursor in the link and select "Edit Link" in the tooldar.

edit_link.png

Go to the "Advanced" tab and write no_fancybox_links in the "Classes" text box. Your link has come back to normality.

no_fancybox_links_class.png

Create a gallery

In a gallery of links you can navigate the content of every link in the gallery using the left and right buttons in the Fancybox.

To create a gallery of links you must add a rel attribute to each link in the gallery. Just position the cursor in the link and select "Edit Link" in the toolbar, as explained above. Go to the "Advanced" tab and select Lightbox from the dropdown "Relationship page to target".

edit_rel.png

Repeat with every link in the gallery.

Any other link with the same rel value will belong to the same gallery.

NOTE: Browsers do not use the rel attribute in any way. However, search engines can use this attribute to get more information about a link. So, you can use any value here, but preferably do not use a meaningful value in a misleading way (see this explanation about the rel attribute).

Open a block/stack

To open a block in a Fancybox select the block in edit mode and click the "Design" option.

design_menu.png

Go to the CSS tab and add an ID to the block. Optionally add the CSS rule display:none; to hide it until the link is clicked. If you don't add the CSS rule Fancybox Links will do it for you, but the content might be visible briefly before the code executes.

edit_block_id.png

Now create a link that points to the ID given to the block, preceded by a #. So, if the ID was "myblock" your link must point to "#myblock", and that's pretty much all you need.

link_to_block_id.png

The same procedure can be followed with a stack.


warning.pngNOTE: Every block is different, we can not ensure that they will work properly when placed in a Fancybox as they were not designed with that possibility in mind. Many will do, some may exhibit styling issues and other may not function properly. The only way to tell is to try and see.


Youtube and Vimeo videos

When linking to a Youtube video your URL should be something like: http://www.youtube.com/embed/<videoID> (notice the "embed" instead of the usual "watch")
For Vimeo videos use the URL from the "Share" button (look at the embed code, it will start with <iframe src="<the URL you are looking for>" ...). It will be something like: http://player.vimeo.com/video/<videoID> (you will need to add the http: yourself).

Non-UI options (advanced)

There are a few things you can fine-tune beyond the user interface. If you are not comfortable editing raw HTML code or writing javascript code, just ignore what I said. Otherwise, if you are ready for this geeky stuff go to the advanced usage page.

If you liked this add-on you might consider donating to support the development of this and other free add-ons: