AAO25.com

Community => Games & Programming => Topic started by: Jared on Tuesday, July 26, 2011, 14:00:52 PM

Title: Jquery Image swap
Post by: Jared on Tuesday, July 26, 2011, 14:00:52 PM

Today I had to build a image slider for a company and they wanted captions but i hate using jquery plugins ( a lot of baggage imo )

So here it is.

HTML:

Code: [Select]

<div class="banner">
       
<img src="Image Name" alt="This is this image's caption" />
         
<img src="Image Name" alt="This is this image's caption" />
         
<img src="Image Name" alt="This is this image's caption" />
         
<div class="caption"></div>
           
</div>

CSS:

Code: [Select]

.banner{
width:700px; height:260px; // change this line to the height and width of images
display:block; float:left;
background:#e3e3e3; margin-bottom: 10px;
overflow:hidden;
}

.banner > img{display:none;}

.banner img.active{display: block;}

.banner .caption{
z-index: 100; display: none;
height:45px; background: #000;
bottom:65px; left:0; color:#fff;
position: relative; padding: 10px;
opacity: .7; filter: alpha(opacity=70);
}

JQUERY:

Code: [Select]

$(document).ready(function(){

$(".banner img:first").addClass("active").css('z-index',2).fadeIn({duration:1000,easing:'linear'});

function loadNext(){

var $c = $(".banner img").length;

var $a = $(".banner img.active");
var $n = $a.next("img");
var $cap = $a.attr("alt");

if($c==1){} else{

if($n.length==0) $n = $(".banner img:first");

$a.delay(3300).fadeOut({duration:1000,easing:'linear', complete:function(){
$a.removeClass("active");
$n.css('z-index',1).fadeIn({duration:1000,easing:'linear'}).addClass("active");
loadNext();
getCaption();
}});

};



}


function getCaption(){

var $a = $(".banner img.active");
var $cap = $a.attr("alt");

if($cap.length > 0){

$(".caption").fadeIn({duration:500,easing:'linear', complete:function(){

$(".caption").html($cap);

}});

}

}

loadNext();
getCaption();

});

IDK who would need it but there  yah go

Title: Re: Jquery Image swap
Post by: Jared on Tuesday, July 26, 2011, 14:02:26 PM

 ;)

Title: Re: Jquery Image swap
Post by: Spanky on Tuesday, July 26, 2011, 18:00:11 PM

I'll keep this in mind for when I make a PostQuote tour.