Author Topic: Jquery Image swap (Read 2031 times)

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

Jared · « **Reply #1 on:** Tuesday, July 26, 2011, 14:02:26 PM »

Spanky · « **Reply #2 on:** Tuesday, July 26, 2011, 18:00:11 PM »

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

Forum

ASSIST, AMERICA'S ARMY COMMUNITY - RELIVE THE GLORY DAYS OF AMERICA'S ARMY 2.5

Author Topic: Jquery Image swap (Read 2031 times)

Jared

Jquery Image swap

Jared

Re: Jquery Image swap

Spanky

Re: Jquery Image swap

Download Assist

Download Game Client

Download Server Manager