RokZoom is a custom ground up script written in motools 1.1+ that has the features of RokZoom with an exciting zoom effect transition to give your image galleries and popups an added flair.

The tutorial will take you through the four steps of RokZoom. The first, is how to integrate RokZoom into your template by means of modifying the index.php, CSS and the insertion of javascript and images into your RokWebify Directory. The next step is the process of installing the RokZoom mambot in the Joomla! Administration area. The third is the actual means in which you insert RokZoom into content items. The next section explains how to configure the mambot for your personal preferences. The final section explains how to insert thumbnails

Editing the index.php

• Open your index.php file. This should be contained within the rt_rokwebify folder. A code specific editor such as Adobe Dreamweaver or TextMate are perfect for making changes, but any text editor will do the trick.

  

• In your index.php, locate
  <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />. You will be inserting the following codes below this statement.

  <script type="text/javascript" src="
  <?php echo $mosConfig_live_site;?>
  /templates/<?php echo $mainframe->
  getTemplate(); ?>/js/mootools.js">
  </script>
  
  
  <script type="text/javascript" src="
  <?php echo $mosConfig_live_site;?>
  /templates/<?php echo $mainframe->
  getTemplate(); ?>/rokzoom/rokzoom.js">
  </script>
  
  
  <script type="text/javascript">
  window.addEvent('load', function() {
  RokZoom.init({
  imageDir: 'templates/<?php echo $mainframe->
  getTemplate(); ?>/rokzoom/images/',
  resizeFX: {
  duration: 700,
  transition: Fx.Transitions.Cubic.easeOut,
  wait: true
  },
  opacityFX: {
  duration: 500,
  wait: false 
  }
  });
  });
  </script>
  
  
  <link href="<?php echo $mosConfig_live_site;?>/templates/
  <?php echo $mainframe->getTemplate(); ?>/rokzoom/rokzoom.css" 
  rel="stylesheet" type="text/css" />
  

Transfer the files/folders

• Navigate into the rt_rokwebify directory. Transfer the rokzoom folder from Replicant into this directory. The following files/folders should be included...
  index.html
  rokzoom.css
  rokzoom.js
  /images/
  /images/closelabel.gif
  /images/loading.gif
  /images/prevlabel.gif
  /images/nextlabel.gif
  /images/index.html
  
  /images/spacer.gif
  /images/zoom-shadow1.png
  /images/zoom-shadow2.png
  /images/zoom-shadow3.png
  /images/zoom-shadow4.png
  /images/zoom-shadow5.png
  /images/zoom-shadow6.png
  /images/zoom-shadow7.png
  /images/zoom-shadow8.png
  

  Navigate into the rt_rokwebify directory. Transfer the following files from thejs in Replicant
  
  index.html
  mootools.js
  

  
  Check out the guide for using RokZoom here