Webmaster always strives to show their websites more attractive to users. You can use Slideshows to show gallery/images/pictures, News contents etc., Here is a simple Slideshow using CSS, Jquery and Javascript. Here we have used picture slideshow as it looks good. You can use it for your own needs. Its very simple in 3 easy steps.
Requirements : jquery-1.5.min.js, jquery.cycle.all.js (Jquery Plugin)
Click the Like button below to view the Demo and download link…
Step 1 : Include Below stylesheet in the head section of your html template
<style type=”text/css”>
.pics h2 span{
width:88%;
position: absolute;
margin-left: 10px;
margin-bottom: 26px;
bottom: 6px;
color: white;
font: bold 16px Arial, “Trebuchet MS”, Verdana, Tahoma;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 0 10px 10px 10px;
}
.pics {
height: 272px;
width: 342px;
padding: 0;
margin: 0;
overflow: hidden;
position: relative;
}
.pics img { height: 250px; width: 320px; padding: 10px; border: 1px solid #ccc; background-color: #eee; top:0; left:0 }
.pics img {
-moz-border-radius: 10px; -webkit-border-radius: 10px;
}
</style>
Step 2 : Include Jquery version 1.5 (This is the version we have tested) and jquery.cycle.all.js (Jquery Cycle Lite Plugin) in the head section of your HTML Template
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js”></script>
<script type=”text/javascript” src=”http://malsup.github.com/jquery.cycle.all.js”></script>
<script type=”text/javascript”>
$.fn.cycle.defaults.timeout = 6000;
$(‘#s1’).cycle({
fx: ‘fade’,
sync: 0,
delay: -4000
});
</script>
Here, you can change the “delay” time for how quick/slow photos should load.
Step 3 : Construct a div which holds the pictures. Add the below content in the body section of your HTML Template
<div id=”s1″ class=”pics”>
<div>
<a href=”http://techglimpse.com/index.php/lg-announces-5-inch-display-smartphone-440-ppi.php”> <img src=”https://techglimpse.com/wp-content/uploads/2012/05/lg-5-inch-smartphone-display-technology.jpg” alt=”” width=”320″ height=”250″ /></a>
<h2><span>LG announces 5 inch display….</span></h2>
</div>
<div><div id=”s1″>
<div>
<a href=”http://techglimpse.com/index.php/nokia-lumia-710-london-markets.php”> <img src=”https://techglimpse.com/wp-content/uploads/2011/10/nokia-lumia-710.jpg” alt=”” width=”320″ height=”250″ /></a>
<h2><span>Nokia Lumia 710 in….</span></h2>
</div>
<div><div id=”s1″>
<div>
<a href=”http://techglimpse.com/index.php/google-virtual-brain-neural-networks.php”> <img src=”https://techglimpse.com/wp-content/uploads/2012/10/Google-_-Advanced-AI1.png” alt=”” width=”320″ height=”250″ /></a>
<h2><span> Smart INSECT- Toyota.s cloud-enabled…. </span></h2>
</div>
<div><div id=”s1″>
<div>
<a href=”http://techglimpse.com/index.php/smart-insect-toyota-electric-car-concept.php”> <img src=”https://techglimpse.com/wp-content/uploads/2012/10/style-doors.jpg” alt=”” width=”320″ height=”250″ /></a>
<h2><span> Google.s creates advanced AI for….</span></h2>
</div>
<div>
Here, you can put the title of the photo or description about the photo in between the h2 span tags.
Thanks to Jquery Cycle Lite Plugin as we have used it in this example. For different transitions and animations look at the above website.
