| Drucken |

Typography

Geschrieben am Dienstag, den 29. Juni 2010 um 20:19 Uhr

RokZoom Enabled PDF Print E-mail

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:

sample image1 sample image1 sample image3 sample image4 sample image5 sample image6 sample image7 sample image8

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.

RokZoom

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.

RokZoom

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.
RokZoom

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.
RokZoom

The Examples

RokZoom 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>



RokZoom 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>


This page shows all of the typography styles and settings for HiveMind in action. If you would like to read more detailed information on inserting the included typography into your content, check out the HiveMind Typography Tutorial.

sIFR Integration

HiveMind features sIFR integration for the modular titles. Normally, you only have a small selection of fonts available for your website as it needs to be a standard font. With sIFR, you use flash to show non-standard fonts on your websites, perfect for that refined finish to your website. If you wish to activate sIFR on the demo, click here, you can deactivate SIFR by clicking here. The following fonts are available by default with the template, click to preview on the demo.
You activate all the fonts and/or sIFR from the Template Manager file.

Font Control

Similarly to the the sIFR font control, you also have the option of simply switching the font of all the text in the template with the following setting in Template Manager (select the font name to preview):-
Font Family: geneva | optima | helvetica | trebuchet | lucida | georgia | palatino

This is a ComponentHeading

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

This is a Contentheading

Proin ac nunc eu nunc condimentum accumsan. Phasellus odio justo, euismod vitae, egestas a, porttitor in, urna. Maecenas vitae mauris. Donec vestibulum, nunc eu varius pharetra, massa est sagittis odio, sit amet eleifend elit dolor id tortor.

This is an H1 Header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sit amet odio quis sapien molestie ultrices. Vivamus quis lectus. Praesent eu mi. Curabitur pharetra leo sed nisl. Nunc vel nisi. Aliquam nulla. Etiam at est. Pellentesque arcu diam, tempus nec, sodales eu, ullamcorper quis, risus.

Notice Styles are shown below
This is a sample of the 'alert' style. Use this style to denote very important information to your users. To use this use the folllowing html: <span class="alert">....</span> This is a sample of the 'info' style. Use this style to denote pieces of information or tips for your readers and visitors. To use this use the folllowing html: <span class="info">....</span> This is a sample of the 'note' style. Use this style to denote items in your content that you would like your users to note or pay attention to. To use this use the folllowing html: <span class="note">....</span> This is a sample of the 'download' style. Use this style to denote information containing a download or information about an available download on your site. To use this use the folllowing html: <span class="download">....</span>

This is an H2 Header

Proin ac nunc eu nunc condimentum accumsan. Phasellus odio justo, euismod vitae, egestas a, porttitor in, urna. Maecenas vitae mauris. Donec vestibulum, nunc eu varius pharetra, massa est sagittis odio, sit amet eleifend elit dolor id tortor.

This is an H3 Header

Mauris euismod. In ac massa vitae quam tincidunt dapibus. Ut at tortor nec mi mattis blandit. Maecenas venenatis lorem at nulla. Phasellus a libero. Sed odio odio, eleifend dignissim, feugiat vel, tempor nec, ligula. Suspendisse lacinia convallis nulla. Vestibulum posuere, lacus aliquet pulvinar faucibus, tortor urna luctus diam, vitae ultrices ante magna non tellus.

This is an H4 Header

This is a sample <pre>...</pre> tag:

div.modulebox-black div.bx1 {
  background: url(../images/black/box_bl.png) 0 100% no-repeat; 
}

div.modulebox-black div.bx2 {
  background: url(../images/black/box_tr.png) 100% 0 no-repeat;
}

div.modulebox-black div.bx3 {
  background: url(../images/black/box_tl.png) 0 0 no-repeat;
  padding: 0;
  margin: 0;
}

This is a sample blockquote (use <blockquote><p>....</p></blockquote>)

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

This is a sample blockquote with class 'b' (use <blockquote class="b">....</blockquote>)

Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

List Styles - Color Icons

Below is a list with media#. To use this style create a list in the following format: <ul class="icon-1...icon-6"><li>....</li><li>....</li>...</ul>

List Styles - Bullets

Below is a list with bullets. To use this style create a list in the following format: <ul class="class name"><li>....</li><li>....</li>...</ul>

List Styles - Bullets

Below is a list with standard bullets. To use this style create a list in the following format: <ul class="class name"><li>....</li><li>....</li>...</ul>

List Styles - Number

Below is a list with number. To use this style create a list in the following format: <ul class="number"><li class="number-1">....</li><li class="number-9>....</li>...</ul>