Login



Lost Password? Create An Account
Demos

Search Our Knowledgebase

  • Joomla
  • Video
  • WordPress
Or ask a question in our official product support forum boards

Javascript Effects

This tutorial will guide you through how to setup and enable javascript elements such as multibox, tooltips, lazy load and more.

Multibox

  • Supports a range of multimedia formats: images, flash, video, mp3s, html!
  • Auto detects formats or you can specify the format
  • Html descriptions
  • Grouping of images, videos, etc
  • Enable/Disable page overlay when multibox pops up (via template parameters)
  • Enable/Disable controls (via template parameters)

To enable multibox use the following around any image. Below are 3 examples of multibox used on some images:


<a href="http://www.shape5.com/demo/images/multibox1_lrg.jpg" id="mb1" class="s5mb" title="Image Example #1:">
	<img src="http://www.shape5.com/demo/images/multibox1.jpg" class="boxed" alt="" />
</a>
<div class="s5_multibox mb2">Multiple Image #1. It can support <strong>html</strong>.</div>

<a href="http://www.shape5.com/demo/images/multibox2_lrg.jpg" id="mb2" class="s5mb" title="Image Example #2:">
	<img src="http://www.shape5.com/demo/images/multibox2.jpg" class="boxed"alt="" />
</a>
<div class="s 5_multibox mb3">Multiple Image #2. It can support <strong>html</strong>.</div>

<a href="http://www.shape5.com/demo/images/multibox3_lrg.jpg" id="mb3" class="s5mb" title=" Image Example #3:">
	<img src="http://www.shape5.com/demo/images/multibox3.jpg" clas s="boxed" alt="" />
</a>
<div class=""s5_multibox mb4">Multiple Image #3. It can support <strong>html</strong>.</div>



How to group the above images?

To group images you simply add in a name to the rel tag, which is called inside of the <a>. You can make up any name but just be sure to use that same name in all the images you want to show in a particular group. For example to add images under a group named called "firstset" you would do the following using rel="[firstset]" on each item:


<a href="http://www.shape5.com/demo/images/multibox1_lrg.jpg" id="mb1" rel="[firstset]"
class="s5mb" title="Grouped Image Example #1:"> <img
src="http://www.shape5.com/demo/images/multibox1.jpg" class="boxed" alt="" /> </a> <div class="s5_multibox mb2">Multiple Image #1. It can support <strong>html</strong>.</div>

<a href="http://www.shape5.com/demo/images/multibox2_lrg.jpg" id="mb2" rel="[firstset]"
class="s5mb" title="Grouped Image Example #2:"> <img
src="http://www.shape5.com/demo/images/multibox2.jpg" class="boxed" alt="" /> </a> <div class="s5_multibox mb3">Multiple Image #2. It can support <strong>html</strong>.</div>

<a href="http://www.shape5.com/demo/images/multibox3_lrg.jpg" id="mb3" rel="[firstset]"
class="s5mb" title="Grouped Image Example #3:"> <img
src="http://www.shape5.com/demo/images/multibox3.jpg" class="boxed" alt="" /> </a> <div class="s5_multibox mb4">Multiple Image #3. It can support <strong>html</strong>.</div>


Youtube Example:

You can use the following video formats: flv, mov, wmv, real and swf. Just insert the URL to the videos in the href of the hyperlink, here is an example of how we did this for a Youtube video:

<a href="http://www.youtube.com/embed/VGiGHQeOqII" id="youtube" class="s5mb"
title="Youtube.com Video"> Youtube.com Video - CLICK ME </a> <div class="s5_multibox
youtube">Optional Text </div>


How to grab proper youtube video URL?:

YouTube Tutorial: Simply right click on a youtube video and copy the embed code, then paste into a text editor and look for the embed src and use that URL in your hyperlink. You'll get something like the below:

<embed src=http://www.youtube.com/v/VGiGHQeOqII


Then change it to the below. Just simply swap the "v" with "embed". You need to do this for Apple devices or else the video won't show up on them:

<embed src= http://www.youtube.com/embed/VGiGHQeOqII


Vimeo Example:

