Display MuraCMS image gallery:

We have found the the best way to acheive this is to not actually use a gallery image, but rather a copy of the image instead. Galleries are meant to displayed in a particular way and while you can use a Local Content Index to show a gallery image on a content page, the resulting layout is not desireable. If you want to display a few images on a content page and have them pop-up into the shadowbox a.k.a. lightbox then there are a few options.

Option 1:

If you only have one photo, you can edit the page and include a file in the "select a file to upload" field. This will create a small, medium and large version of the image and display it in the shadowbox a.k.a. lightbox or graybox when clicked. This may not be convenient as the image will display in it's usual spot within the content.

Option 2:

If you want to add the shadowbox a.k.a. lightbox or graybox effect to one or more random images on a page you can use the instructions below:

1. While editing the page, use the built-in WYSIWYG editor to upload or simply select the LARGE version of the image. Go to the next step before saving.
2. Once uploaded or selected, use the resize image tool on the Image Info tab (make sure the little lock is closed to ensure you images is resized in correctly) to resize the image to the size you want. e.g. 80px or 120px are typical sizes of gallery images. Also, set the border = 0. Go to the next step before saving.
3. Next, copy the whole URL field on the Image Info tab and paste into the URL field of the Link Tab. This will link the image back to itself, but this time without resizing. Save the image by clickin "OK".
4. Next, click "Source" on the WYSIWYG Editor and locate the link and image you just inserted. It will start with <a href=... Put your cursor just after the "a" (anchor) and type in rel="shadowbox" making sure to leave a single space between the closing quote and the href= statement. Save the page. It will look something like this when you are done:

   • <a rel="shadowbox[123]" href="my-large-image.jpg"><img alt="" width="120" height="116" src="my-large-image.jpg" /></a>

5. Open the page in your browser and view the new image.

Note: If you would like to have several images in the shadowbox, so users can go to the next image while in the shadowbox, change step 4 to <a rel="shadowbox[common-number]".... Replace "common-number" with a number of your own choosing. Make sure you use the same common number for each image you would like in the shadowbox. Use a different number for different pages or sub-set of images on the same page.

If the lightbox doesn't work: Please add the following MURA tag to the source code of your page at the top. This will tell Mura to load the correct Javascript files for the Shadowbox. [mura]loadShadowBoxJS()[/mura]

Additional note: This has been taken from the Mura CMS forums but presented here for the use and convenience of our customers.