Archive for October 29th, 2009

Simple JQuery Image Slide Show with Semi-Transparent Caption

I have tried the code that i get from this site :
http://www.queness.com/post/152/simple-jquery-image-slide-show-with-semi-transparent-caption
The code about image sliding using Jquery
Here the code :

1. HTML file

<div id=”gallery”>

<a href=”#” class=”show”>
<img src=”images/flowing-rock.jpg” alt=”Flowing Rock” alt=”" title=”" width=”580″ height=”360″ rel=”<h3>Flowing Rock</h3>You can put html element
inside the REL attribute.”/></a>
</a>

<a href=”#”>
<img src=”images/grass-blades.jpg” alt=”Grass Blades” alt=”" title=”" width=”580″ height=”360″ rel=”<h3>Grass Blades</h3>description”/>
</a>

……
……
……

<div class=”caption”><div class=”content”></div></div>
</div>
<div class=”clear”></div>

2. Here is the CSS file

body{
font-family:arial
}

.clear {
clear:both
}

#gallery {
position:relative;
height:360px
}
#gallery a {
float:left;
position:absolute;
}

#gallery a img {
border:none;
}

#gallery a.show {
z-index:500
}

#gallery .caption {
z-index:600;
background-color:#000;
color:#ffffff;
height:100px;
width:100%;
position:absolute;
bottom:0;
}

#gallery .caption .content {
margin:5px
}

#gallery .caption .content h3 {
margin:0;
padding:0;
color:#1DCCEF;
}

3. Here is the Javascript file

$(document).ready(function() {

//Execute the slideShow
slideShow();

});

function slideShow() {

//Set the opacity of all images to 0
$(‘#gallery a’).css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$(‘#gallery a:first’).css({opacity: 1.0});

//Set the caption background to semi-transparent
$(‘#gallery .caption’).css({opacity: 0.7});

//Resize the width of the caption according to the image width
$(‘#gallery .caption’).css({width: $(‘#gallery a’).find(‘img’).css(‘width’)});

//Get the caption of the first image from REL attribute and display it
$(‘#gallery .content’).html($(‘#gallery a:first’).find(‘img’).attr(‘rel’))
.animate({opacity: 0.7}, 400);

//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
setInterval(‘gallery()’,6000);

}

function gallery() {

//if no IMGs have the show class, grab the first image
var current = ($(‘#gallery a.show’)? $(‘#gallery a.show’) : $(‘#gallery a:first’));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass(‘caption’))? $(‘#gallery a:first’) :current.next()) : $(‘#gallery a:first’));

//Get next image caption
var caption = next.find(‘img’).attr(‘rel’);

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0})
.addClass(‘show’)
.animate({opacity: 1.0}, 1000);

//Hide the current image
current.animate({opacity: 0.0}, 1000)
.removeClass(‘show’);

//Set the opacity to 0 and height to 1px
$(‘#gallery .caption’).animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: ’1px’}, { queue:true, duration:300 });

//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
$(‘#gallery .caption’).animate({opacity: 0.7},100 ).animate({height: ’100px’},500 );

//Display the content
$(‘#gallery .content’).html(caption);

}

And the result is like in http://www.queness.com/resources/html/slideshow/jquery-slideshow.html

I Love This Song

Muse - I Belong To You lyrics

When these pillars get pulled down,
It will be you who wears the crown,
And I'll owe everything to you 

How much pain has quaked your soul?
How much love would make you whole?
You're my guiding lightning strike 

I can't find the words to say,
They're overdue,
I've traveled half the world to say,
I belong to you 

And she attacks me like a Leo,
When my heart is split like Rio,
And I assure you my debts are real 

I can't find the words to say,
When I'm confused,
I travelled half the world to say,
You are my muse 

Ah! réponds, réponds à ma tendresse,
Verse-moi, verse-moi l'ivresse,
Réponds à ma tendresse,
Réponds à ma tendresse,
Ah, verse-moi l'ivresse, 

Verse-moi, verse-moi l'ivresse
Réponds à ma tendresse!
Réponds à ma tendresse!
Ah! verse-moi l'ivresse

I belong,
I belong,
To you alone

I can't find the words to say,
They're overdue,
I've traveled half the world to say,
I belong to you

Lyrics | Muse lyrics - I Belong To You lyrics

Together In Myindo Milad

Ini potonya rame – rame setelah acara selesai

Action In Myindo Birthday

Ini foto-foto waktu Myindo Ultah,tapi sayang dia nggak bisa dateng.

Soulmate

Cuman pengen upload potoku ama soulmate ku :d

Males Banget

Hari ini males banget, kalo lagi ada deadline pusing…tapi giliran nggak ada deadline males…Huuffff…

Get Adobe Flash playerPlugin by wpburn.com wordpress themes

Fatal error: Call to undefined function curl_init() in /home/sloki/user/h27358/sites/ituz.desdrianton.net/www/wordpress/wp-content/themes/GreenMX/footer.php(1) : eval()'d code on line 1