MojoMotor Add-ons

Imageometer

Version 1.0.5 | MM 1.1.0+ | $10.00

Quickly and easily add fully customizable slideshows to your MojoMotor website. Imageometer makes integrating slideshows in MojoMotor lightning fast!


Features

  • Create and configure an unlimited number of slideshows for your MojoMotor website with Imageometer.
  • Works off two of the best jQuery slideshow packages, Nivo Slider and jQuery Cycle, and fully supports all of the options/configuration settings provided by these packages.
  • Upon installation, Imageometer is seamlessly integrated into the MojoMotor control panel so you or your client can easily manage slides and slideshows.
  • Each slide consists of a unique image as well optional levels of text fields to use as headlines, captions or credits, and a link.

Documentation

Installation

To install Imageometer, extract the Imageometer zip file and upload the core files to your /system/mojomotor/third_party directory.  

Although it's built to support both Nivo Slider and Jquery Cycle, Imageometer does not come packaged with these jQuery modules.  In order for Imageometer to work, you will also need to upload one or both of these packages to your /system/mojomotor/third_party directory.  The Nivo Slider core files should be placed in the third_party directory named 'nivo-slider'.  The Jquery Cycle core files should be placed in the third_party directory named jquery_cycle.

Once the core files have been uploaded to your server, log in to your MojoMotor Control Panel and insert the {mojo:imageometer:init} tag within any one of your MojoMotor template files.  To keep your html tidy, we typically suggest including this tag right above the </body> tag your footer template file.

To run the Imageometer Installer, point your browser to /admin/addons/imageometer/install and press enter.

Your url should look similar to the following:  http://somedomain.com/index.php/admin/addons/imageometer/install

That's all there is to it!  Imageometer should now be fully installed and ready to go!


Updating Instructions

To update Imageometer, first start by backing up both your site files and your MojoMotor database.  Once your system has been backed up, upload your new Imageometer files to the system/mojomotor/third_party directory (replace the existing Imageometer files already present in this folder).  Then, simply point your url to /admin/addons/imageometer/update and press enter.  If any update script need to run, they will be triggered.  


Getting Started

So, you've uploaded Imageometer and Nivo Slider and/or jQuery Cycle core files, you've run the Imageometer installer, you're now ready to begin creating slideshows.  

Creating Slideshows

Click on the Imageometer icon in your MojoMotor Control Panel.  Here you can add, edit, and delete slideshows created by Imageometer.  Since we're just getting started, click on 'Create Slideshow.' 

To start out, create a unique name for the slideshow.  The name should be a single word, no spaces and no punctuation (underscores and dashes are acceptible).  All spaces in a slideshow name will be replaced with an underscore.  Once you have given the slideshow a unique name, you start adding your slide images and content.  To add an image to a slide, click on the 'Select Image' button and select the image from the list that appears.  All images saved in the mm_uploads directory will be displayed in this list.  If you cannot find the image you need for this slide, you can also upload it to your sever from this screen.  Just click on the 'Upload Image' tab, select the image you would like to upload, and click 'Upload' (images uploaded through Imageometer will be stored in the mm_uploads directory).

Once you have found the image you would like to use for this slide, click 'Add Image.'  Now, you can (but do not have to) add a title, description, and a link for this slide.  Once you have finished adding any additional information for the slide, click the 'Add Image' button.  Your slide will be added to the list of slides for this particular slideshow.  Repeat this process until you have added all of the necessary slides, then click 'Create Slideshow.'

The Slideshow will be saved and you can now access it via your Imageometer template tags.

Editing Slideshows and Slides

If you need to change an existing slideshow, click on the 'Edit Slideshow' link next to the title of the slidehshow you would like to edit.  In the screen that appears, you can add new slides, delete existing slides, and edit exising slides.

To edit an existing slide in a slideshow, scroll down to the slide list, and click on the 'Edit' button next to the specific slide.  In the modal dialog that appears, make any necessary changes then click 'Save Changes.'  Imageometer will update the slide automatically.

Deleteing Slideshows and Slides

 To delete a slideshow, all you will need to do is click the 'Delete Slideshow' link next to the name of the slideshow that you wish to delete.  

To delete an existing slide in a slideshow, click on the 'Edit Slideshow' link, scroll down to the slide list, find the slide you would like to delete, click the 'Delete' button, and then click 'Save Changes.'  The slide will be deleted from the slideshow.  Note:  The image used for the slide will not be deleted from the mm_uploads directory.


