After talking a little about GWT, i will start talking a little about jQuery as well and show some sort of animations that can be made using jQuery.
As my first example, we will build a very stylish carrousel, not to just show some image, but also show the features of your site.
You will need:
- some large images for the features background.
- some small images to use as menu items.
- some images with the same height/width as the large one, but transparent with the text you want to show with the background image.
Also if your large image is named photo1.png, the small one should be photo1_small.png and the text image photo1_text.png
we will start by coding the HTML elements of the carrousel:
<div id="main-carrousel">
<div id="shadow"></div>
<img id="text-img" src="/images/foto1_text.png"/>
<div id="bottom">
<div id="controls">
<img src="/images/foto1_small.jpg" class="select"/>
<img src="/images/foto2_small.jpg"/>
<img src="/images/foto3_small.jpg"/>
</div>
</div>
</div>
The div main-carrousel will have in it's background the current feature image.
The div shadow will give the transition effect
The img text-img will have the image with the text of the feature.
The div bottom will hold the controls to change the feature.
Now the javascript code:
$(function(){
var carrousel = $("#main-carrousel");
if (carrousel != null && carrousel != undefined){
$("#controls img").each(function(){
$(this).click(function(){
if (!$(this).hasClass("select")){
var photoUrl = "url("+ $(this).attr("src").replace(/_small/,"") +")";
var textUrl = $(this).attr("src").replace(/_small/,"_text").replace(/jpg/,"png");
$("#text-img").fadeOut("fast",function(){
$(this).attr("src",textUrl);
$("#shadow").fadeIn("fast",function(){
carrousel.css("background-image",photoUrl);
$("#shadow").fadeOut("fast",function(){
$("#text-img").fadeIn("slow");
});
});
});
$("#controls .select").removeClass("select");
$(this).addClass("select");
}
});
});
}
});
Well, we start by getting all the images in the "controls" div.
For each one we add a listerner to the "click" action where our magic will happen.
In this function we confirm if the current item is the not one selected.
After we find the photo url by removing the "_small" from the src of the img. Also we find the text image by replacing the "_small" with "_text".
Now that we know the new urls we start the animation.
First we fade out the text image and replace its src attribute with the new text-img url.
the we fade in the shadow div, so we can update the main-carrousel background with the new image url.
After we fade out the shadow div and fade in the text image.
To speed up the images loading process you can create a invisible div to pre-load the images.
<div id="pre-loader" style="display:none">
<img src="/images/foto1.jpg"/>
<img src="/images/foto2.jpg"/>
<img src="/images/foto3.jpg"/>
</div>
You can also style the carrousel, here is an example:
#main-carrousel{
width:700px;
height:300px;
background:#fff url(/images/foto1.jpg) no-repeat;
position:relative;
top:-25px;
margin:0 auto;
border:1px solid #999;
}
#shadow {
width:100%;
height:100%;
background:#DDD;
display:none;
}
#bottom {
position:absolute;
bottom:0;
width:100%;
height:50px;
background:url(/images/transpBlack25.png);
}
#controls {
float:right;
padding-top:10px;
padding-right:10px;
}
#controls img {
margin-left:10px;
float:left;
cursor:pointer;
}
.select {
border:3px solid #DDD;
margin-top:-3px;
}
you can see it live at http://brunogb.appspot.com
Hope you enjoyed it.
