parsrayaneh
November 8th, 2011, 17:06
کد قسمت اسلاید شو به صورت زیر می باشد من آدرس دهی رو به صورت زیر انجام میدهم عکسها لود میشود ولی اسلاید شو عمل نمیکنه ممنون میشوم بفرمایید که به چه صورا باید انجام دهم تا بتونم اسلاید شو را در قسمت مورد نظر قرار دهم مثلا هیدر یا فوتر و یا هومپج با تشکر
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.featureList-1.0.0.js"></script>
<style type="text/css">
h3 {
margin: 0;
padding: 7px 0 0 0;
font-size: 16px;
text-transform: uppercase;
}
div#feature_list {
width: 980px;
height: 240px;
overflow: hidden;
position: relative;
}
div#feature_list ul {
position: absolute;
top: 0;
list-style: none;
padding: 0;
margin: 0;
}
ul#tabs {
right: 0;
z-index: 2;
width: 320px;
}
ul#tabs li {
font-size: 12px;
font-family: tahoma;
}
ul#tabs li img {
padding: 5px;
border: none;
float: right;
margin: 10px 10px 0 0;
}
ul#tabs li a {
color: #222;
text-decoration: none;
display: block;
padding: 10px;
height: 60px;
outline: none;
}
ul#tabs li a:hover {
text-decoration: underline;
}
ul#tabs li a.current {
background: url('feature-tab-current.png');
color: #FFF;
}
ul#tabs li a.current:hover {
text-decoration: none;
cursor: default;
}
ul#output {
left: 0;
width: 695px;
height: 240px;
position: relative;
}
ul#output li {
position: absolute;
width: 463px;
height: 240px;
}
ul#output li a {
position: absolute;
bottom: 10px;
right: 10px;
padding: 8px 12px;
text-decoration: none;
font-size: 11px;
color: #FFF;
background: #000;
-moz-border-radius: 5px;
}
ul#output li a:hover {
background: #D33431;
}
</style>
<script language="javascript">
$(document).ready(function() {
$.featureList(
$("#tabs li a"),
$("#output li"), {
start_item : 1
}
);
/*
// Alternative
$('#tabs li a').featureList({
output : '#output li',
start_item : 1
});
*/
});
</script>
</head>
<body>
<div id="content">
<div id="feature_list">
<ul id="tabs">
<li>
<a href="javascript:;">
<img src="services.png" />
<h3>Services</h3>
<span>Lorem ipsum dolor sit amet consect</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="programming.png" />
<h3>Programming</h3>
<span>Lorem ipsum dolor sit amet consect</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="applications.png" />
<h3>Applications</h3>
<span>Lorem ipsum dolor sit amet consect</span>
</a>
</li>
</ul>
<ul id="output">
<li>
<img src="sample1.jpg" />
<a href="#">See project details</a>
</li>
<li>
<img src="sample2.jpg" />
<a href="#">See project details</a>
</li>
<li>
<img src="sample3.jpg" />
<a href="#">See project details</a>
</li>
</ul>
</body>
</html>