Note utilisateur: 0 / 5

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. HiveMind 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:

The Syntax

Below is the HTML syntax that you will have to use. Simply place this into your articles.

<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">
<img src="thumbnail url(relative)" 
alt="Image name" class="album" />
</a> 

RokZoom - The Guide

How to implement RokZoom

RokZoom galleries or single images can be inserted in Content and Custom modules. By utilising a few simple commands, you can easily insert a gallery onto your page.

Step 1 - Login

Login to the Joomla! Administration Control Panel. Go to www.yoursite.com/administrator. Enter the Administrator's Username and password.

Step 2 - Navigation

Navigate to the Article Manager. Once you have logged in, hover over the Content link on the top taskbar, scroll down to Article Manager.

Step 3 - Article Content Manager

When you have selected the Article Manager link, you will be sent to the Article Manager control panel. Select either Edit or New, depending on whether you want to add rokzoom to an existing or new item.

Step 4 - RokZoom Commands

You now need to enter the syntax into your content editor. This should resemble the screenshot below. The syntax, in both HTML can be found at the section located here.

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:

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

If we wanted to load photo1.jpg, photo2.jpg and photo3.jpg as part of an album, we would use the following syntax:

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

<a href="images/photos/image2.jpg" rel="rokzoom[photo]" title="Image 1">
<img src="images/photos/image2_tn.jpg" alt="image1" class="album" />
</a>

<a href="images/stories/photos/image3.jpg" rel="rokzoom[photo]" title="Image 1">
<img src="images/stories/photos/image3_tn.jpg" alt="image1" class="album" />
</a>

Note utilisateur: 0 / 5

$default_style = "light"; [light... dark]

The light and dark styles are featured below, click on the thumbnails to load the color scheme and see it in action.

Note utilisateur: 0 / 5

HiveMind continues the chain of impressive, revolutionary, yet functional RocketTheme templates. It combines incredible styling with refined and powerful code to help your website achieve its maximum potential.

• Preset Style Options
  HiveMind includes both a light and dark color style for you to use on your site along with a plethora of different hilites for your modules. Five distinct menu styles also allow for nice flexiblity of your site's look and feel.
• 5 Menu Style Options
  HiveMind includes five different menu styles for you to use on your site, giving you total control on how you want your menu to look.
• Integrated RokSlide Tabbed Modules
  You will observe that the modular positions, User7 through User 11 are contained within what appears to be RokSlide. In HiveMind, the RokSlide effect/functionality has been integrated directly into the template, providing a sleek stylish approach for extra modules, allowing you to created tabbed modules and tabbed module groups.
• RokHeadRotator
  RokHeadRotator is a new custom mootools image rotator that displays your images in a beautiful crossblending fashion. The RokHeadRotator also includes small buttons allowing your visitors to toggle through the different images or pause the display. See it in action on the home page of the demo.
• Stylish Typography
  HiveMind includes professionally styled typography to bring that extra element to your content. Choose from several typography options including various list styles which not only can have their colours easily changed from the CSS, but also will work anywhere in your template body including modules using a suffix.
• Versatile Layout
  HiveMind allows you to switch the side column to either be on the left or right side to suit your preference as well as set the overall width of your site.
• 17 Module Positions
  With a Module Position count of 17, as well as support for many more using the new tabbed module functionality, you will be able create a wide variety of layout options and methods for presenting your site's content.
• Menu Extravaganza
  The new RokMooMenu is now accompanied by its predecessor, Suckerfish in a toggle option so you can easier interchange for maximum compatibility. The popular and versatile SplitMenu is also availble and can be seen in action on this demo by default. 5 Distinct menu styles are included for both light and dark variations and will work with either RokMooMenu, Suckerfish, or Splitmenu menu configurations.