How to create a jQuery Headline Changer « Depot webdesigner – Tutorials and more resources for webdesigner

Email Subscription

How to create a jQuery Headline Changer

August - 11 - 2010 by Arbaoui Mehdi

Author: Arbaoui Mehdi

Hi, I'm Arbaoui Mehdi. I'm the editor of Depotwebdesigner and Codamaniacs,the Site Manager of both Tutoslinux, and Rabbitemplate. I spend too much time in front of the computer.

Contact Author : support@depotwebdesigner.com

Create a nice slideshow with the jQuery library, for a simple scrolling images.
Tested in IE7, IE8, Firefox, Opera, Safari and Chrome.

Code Html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="screen" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/slideshow.js"></script>
<title>Slide show jquery (jQuery Headline Changer) - Depot Webdesigner</title>
</head>
<body>
<h1 align="center">jQuery Headline Changer</h1>
<div id="content">
  <ul class="infoPanel">
    <li> <a href="#url" class="infoLink current"><img alt="" src="images/image1.jpg" style="opacity: 1;"> <span>Football latest news</span>
      <p>Duis faucibus neque dui.Duis faucibus neque dui.</p>
      </a>
      <div style="display: block;"> <img alt="" src="images/image1.jpg"> </div>
    </li>
    <li> <a href="#url" class="infoLink"><img alt="" src="images/image2.jpg" style="opacity: 0.8;"><span>Test information</span>
      <p>Duis faucibus neque dui.Duis faucibus neque dui.</p>
      </a>
      <div style="display: none;"> <img alt="" src="images/image2.jpg"> </div>
    </li>
    <li> <a href="#url" class="infoLink"><img alt="" src="images/image3.jpg" style="opacity: 0.8;"><span>Rugby cup special</span>
      <p>Duis faucibus neque dui.Duis faucibus neque dui.</p>
      </a>
      <div style="display: none;"> <img alt="" src="images/image3.jpg"> </div>
    </li>
  </ul>
</div>
</body>
</html>

Code Css

#content {
	clear:both;
	position:relative;
	border:1px solid #acacac;
	width:750px;
	margin:25px auto;
}
.infoPanel {
	padding:0;
	margin:0;
	list-style:none;
	width:750px;
	height:270px;
	background:#333;
	position:relative;
	font-family:verdana, sans-serif;
}
.infoPanel li {
	width:271px;
	float:left;
	clear:left;
	height:90px;
	color:#fff;
}
.infoPanel li a.infoLink {
	display:block;
	width:271px;
	height:90px;
	overflow:hidden;
	text-decoration:none;
	border:0;
	color:black;
	font-size:13px;
}
.infoPanel li a.infoLink p {
	color:black;
	font-size:11px;
	display:block;
	width:200px;
	text-decoration:none;
	margin-top:3px;
	padding:0;
}
.infoPanel li a.current {
	background:url(../images/back.png);
	position:absolute;
	z-index:1;
}
.infoPanel li {
	background:url("../images/back2.png") repeat scroll 0 0 transparent;
}
.infoPanel li a.infoLink img {
	display:block;
	width:52px;
	height:50px;
	float:left;
	margin:20px 10px 0 20px;
	border:1px solid #888;
}
.infoPanel li a.infoLink span {
	display:block;
	padding:20px 20px 0 0;
	width:240px;
	font-weight:bold;
}
.infoPanel li a.current span {
	color:white;
	font-weight:bold;
}
.infoPanel li div img {
}
.infoPanel li div {
	position:absolute;
	right:1px;
	bottom:0;
	width:498px;
	height:270px;
	background:#333;
	display:none;
	overflow:hidden;
}
.infoPanel li div a {
	color:#6cf;
	text-decoration:none;
	font-size:13px;
}

Code Javascript

$(document).ready(function() {

$(".infoPanel li a img").fadeTo(1,0.8);

$(".infoPanel li a").eq(0).addClass("current");
$("a.current").next().fadeIn();
$(".infoPanel li a.current img").fadeTo(250,1);

$(".infoLink").mouseover(function() {
	if (this.className.indexOf("current") == -1) {
		$("a.current").next().fadeOut();
		$(".infoPanel li a.current img").fadeTo(1,0.8);
		$("a.current").removeClass("current");
		$(this).addClass("current");
		$("a.current").next().fadeIn();
		$(".infoPanel li a.current img").fadeTo(250,1);
	}
});
});

Share and Enjoy:

Tags:chrome, clean, clear, css, download, firefox, free, internet explorer, javascript, jQuery Headline Change, jQuery library, opera, scrolling images, simple, w3c, xhtml

Discussion 5 Comments

ali says:

August 17, 2010 at 12:00 am

just perfect men, l need to try this now

Reply
Arbaoui Mehdi says:

August 17, 2010 at 1:09 am

thank you for your comment, they are quick trick to help young web designer

Reply
Mihajlo says:

September 6, 2010 at 6:53 pm

Its amazing stuff, thx for share man! keep going!

Reply
Preston says:

June 24, 2011 at 1:00 pm

Very nice tutorial.. Following your posts now… and.. How to automate this?…

Reply
Jim says:

April 10, 2012 at 12:18 pm

Hey, thanks for this tutorial…

I don’t know javascript (only copy+paste ) and can anyone write here how it can change automatically ?

Thanks in advance, hope some day I’ll know javascript and do it myself…

Reply