Daniel setup live video feed for Phil Lesh (Grateful Dead) at the new Terrapin Crossroads, Marin. http://t.co/cdh47ii7
Warp 5 JavaScript Spotlight
This is a short tutorial on how to apply the spotlight effect to a custom html module in your Warp 5.5 based YOOtheme template.
The different effects
Basically you have to choose whether the hovercontent fades in in front of the module content or slides in from the top, bottom, left or right. Depending on this you will set the according class in the next step.
The classes are:
- Fade effect: <div class="spotlight fade">
- Slide in from the bottom: <div class="spotlight bottom">
- Slide in from the top: <div class="spotlight top">
- Slide in from the left: <div class="spotlight left">
- Slide in from the right: <div class="spotlight right">
See next part how to apply the effects to a module.
Add the module code
Basically we can say, that the spotlight effect consists of the surrounding div element and the two html elements in the module code, the first one is shown in the module without hovering, the second one will appear during hovering the first element.
To create the hover effect you will need a custom html module with content. Here an example:
<img src="images/yootheme/home_bottom_spolight1.jpg" width="225" height="225" alt="spotlight" title="spotlight" /> |
Now let´s say, we want to show an additonal text over the image which slides in from the bottom, when you hover the module content.
First we put a new div with the class spotlight bottom around the module content like this:
<div class="spotlight bottom"> |
<img src="images/yootheme/home_bottom_spolight1.jpg" width="225" height="225" alt="spotlight" title="spotlight" /> |
</div> |
Now we have to put the content in the module which should overlay the image during hover. To do so just put the text in the module right under the current content, like this:
<div class="spotlight bottom"> |
<img src="images/yootheme/home_bottom_spolight1.jpg" width="225" height="225" alt="spotlight" title="spotlight" /> |
<div> |
<h3 class="title">Penelope Taylor</h3> |
Model | <em>Houston, TX, USA</em> |
</div> |
</div> |
Please note, that you can only have two html elements on the first layer of the module content, in our exampe it is one image and one div element.
Of course you can not only apply the spotlight effect to an image and put a div in the hovercontent, you also can have a div element in your module and fade or slide in another div or an image, it´s up to you!
Now, when you hover the image in the module, the text will slide in from the bottom in front of the image.
Give it a style
After applying the code to the module and reloading your site you will recognize that the html output of the module has slightly changed. There are two new divs surrounding the two html elements of the spotlight, the first one has the class spotlight0 and the second one has the class spotlight1. With this class you can give the elements new styles using css.
Change the duration of the spotlight effect
The default duration of the spotlight effect, means the time how long the second html element fades or slides in front of the first one, is 300 milliseconds.
To change this, open the file \js\template.js and find the code:
/* Spotlight */ |
$('.spotlight').spotlight(); |
You can add a new duration for the different effects in this line, e.g. if you want to speed up the fade effect to 100 milliseconds duration, change the line like this:
/* Spotlight */ |
$('.spotlight').spotlight({fade: 100}); |
If you additionally want to change the speed of the top slide effect, change it this way:
/* Spotlight */ |
$('.spotlight').spotlight({fade: 100, top: 200});