come implementare il codice jquery?
Ciao...innanzitutto grazie per la risposta, siccome io sono un neofita non so farlo, ho scaricato l'esempio dal sito trovando sia css che html, però non so come implementarlo al mio css cioe mi spiego meglio, io questa web gallery la vorrei nella table 1 del mio sito, nell'html basta che copio il codice cosi come sta nel div
Codice HTML:
<div id="table-1_"> codice html dell'esempio jquey </div>
mentre il codice css dove lo metto? Questo è il codice css del riquadro della tabella dove all'interno ci vorrei inserire la galleria...come fare? Per favore aiutami ;)
Codice:
#table-1_ {
margin-left:auto;
margin-right:auto;
background-image:url(images/table_1.gif);
position:absolute;
left:282px;
top:235px;
width:600px;
height:225px;
}
questo è l'intero codice dell'esempio
Codice 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" />
<title>s3Slider jQuery plugin</title>
<!-- CSS -->
<style type="text/css" media="screen">
#slider {
width: 410px; /* important to be same as image width */
height: 300px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}
#sliderContent {
width: 410px; /* important to be same as image width or wider */
position: absolute;
top: 0;
margin-left: 0;
}
.sliderImage {
float: left;
position: relative;
display: none;
}
.sliderImage span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 384px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}
.clear {
clear: both;
}
.sliderImage span strong {
font-size: 14px;
}
.top {
top: 0;
left: 0;
}
.bottom {
bottom: 0;
left: 0;
}
ul { list-style-type: none;}
</style>
<!-- JavaScripts-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="s3Slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').s3Slider({
timeOut: 3000
});
});
</script>
</head>
<body>
<h2>Example 1</h2>
<p>This show the layer appears from top or bottom.</p>
<div id="slider">
<ul id="sliderContent">
<li class="sliderImage">
<a href=""><img src="example_images/410/1.jpg" alt="1" /></a>
<span class="top"><strong>Title text 1</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<a href=""><img src="example_images/410/2.jpg" alt="2" /></a>
<span class="top"><strong>Title text 2</strong><br />Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...</span>
</li>
<li class="sliderImage">
<img src="example_images/410/3.jpg" alt="3" />
<span class="bottom"><strong>Title text 2</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<img src="example_images/410/4.jpg" alt="4" />
<span class="bottom"><strong>Title text 2</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<img src="example_images/410/5.jpg" alt="5" />
<span class="top"><strong>Title text 2</strong><br />Content text...</span>
</li>
<div class="clear sliderImage"></div>
</ul>
</div>
<!-- // slider -->
</body>
</html>
