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.
- Caption 1: And now add the slides…
We’ll use three images I already have loaded on the server, and add them to my HTML instance.
Caption 2: About to be a slide show
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).
Caption 3: Note the highlighted sections
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”.
Caption 4: 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?
Looking for quality mojoPortal Hosting? Look no further than Arvixe Web Hosting!
It was easy to create the slider but what about hyperlinks? They don’t appear to work.
That is a limitation of this slider implementation; if you’d like to have the slides contain hyperlinks, you may prefer to use an implementation such as NivoSlider.