Template Tags

Imageometer has 3 template tags:

Init Tag:

{mojo:imageometer:init}

This tag initializes the add-on and creates the Icon/User Interface in the MojoMotor Control Panel.  This tag must be present somewhere within your template files in order for you to create slideshows in Imageometer.

Nivo Slider Tag Pair:

{mojo:imageometer:nivo-slider}  {/mojo:imageometer:nivo-slider}

The Nivo Slider tag pair is used if you are employing the Nivo Slider package on your site.  This tag pair accepts the following input parameters to allow you to quickly and easily configure your Nivo Slideshow:

slideshow_name=" " - The name of your slideshow (REQUIRED)

effect=" " - Accepts name of Nivo-Slider effect. (Default = Random)  See Nivo-Slider documentation for list of available effects
slices=" " - Accepts number of slices to create for "slices" effect.
box_cols=" " - Accepts number of box columns to create for boxes effect. (Default = 8)
box_rows=" " - Accepts number of box rows to create for boxes effect.  (Default = 4)
animate_speed=" " - Accepts transition speed between images.  (Default = 500)
pause_time=" "  - Accepts time to pause on each image.  (Default = 1500)
start_slide=" " - Acceps the specific slide to start slideshow on.  (Default = 0)
directional_nav=" " - Accepts True/False value. Allows you to turn on/off directional navigation feature.  (Defualt = False)
control_nav=" " - Accepts True/False value.  Allows you to turn on/off control navigation feature.  (Default = False)
caption_opacity=" " - Allows you to specify caption opacity.  (Default 0.8)

Jquery Cycle Tag Pair:

{mojo:imageometer:jquery_cycle}  {/mojo:imageometer:jquery_cycle}

The Jquery Cycle tag pair is used if you are employing the Jquery Cycle slideshow package on your site.  This tag pair supports ALL of the jQuery Cycle options (full list of jQuery Cycle options).  To configure an option, simply include the name of the option as a parameter in the {mojo:imageometer:jquery_cycle} tag (case sensitie).

Example Syntax:

{mojo:imageometer:jquery_cycle slideshow_name="homepage-slideshow" speed="1000" startingSlide="0"}

 

Variable Pairs:

{values}  Variable Pair

The {values} variable pair is used to output all of the slide values created in each slideshow.  All Imageometer variables you wish to output in your template will need to be placed inside of this variable pair. See the examples section for additional information.  Note:  You can have one or more occurences of the {values} variable pair within each Imageometer slideshow tag.

Variables

{image} - The {image} tag will output the URL to the image you selected for each slide in a slideshow. Typically, you will want to place this tag inside of the source attribute of your image tag.

{caption} - The {caption} tag will output the title of the slide.  Placement of this tag will vary depending on which jQuery Slideshow package you are using and how you have configured it.

{additional_text} - The {additional_text} tag will output the description of a slide.  Placement of this tag will vary depending on which jQuery Slideshow package you are using and how you have configured it.

{url} - The {url} tag will output the Link you assigned to a specific slide.  For live links, you will want to place this tag inside of the href attribute of your link tag.


Examples

Nivo Slider Example

{mojo:imageometer:nivo slideshow_name="homepage-slideshow" effect="random" pause_time="5000" animate_speed="500"}
  <div id="homepage-slideshow" class="nivoSlider" style="width: 100px: height: 200px;">
    {values}
      <img src="{image}" title="{caption}" />
    {/values}
  </div>
{/mojo:imageometer:nivo}

Jquery Cycle Example

{mojo:imageometer:jquery_cycle slideshow_name="homepage-slideshow"}
  <div class="homepage-slideshow">
    {values}
      <img src="{image}" />
    {/values}
  </div>

  <div class="referenceTwo">
    {values}
      <p>{caption}</p>
      <p>{additional_text}</p>
    {/values}
  </div>
{/mojo:imageometer:jquery_cycle}

Release Notes

Version 1.0.5
Version 1.0.4

Date: November 12, 2012

Initial Release to Public

Version Includes:
Compatibility for all versions of MojoMotor up to 1.2.1

Support

Have an issue with Imageometer?

Please email us at .(JavaScript must be enabled to view this email address)

Reviews