You can use the following video formats: flv, mov, wmv, real and swf. Just insert the URL to the videos in the href of the hyperlink, here is an example of how we did this for a Vimeo video:

<a href="http://player.vimeo.com/video/107825735" id="youtube" class="s5mb"
title="Vimeo.com Video"> Vimeo.com Video - CLICK ME </a> <div class="s5_multibox
youtube">Optional Text </div>


How to grab proper Vimeo video URL?

Vimeo Tutorial: Simply click share and copy the embed code, then paste into a text editor and look for something like the below:

<iframe src="//player.vimeo.com/video/107825735?badge=0" width="500" height="281" 


Then change it to the below. Just simply add in "http:"

<href="http://player.vimeo.com/video/107825735"


How to change height and width of popup?

Simply add the rel tags as shown below:

<a href="http://www.youtube.com/embed/VGiGHQeOqII" id="youtube" rel="width:800,height:447" class="s5mb"
title="Youtube.com Video"> Youtube.com Video - CLICK ME </a> <div class="s5_multibox
youtube">Optional Text </div>


How to get YouTube video working on iPhone/iPads?

Just change the "v" to "embed":

<a href="http://www.youtube.com/embed/VGiGHQeOqII" id="youtube" rel="width:800,height:447" class="s5mb"
title="Youtube.com Video"> Youtube.com Video - CLICK ME </a> <div class="s5_multibox
youtube">Optional Text </div>


MP3 Example:

<a href="http://www.shape5.com/demo/images/music.mp3" id="mb8" class="s5mb"
title="Music">MP3 example</a> <div class="s5_multibox mb8">mp3 example - CLICK ME</div>


iFrame Example:

<a href="http://www.getfirebug.com" rel="width:790,height:600,[iframe]" id="mb28" class="s5mb"
title="http://getfirebug.com/">iFrame/HTML Example - CLICK ME</a> <div class="s5_multibox
mb28">getfirebug.com</div>

Lazy Load

The lazy load script is a great way to save bandwidth and load your pages much faster. Images that are not visible on the initial page load are not loaded or downloaded until they come into the main viewing area. Once an image comes into view it is then downloaded and faded into visibility.

Setup is very easy! By default this script is disabled, in order to enable it simply choose All Images or Individual Images from the drop down, as shown below from inside the template configuration page.



"All Images" will load every standard image on the page with lazy load. There is no extra configuration or extra code to add with this configuration, it will just happen automatically. Individual images would be used if you want only certain images to load with this script and not all of them. To do this simply add class="s5_lazyload" to the image like this:

<img class="s5_lazyload" src="image.jpg"></img>

Tooltips

Note - The tool tips script is by default disabled. If you wish to use it you must enable this script in the template's configuration area. This also includes site shaper installations.

Single Image:


<a onmouseover="Tip('This is a sample tooltip.', WIDTH, 140, OPACITY, 80, ABOVE, true,
OFFSETX, 1, FADEIN, 200, FADEOUT, 300,SHADOW, true, SHADOWCOLOR,
'#000000',SHADOWWIDTH, 2, BGCOLOR, '#000000',BORDERCOLOR, '#000000',FONTCOLOR,
'#FFFFFF', PADDING, 9)" href="http://www.shape5.com/demo/etensity/">
<img class="boxed2" alt="" src="http://www.shape5.com/demo/smart_blogger/images/tooltip.jpg"/>
</a>



Image with Tooltip:

<a href="/demo/salon_n_spa/index.htm" onmouseover="Tip('Image Demo 
<img src=http://www.shape5.com/demo/smart_blogger/images/tooltip.jpg width=220
height=147>')">Demo 2 Image Tool Tip </a>



Image with Tooltip:

<a href="#" onmouseover="Tip('Image Demo<br /> <br /><img
src=http://www.shape5.com/demo/smart_blogger/images/tooltip.jpg width=220
height=147>',SHADOW, true, BGCOLOR, '#000000', FADEIN, 400, FADEOUT, 400,
SHADOWCOLOR, '#000000', BORDERCOLOR, '#000000',OPACITY, 90,FONTCOLOR,
'#FFFFFF')"><strong>Demo 3 Image Tool Tip</strong></a>

Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $49 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.