mojoPortal Tip: An Effortless Slideshow in Under 5 Minutes

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!

Tags: , , , , , , , , | Posted under MojoPortal | RSS 2.0

Author Spotlight

Carole Bennett

Carole Bennett

Carole Bennett is the founder and principal of IndigoTea. As a professional IT consultant, Carole has provided solutions for companies as diverse as Verizon, Frito-Lay, Capital One Auto Finance, and Zales Jewelers, parlaying a unique talent for acting as a translator between the worlds of business challenges and technology solutions. She considers multi-tasking skills gained from simultaneously 1) managing a fire performance troupe, 2) raising a family, and 3) working as a full-time IT consultant excellent preparation for her current career incarnation as the driving force behind IndigoTea. "Fire-breathing redhead on a mission" is not just a metaphorical description!

2 Comments on mojoPortal Tip: An Effortless Slideshow in Under 5 Minutes

  1. Stefan says:

    It was easy to create the slider but what about hyperlinks? They don’t appear to work.

Leave a Reply

Your email address will not be published. Required fields are marked *


+ 5 = 7

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>