Well for those who want to know more about the Galleria installation here goes.
- Upload the Galleria javascript file as per the included instructions. You will need a call to this in the
<head>section of any page template that is to use it. - There is also a block of javascript that needs to go directly into the
<head>section of any page template that is to use it which contains various “options” that you can switch on and off depending on your requirements. I’ll come back to this later as there is something else to add here. - Install the Galleria CSS to the “Style” tab and include a call to this in the
<head>section of any page template that is to use it. I’ve deliberately kept this as a separate file. I do use Ruud’s rvm_css plug-in though this isn’t necessary. - Install Mary’s upm_image plug-in and activate it.
- You need to create a form to be used by the articles using Galleria. Within that form, where ever you want the images to appear, you place a call to Mary’s plug-in something like
<txp:upm_article_image wraptag="ul" class="galleria" break="li" show_alt="yes" show_title="yes" /> - If you want the next/prev links you will also need the following, probably underneath the plug-in call
<a href="#" onclick="$.galleria.prev(); return false;">prev</a> | <a href="#" onclick="$.galleria.next(); return false;">next</a>. I’ve simply placed that inside “p” tags with a class so that I can aim the CSS at it. - Now for each article use a comma-separated list in the “Article image” box under “Advanced Options” of the images you want to appear in Galleria.
- By default Galleria will only display the thumbnails (these are auto-generated) when the page loads so if you want the first image to display automatically you need to go to that block of javascript above and add
$(".galleria li:first").addClass('active');right before the last set of closing brackets. - Also in that javascript block set
insert : undefined,as this matches with the Galleria CSS you installed earlier. - Now you need to work on the CSS to make it look the way you want it.
- To create the links within the article you need to use something similar to
<a href="javascript:$.galleria.activate('http://your-site.com/images/50.jpg')">link text</a>where the image “id” is the image you want displayed. Of course it does have to be an image that is contained in the list for that article. Don’t forget to replace “your-site.com”. - If you check out the DevKick site you can find loads of different image display methods other than Galleria using jQuery, Mootools and Javascript along with a load of other stuff. It’s one of my Bookmarks.