|
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:
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>
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.
Navigate to the Article Manager. Once you have logged in, hover over the
Content link on the top taskbar, scroll down to Article 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.
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.
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>
|
Harnessing the power and functionality of the popular RokSlide module, Dimensions offers the ability to present your modules in sliding tabs. Publish multiple modules into to a single tab module position as well as customize the titles that appear in each tab.
Learn more... 
Organize large amounts of information in easy to navigate tabbed panes and reduce the clutter and space needed to display your content. By default, User 7-11 module positions appear in the bottom tabbed module pane. You can also add more module positions if needed.
Learn more... 
All of Dimensions accent colours are CSS based, allowing you to change the colour scheme with just a few quick modifications to the CSS. Use any background image you want, and the top and bottom fades will automatically be applied for a seamless look.
Learn more... 
Styles 1 and 2 have four different time of day stylesets which dynamically change throughout the day based on your users' time. Customize the existing styles, or create your own automatically changing background and color mods.
Learn more... 
With Dimensions, you can use any background image you desire to give your site the character and style you want. Choose any image, set it as your background, and Dimensions will automatically apply top and bottom fades to your background image for a more seamless integration.