Images with Pop-up Gallery

In the top navigation CMS template you can display images on a page, with or without captions, that pop-up into a gallery of images that the user can click through. Creating these galleries involves some code editing.

    1. Create your images using the Image Editor in the CMS. You will need to create the size that you will display on the page and either a 765 Banner, 1024 Feature, or 1600 Feature for the pop-up.
    2. Insert the images inline on your page or highlight using the screen shot of the inline image icon icon.
    3. Select each image and link it to the 765 Banner, 2014 Feature, or 1600 Feature size of itself using the CMS link icon (screen shot of the inline link icon).
    4. Access the code using the Source Code button (<>).

  1. Find the link tag for each image. It should look like
    <a href="...">
  2. Just after the “a” add class=”fancybox” rel=”group” so your code may look something like
    <a class="fancybox" rel="group" href="...">

    Note: if you are linking to YouTube or Vimeo, use a class of “various” instead of “fancybox”.

  3. Find the image tag for each item, which should be right after the “>” of the link code you just edited. It should look like
    <img src="..."/>
  4. Just after the “img” add data-fancybox-group=”group” so you code may look something like
    <img data-fancybox-group="group" src="..." />
  5. Your final code should look like the following for each image in the gallery.
    <a class="fancybox" rel="group" href=" . . . "><img data-fancybox-group="group" src=" . . . "></a>
  6. You can save your work and preview the item to see the working gallery.
  7. Remember to direct or return all items created or edited to Public when done.

You can see an example of a pop-up image gallery on the Michigan Tech Class Ring page. Click on one of the ring images at the top of the page to access the gallery. You can also add captions to the images displayed on the page (not in the gallery).