In an earlier tutorial, we covered how to embed a jQuery UI-based rotator on-the-fly in mojoPortal; today, we’ll cover how to use the built-in support for slideshows that can be created quickly and easily.
We’ll start with our HTML Content instance:
Aha! Here’s our new HTML Content instance. Ready to add some content? Click the pencil icon, as you see it here.
We’ll use three images I already have loaded on the server, and add them to my HTML instance.
Now: click on the upper left side of the menu, where it says “Source”; you’ll see the HTML markup behind the images. Remove the <p> tags, and wrap the images in a div, giving it a class name of your choosing (remember the class name – you’ll be using it in just a moment).
Click “Update”, and then click the “Settings” link/icon for your HTML feature. Under the first tab, “HTML Content Settings”, you’ll want to choose the 3rd accordion bar, “Slide Show Settings”.
Check the box next to “Enable Slideshow of Elements”; in this instance, the elements are the images inside your <div>. The elements can also be a <div> or a <p>; the slideshow will work for text, as well.
You can choose from a number of different effects for your slideshow: I chose “zoom” for this exercise. Remember that class we gave your container div? We need to add that value to the textbox next to “CSS Class For Slide Container div”.
Click “Save”, and look at your content instance now. It’s a slideshow, and it’ll be incredibly easy to update, with minimal markup. Wasn’t that quick and easy?