MODx Picture Ticker
I wanted to be able to display links on the Deferred Procrastination homepage in a way that didn’t interfere with either the layout or the navigation, and be able to update those links as simply as possible. In MODx, this meant making a document driven slideshow.
Looking around online didn’t lead to any complete solutions, but it did give me some promising leads. The final solution can be seen at www.deferredprocrastination.co.uk.
The slideshow works by using Ditto to call template variables (TV) from MODx documents into the page, and uses the javascript driven SmoothGallery to animate them. This arrangement means documents can all be controlled from the MODx manager, and even published/unpublished to a schedule.
Document Hierarchy:
I created a container to hold the featured items. This isn’t published, so the template doesn’t matter, and this document remains empty.
Inside, a document is created for each featured item that appears in the slideshow. An empty “featured items” template is used so template variables (TV) can be added. The template is left empty because, although the document must be published to appear on the featured items, there’s no content, so it isn’t a “real” page.
SmoothGallery uses 4 variables for this display method: title, description, image and link. Three of these are created as additional TVs for the Ditto call, along with the document title:
-
[featured_link_caption] - a text input, holds the link/image caption
-
[featured_link_image] - an image input type with an image widget to allow for image upload and resize. Class is set in the image widget to “full” to match the required classes in the SmoothGallery css file.
-
[featured_link_url] - a text input to hold the destination for when the image is clicked. This can be either an internal (using [~id~] for the document number) or an external link.
Ditto call:
SmoothGallery uses the following format for slideshow items (from SmoothGallery Getting Started): `<div id="myGallery">
</div>
`
Which I turned into a chunk: `<div>
[+title+]
[+featured_link_caption+] Click to see more…
</div> `
I’m not using thumbnails in the display, so that’s been removed. [featured_link_image] includes class="full" in the image widget, because an image TV will output the full tag when called. I’ve not used a link widget for [featured_link_url] for the same reason; I want to add the title to the mouse-over alt-text, so I don’t want to output the full tag.
This is called where I want it on the homepage with: `<div id="myGallery">
[!Ditto? &parents=## &orderBy=menuindex DESC &tpl=featured_items!]
</div> `
where ## is the id of the featured items container document.
Using &sortBy=menuindex DESC`` (sort by menu-index in descending order) means you can control the display order in the MODx Manager but, by default, a new item will appear first (at the bottom of the list) when you create it.
SmoothGallery:
If you haven’t already, you’ll need to install SmoothGallery. I assume it’s included with the MaxiGallery snippet files somewhere, but I haven’t got that installed on Deferred Procrastination, so I’ve just added the relevant files to /SmoothGallery/ on the webhost root.
To use SmoothGallery, it needs to be called in the page head with: `
`
And the script is called just after close of the #myGallery div:
`
`
I’ve called a timed slideshow with arrows, but without the thumbnail carousel for navigation because I only want to have a few items at any one time.
To customise the size and layout of SmoothGallery, the styling details are in jd.gallery.css. I’ve increased the text size and div height of the title and descrption to make them easier to read. And I set the hight and width of #myGallery in my css file to set the size of the slideshow.
SmoothGallery is from JonDesign and GPL licensed. It’s surprisingly easy to get to grips with, and means you don’t have to recreate a new flash slideshow as soon as you change an image. Which is similar to the reason I use a CMS instead of having to code every page by hand!