Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Image Slideshow with Semi-Transparent Caption Example

Feb 18, 2013
Introduction:

Here I will explain how to create simple jQuery image slideshow with semi-transparent caption example or simple image slideshow with semi-transparent caption with jQuery in asp.net.

Description:
  
In previous articles I explained
jQuery Simple Slideshow example, jQuery image slideshow with text overlay, jQuery image slideshow with next and previous buttons and many articles relating to JavaScript, jQuery, asp.net. Now I will explain how to create simple jQuery image slideshow with semi-transparent caption in asp.net.

To implement this we need to write the code like as shown below


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery Photo Slider with Semi Transparent Caption</title>
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//Execute the slideShow
slideShow();
});
function slideShow() {
//Set the opacity of all images to 0
    $('#slideshow a').css({ opacity: 0.0 });
//Get the first image and display it (set it to full opacity)
    $('#slideshow a:first').css({ opacity: 1.0 });
//Set the caption background to semi-transparent
    $('#slideshow .caption').css({ opacity: 0.7 });
//Resize the width of the caption according to the image width
    $('#slideshow .caption').css({ width: $('#slideshow a').find('img').css('width') });
//Get the caption of the first image from REL attribute and display it
    $('#slideshow .content').html($('#slideshow 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()', 3000);
}
function gallery() {
//if no IMGs have the show class, grab the first image
    var current = ($('#slideshow a.show') ? $('#slideshow a.show') : $('#slideshow 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')) ? $('#slideshow a:first') : current.next()) : $('#slideshow 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
$('#slideshow .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
$('#slideshow .caption').animate({ opacity: 0.7 }, 100).animate({ height: '100px' }, 500);
//Display the content
$('#slideshow .content').html(caption);
}
</script>
<style type="text/css">
body{
font-family:arial
}
.clear {
clear:both
}
#slideshow {
position:relative;
height:360px
}
#slideshow a {
float:left;
position:absolute;
}
#slideshow a img {
border:none;
}
#slideshow a.show {
z-index:500
}
#slideshow .caption {
z-index:600;
background-color:#000;
color:#ffffff;
height:100px;
width:100%;
position:absolute;
bottom:0;
}
#slideshow .caption .content {
margin:5px
}
#slideshow .caption .content h3 {
margin:0;
padding:0;
color:#1DCCEF;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="slideshow">
<a href="#" class="show">
<img src="http://www.webchief.co.uk//blog/simple-jquery-slideshow/slide1.jpg" alt="1" height="300" rel="<h3>Slide1 Sample</h3>"/>
</a>
<a href="#">
<img src="http://www.webchief.co.uk//blog/simple-jquery-slideshow/slide2.jpg" alt="2"  height="300" rel="<h3>Slide2 Example</h3>"/>
</a>
<a href="#">
<img src="http://www.webchief.co.uk//blog/simple-jquery-slideshow/slide3.jpg" alt="3" height="300" rel="<h3>Slide3 Example</h3>"/>
</a>
<div class="caption"><div class="content"></div></div>
</div>
<div class="clear"></div>
</form>
</body>
</html>
Live Demo

For Live Demo check below slideshow

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

6 comments :

Anonymous said...

Dear this is really a nice blog.
Can we display jQuery Image Slideshow with Semi-Transparent Caption in asp.net from images in sql database?

Anonymous said...
This comment has been removed by a blog administrator.
Unknown said...

nice article.very useful

Anonymous said...

yeah can we do this with database?

Anonymous said...

Nice article. But how to do it with database...

Anonymous said...

this is a great piece of code and it works well.

Question is ...
how can I vary the fonts and effects for each image. In other words, I want to have image one display text in the overlay with font1 and paginiation from the left. I want the second image to display text in the overlay with font2 and pagnition from above.
etc etc etc

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.