Gallery SlideShow

Hi,

you can do that very easily using JQuery plug in.

You can download the similar gallery Slide show plug in from below link

http://www.queness.com/post/152/simple-jquery-image-slide-show-with-semi-transparent-caption

http://plugins.jquery.com/project/galleryview

Some more Jquery slide show plugin are available

http://www.leigeber.com/2008/05/ajax-image-gallery-slideshow/

Hope this will help you

Thanks
Amit

Thanks,
Amit
Please "Mark As Answer " if this post help you.

if you want do this type sideshow gallery you can use this code sample

HTML Code

<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>

CSS Code

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;
	}
	

Javascript code

$(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);
		
}

show here complete demo & code
http://speckyboy.com/2009/06/03/15-amazing-jquery-image-galleryslideshow-plugins-and-tutorials/

Please Check my answer if you help....
Thank You...

Lalit.

Hi,

In the site example you have given they have used TINY slide show plugin..for more information about TINY slide show plugin you can refer this article


http://www.leigeber.com/2008/12/javascript-slideshow/

Thanks
Amit

Thanks,
Amit
Please "Mark As Answer " if this post help you.

hi
this is good but in jquery chk it ...and if got this thing in javascript then update here...

http://www.queness.com/post/1450/jquery-photo-slide-show-with-slick-caption-tutorial-revisited

<script language="JavaScript1.1">
<!--




var slidespeed1=4000


var slideimages1=new Array("img/img2_services.jpg","img/imgheader9.jpg","img/imgheader1.jpg","img/imgheader.jpg","img/imgheader.jpg","img/imgheader7.jpg","img/imgheader6.jpg","img/imgheader5.jpg","img/imgheader4.jpg","img/imgheader3.jpg")

var slidelinks1=new Array("","","")

var newwindow1=1 //open links in new window? 1=yes, 0=no

var imageholder1=new Array()
var ie1=document.all
for (i=0;i<slideimages1.length;i++){
imageholder1[i]=new Image()
imageholder1[i].src=slideimages1[i]
}

function gotoshow1(){
if (newwindow1)
window.open(slidelinks1[whichlink1])
else
window.location=slidelinks1[whichlink1]
}

//-->
</script>
</head>
<body>
<img src="img/img2_services.jpg", name="slide1" border="0" style="filter:blendTrans(duration=3); padding-top:1px;" width="400px" height="200px" />
<script language="JavaScript1.1">
<!--

var whichlink1=0
var whichimage1=0
var blenddelay1=(ie1)? document.images.slide1.filters[0].duration*1000 : 0
function slideit1(){
if (!document.images) return
if (ie1) document.images.slide1.filters[0].apply()
document.images.slide1.src=imageholder1[whichimage1].src
if (ie1) document.images.slide1.filters[0].play()
whichlink1=whichimage1
whichimage1=(whichimage1<slideimages1.length-1)? whichimage1+1 : 0
setTimeout("slideit1()",slidespeed1+blenddelay1)
}
slideit1()

//-->
</script>