RokZoom is a custom ground up script written in motools 1.1+ that has the features of slimbox with an exciting zoom effect transition to give your image galleries and popups an added flair. Replicant fully integrates the JavaScript and the CSS for RokZoom so all you have to do to utilize this technique is install the RokZoom mambot and add an extra element to your image link.

Check out the demo below:

RokZoom is now easier than ever! We've created a new GPL mambot that is WYSIWYG safe and doesn't require you to enter any HTML code directly as the previous solution did.

The Syntax is {rokzoom}image_url{/rokzoom} If you want the image to be part of an 'album', you can use the syntax {rokzoom album=|albumname|}image_url{/rokzoom}. To provide text descriptions, please use the syntax {rokzoom title=|your description|}image_url{/rokzoom}. you can also use both album and title in the same tag.

{rokzoom album=|colo|}images/stories/colorado/image1.jpg{/rokzoom}
{rokzoom album=|colo| title=|some title|}
  images/stories/colorado/image4.jpg{/rokzoom}
{rokzoom}images/stories/colorado/image3.jpg{/rokzoom}

The above syntax only operates when the RokZoom mambot is enabled. Therefore, if you do not have the mambot or wish to have more control over the rokzoom script than the mambot provides, there is still the HTML option. The syntax below is the code form of the examples shown above.

<a href="images/stories/colorado/image1.jpg" rel="rokzoom[colroado]" title="Image 1">
<img src="images/stories/colorado/image1_tn.jpg" alt="image1" class="album" /></a>

An exemplified preview is constructed below to aid your understanding of the HTML format of rokzoom

<a href="main image url(relative path)" rel="rokzoom[album name]" title="Title in popup">
<img src="thumbnail url(relative)" alt="Image name" class="album" /></a>

Using the RocketTheme RokZoom Mambot

The new RocketTheme RokZoom mambot helps to dynamically create Photo galleries with minimal effort from yourself. This great utility also produces thumbnails of your selected photos/images, which, on selection, generate the whole image/photo in a javascript based window. It is the perfect tool to showcase photographs and other gallery images in a professional environment.

How to implement RokZoom

RokZoom galleries or single images can inserted in Content, Static Content and Custom modules. By utilising a few simple commands, you can easily insert a gallery onto your page. For this tutorial, we will be using the TinyMCE editor and be inserting rokzoom images into a Static Content Item. The precedure is indentical with ordinary content and custom module.

• Login to the Joomla! Administration Control Panel
  
  Either, use the Administrator link on your mainmenu when you are logged into the Frontend of your website or use the direct web address of the Administrator Control Panel, www.yoursite.com/administrator. Enter the Administrator's Username and password.
  
  
• Navigate to the Static Content Manager
  
  Once you have logged in, hover over the Content link on the top taskbar, scroll down to Static Content Manager.
  
  
• The Static Content Manager
  
  When you have selected the Static Content Manager link, you will be sent to the Static Content Manager control panel. Select either Edit or New, depending on whether you want to add typography to an existing or new item.
  
  
• The RokZoom Commands
  
  To add rokzoom galleries into your content, you must enter code the following into your Content editor. The image url is a relative URL. The relation is to the images/stories directory on your Joomla! install.
  
  {rokzoom}image_url{/rokzoom}
  The above refers to a single image being loaded by rokzoom.
  
  {rokzoom title=|your description|}image_url{/rokzoom}
  The above refers to an image being loaded by rokzoom with a title and a description.
  
  {rokzoom album=|albumname|}image_url{/rokzoom}
  The above refers to an image being loaded by rokzoom in an album. For example, if 2 images had the same album and albumname, you would be able to navigate to it through the javascript window.
  
  
• The Examples
  
  For the examples of the rokzoom command, all images are located within the directory images/stories/photos. If we wanted to load image1.jpg by itself, we would enter:
  
  {rokzoom}images/stories/photo/image1.jpg{/rokzoom}
  
  
  
  If we wanted to load photo1.jpg, photo2.jpg and photo3.jpg as part of an album, we would use the following syntax:
  
  {rokzoom album=|colo|}images/stories/photo/image1.jpg{/rokzoom}{rokzoom album=|colo|}images/stories/photo/image2.jpg{/rokzoom}{rokzoom album=|colo|}images/stories/photo/image3.jpg{/rokzoom}}.
  
  Remember, if you place the rokZoom tags next to one another, they will load side by side.
  
  

Navigating to the RokZoom settings

• To change the settings, hover over Mambots on the top taskbar. This will highlight Site Mambots which you will select. You will then be taken to the Mambot Manager. You will notice the Mambot called, "RokZoom". Select the name to edit the bot.
  
  
• The Settings
  
  The screenshot below shows you all the configurable options that RokZoom is capable of. The mambot itself allows you to switch between the latest RokZoom script or the other popular scripts, Slimbox, Litebox and Lightbox.
  The thumbnail extension field controls what suffix, the thumbnails shall take. For example, image.jpg with the default settings will have a thumbnail, named image_thumb.jpg
  Thumbnail class refers to the CSS of the script itself, the default is set to album.
  The following field gives you the option to have a directory for your thumbnails
  Custom thumbnail directory is the name given to the folder where the thumbnails are stored if the above setting is activate.
  The last settings control the width, height and quality of the thumbnails themselves.
  
  

The Thumbnails

• The latest Rokzoom allows you to create custom thumbnails as well as the automated precedure witnessed in previous versions.

  The process itself is extremely simple. You need to create 2 images. The first, for example photo1.jpg will be the main image that will be loaded in the RokZoom Screen. The second, will be the custom thumbnail, it must contain the suffix _thumb or the suffix you defined in the Mambot configuration.

  The images need to be contained within the same directory as your main images unless defined in a thumbnails only folder as seen in the Configuration for the mambot.
  
  Therefore, in the container where your images are stored, you should see photo1.jpg and photo1_thumb.jpg Ensure that your images, that you wish to load with RokZoom, are larger than the parameters set in the Mambot's configuration