- Home
- Categorie
- Coding e Sistemistica
- Javascript & Framework
- gallery easy slider
-
gallery easy slider
Ho creato una galleria di immagini che si muovono con l'effetto easy slider.
Sono blocchi di immagini che si spostano tramite due "bottoni" Next e Prev.<script type="text/javascript" src="JS/easySlider/easySlider/js/easySlider.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider({ prevText: 'Previous Slide', prevId: 'prevBut', nextText: 'Next Slide', nextId: 'nextBut', orientation: 'horizontal' }); ```Sono riuscito anche a modificare lostile del carattere di questi due agendo tramite gallery a :
<style type="text/css"> /* jQuery lightBox plugin - Gallery style */ #gallery{ margin:250px 0 0 0; width:100%; height:3000px; text-decoration:none } a{ font-family:Arial, Helvetica, sans-serif; color:#FFF; text-decoration:none; } ul { list-style: none; padding:100px 0 0 50px; margin:0 0 50px 0 } ul li { display: inline; } ul img { margin:0 auto; border: 5px solid #3e3e3e; border-width:0; } ul a:hover img { border: 1px solid none; border-width:0; color: #fff; } ul a:hover { color:; } </style>
Ho provato a spostarli tramite appunto gallery a dando un margin :0 0 0 500px e in effetti si sposta ma con conseguente spostamento dei blocchi delle immagini. ![image](http://img207.imageshack.us/img207/2761/senzatitolo1pb.jpg) Posto tutto il 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" />
<link href="PORTFOLIO.css" rel="stylesheet" type="text/css" /><title>Lucaeffe.it</title>
<script src="../../../Documenti/vincenzo corda/smoothscroll.js" type="text/javascript"></script>
<!-- jQuery lightBox plugin -->
<script type="text/javascript" src="JS/jquery-lightbox-0.5/js/jquery.js"></script>
<script type="text/javascript" src="JS/jquery-lightbox-0.5/js/jquery.lightbox-0.5.js"></script><link rel="stylesheet" type="text/css" href="JS/jquery-lightbox-0.5/css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script>
<!--fine jQuery lightBox plugin -->
<!-- inizio jQuery w.slide plugin -->
<script src="JS/jquery-lightbox-0.5/jquery/jquery.wslide.js"type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){$("#parent2").wslide({ width: 750, height: 250, fade: true, duration: 2000 }); }); </script> <script type="text/javascript" src="JS/easySlider/easySlider/js/easySlider.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider({ prevText: 'Previous Slide', prevId: 'prevBut', nextText: 'Next Slide', nextId: 'nextBut', orientation: 'horizontal' });
$("#slider2").easySlider({
prevText: 'Previous Slide',
prevId: 'prevBut2',
nextText: 'Next Slide',
nextId: 'nextBut2',});
$("#slider3").easySlider({
prevText: 'Previous Slide',
prevId: 'prevBut2',
nextText: 'Next Slide',
nextId: 'nextBut2',});
});
</script> <style type="text/css"> /* jQuery lightBox plugin - Gallery style */{ margin:250px 0 0 0; width:100%; height:3000px; text-decoration:none } a{ font-family:Arial, Helvetica, sans-serif; color:#FFF; text-decoration:none; } ul { list-style: none; padding:100px 0 0 50px; margin:0 0 50px 0 } ul li { display: inline; } ul img { margin:0 auto; border: 5px solid; border-width:0; } ul a:hover img { border: 1px solid none; border-width:0; color:; } ul a:hover { color:; } </style>
<!-- inizio jQuery w.slide gallery -->
<style type="text/css" media="screen">#parent2-menu{ text-decoration:none; } li{ padding:30px 0 0 75px; margin:0 auto; } li{ margin:0; padding: 20px 0 0 70px; font-family:Arial, Helvetica, sans-serif; color:#333; font-size:12px; } a{ text-decoration:none; font:Arial, Helvetica, sans-serif; color:#000; } a:hover, a.wactive{ text-decoration:none; background: black; color:#000;} </style>
</head>
<body>
<div id="sfondo_fisso"></div>
<div id="container">
<div id="header">
<ul id="menu">
<li><a href="#p1"><strong>illustraction</strong></a></li>
<li><a href="#p2"><strong>web</strong></a></li>
<li><a href="#p3"><strong>logo</strong></a></li>
<li><a href="#p4"><strong>advertising</strong></a></li>
</ul><div id="barra_luminosa_centro"></div>
</div><div id="header2">
<ul class="welcome">
<li><a href="#parent2-1"><strong>Welcome</strong></a></li>
<li><a href="#parent2-2"><strong>About me</strong></a></li>
<li><a href="#parent2-3"><strong>Services</strong></a></li>
<li><a href="#p5"><strong>Contact</strong></a></li>
</ul><!-- testi per il w.slide-->
<ul id="parent2">
<li>
<h1><img src="Nuova cartella/image/welcometext.png" width="700" height="50" /></h1>
<strong>Ciao,sono Luca Faedda grafico,illustratore e web-designer.Attualmente vivo a Firenze.
Appassionato al mondo dell'illustrazione, graphic-design, grafica pubblicitaria e della programmzione di siti web e web-design.
L'obiettivo è quello di creare siti accessibili e dal design efficace con l'utilizzo di xHTML,CSS,JavaScript e Flash
con particolare attenzione agli standard dettati dalla W3C e al ?cross-browser?; </strong></li><li><h1><strong><img src="Nuova cartella/image/aboutmetext.png" width="680" height="60" /></strong></h1> <strong> Diplomato all'istituto Statale d'arte I.S.A.F.F. di sassari, frequento ora l'Accademia delle arti digitali<span class="wait"><a href="http://www.scuolanemo.com/index.php?menu=6&umenu=FAQ's&page=FAQ's&pagina=">NEMO NT.</a></span></strong></li> <li><h1><img src="Nuova cartella/image/services.png" width="530" height="60" /></h1> <strong> Web design, realizzazione siti internet, xHtml, Css. Dal design allo sviluppo per il tuo sito sino all'ottimizazzione sui motori di ricerca. Illustrazioni su commissione,caricature,grafiche per t-shirt, skate, tavole da surf personalizzate. Loghi, Brochure, volantini, business card per migliorare la tua immagine. </li>
</ul>
</div>
<!-- fine testi per il w.slide--><!--inizio galleria -->
<div id="gallery">
<a name="p1"><div id="illustraction"><img src="Nuova cartella/image/illustractio.png" width="900" height="150" /></div></a><!-- ILLUSTRAZIONI --><div id="slider">
<ul><li>
<a href="JS/jquery-lightbox-0.5/photos/image1.jpg" title="Try to Get Me - stampa per tavola da surf"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image1.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image2.jpg" title="Contest 'crea il tuo natale' - Grafici creativi.it "> <img src="JS/jquery-lightbox-0.5/photos/thumb_image2.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image3.jpg" title="Brad Pitt - Burn after Reading"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image3.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image4.jpg" title="Prison Break"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image4.jpg" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image5.jpg" title="100 anni di storia dell'inter"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image5.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image6.jpg" title="Johnny Depp"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image6.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image7.jpg" title="Jason Schwartzman - Spun"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image7.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image8.jpg" title="The last word from this world-Vincenzo Basile"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image8.png" width="200" height="140" alt="" /> </a> </li> <li> <a href="JS/jquery-lightbox-0.5/photos/image1.jpg" title="Try to Get Me - stampa per tavola da surf"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image1.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image2.jpg" title="Contest 'crea il tuo natale' - Grafici creativi.it "> <img src="JS/jquery-lightbox-0.5/photos/thumb_image2.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image3.jpg" title="Brad Pitt - Burn after Reading"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image3.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image4.jpg" title="Prison Break"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image4.jpg" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image5.jpg" title="100 anni di storia dell'inter"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image5.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image6.jpg" title="Johnny Depp"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image6.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image7.jpg" title="Jason Schwartzman - Spun"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image7.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image8.jpg" title="The last word from this world-Vincenzo Basile"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image8.png" width="200" height="140" alt="" /> </a> </li>
</ul>
</div><div id="advertising"><img src="Nuova cartella/image/WEB.png" width="900" height="170" /></div><a name="p2"></a> <!-- WEB TEMPLATES -->
<div id="slider2"> <ul> <li> <a href="JS/jquery-lightbox-0.5/photos/image17.jpg" title="Vincenzo Corda HairStylist"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image17.png" width="430" height="280" alt="" /> </a> <img src="JS/jquery-lightbox-0.5/photos/web_comm.png" width="335" height="280" /> </li> <li> <a href="JS/jquery-lightbox-0.5/photos/image22.jpg" title="Polliceverde.it"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image22.png" width="430" height="280" alt="" /> </a> <img src="JS/jquery-lightbox-0.5/photos/web_comm2.png" width="335" height="280" /> </li> </ul>
</div>
<a name="p3"><div id="advertising"><img src="Nuova cartella/image/logos.png" width="900" height="152" /></div></a><!-- LOGO -->
<ul> <li> <a href="JS/jquery-lightbox-0.5/photos/image18.jpg" title="contest 'lovely crociere' grafici creativi.it"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image18.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image19.jpg" title="Nemoland-dietro le quinte della fantascienza e del fantasy"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image19.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image20.jpg" title="lucaeffe logo"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image20.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image23.jpg" title="NEMO NT - Colori puri"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image23.png" width="200" height="140" alt="" /> </a> <img src="JS/jquery-lightbox-0.5/photos/thumb_image21.png" width="200" height="140" alt="" /> </a> <img src="JS/jquery-lightbox-0.5/photos/thumb_image21.png" width="200" height="140" alt="" /> </a> <img src="JS/jquery-lightbox-0.5/photos/thumb_image21.png" width="200" height="140" alt="" /> </a> <img src="JS/jquery-lightbox-0.5/photos/thumb_image21.png" width="200" height="140" alt="" /> </a> </li> </ul>
<a name="p4"><div id="advertising"><img src="Nuova cartella/image/advertising.png" width="915" height="150" /></div></a><!-- ADVERTISING -->
<ul> <li> <a href="JS/jquery-lightbox-0.5/photos/image9.jpg" title="esercizi di sintesi - China"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image9.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image10.jpg" title="esercizi di sintesi - Musica"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image10.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image11.jpg" title="esercizi di sintesi - Mare"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image11.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image12.jpg" title="esercizi di sintesi - Estate"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image12.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image13.jpg" title="esercizi - Carattere come immagine"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image13.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image14.jpg" title="esercizi di reinterpretazione - Pin up '50"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image14.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image15.jpg" title="esercizi di reinterpretazione - Pop Art"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image15.png" width="200" height="140" alt="" /> </a> <a href="JS/jquery-lightbox-0.5/photos/image16.jpg" title="contest 'No al Fumo' Grafici creativi.it"> <img src="JS/jquery-lightbox-0.5/photos/thumb_image16.png" width="200" height="140" alt="" /> </a>
</li>
</ul></div>
<div id="contact_me"></div>
<div id="modulo"><form id="contact" method="post" action="">
<div>
<label for="email"></label>
<div class="input-cont"><input type="text" id="email" name="email"></div><label for="nome"></label> <div class="input-cont"><input type="text" id="nome" name="nome" size="20"></div> <label for="message"></label> <div class="input-cont"><input type="text" id="object" name="object"></div> <label for="message"></label> <div class="textarea-cont"> <textarea id="message" name="message" rows=9 cols=20></textarea> </div> <button type="submit" id="go" value="invia">CLICK HERE TO E-MAIL ME</button>
</div>
</form> </div>
<a name="p5"></a></div>
</body>CSS
body{
background:#333 url(Nuova%20cartella/image/clouds.png) no-repeat top center ;
background-attachment:fixed;
margin:0 auto;
padding:10px 0 0 0;
height:2500px;
width:100%;
}#container{
background-color:#000;
background-repeat:repeat-y;
background-position:center;
width:950px;
height:5000px;
margin:0 auto;
padding:30px 0 0 0;}
#header{
background-image:url(Nuova%20cartella/image/hea2.png);
background-repeat:no-repeat;
background-position:top;
margin:0;
padding:0;
height:600px;
width:950px;
}#barra_luminosa_centro{
background-image:url(Nuova%20cartella/image/Barr_luminosa_centro.png);
background-repeat:no-repeat;
background-position:bottom;
margin:0;
padding:300px 0 0 0;
height:300px;
width:100%;
}#header2{
background-image:url(Nuova%20cartella/image/welcome.png);
background-repeat:no-repeat;
padding:0;
width:950px;
height:330px;
margin:0;
}#menu{
width:20px;
list-style:none;
overflow:hidden;
width:100%;
float:left;
padding:1px;
margin:250px 0 0 0;}
display:inline;
}display:block;
float:left;
padding-rigth:90px;
height:25px;
margin-left:60px;
padding-left:65px;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
text-transform:uppercase;
text-decoration:none;
color:#FFF;
line-height:25px;
}color:#FC0;
}
.welcome{
list-style:none;
display:block;
width:100%;
height:25px;
margin:0 0 -20px 0;
padding:0;}
.welcome li{
display:inline;
width:300px;
}.welcome a{
display:block;
float:left;
padding-rigth:60px;
height:25px;
margin-left:30px;
margin-top:20px;
padding-left:20px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
color: #FC0;
line-height:25px;
}.welcome a:hover{
color:#FFF;}
h1{
font-family:Arial, Helvetica, sans-serif;
font-size:36px;
color:#FFF;
margin:0;
padding:0 0 35px 0;
top:-80px;
}#illustraction{
margin:50px 0 0 30px;
padding:0;
}#advertising{
margin:150px 0 0 30px;
padding:0;
}#template{
margin:0 0 0 -10px;
padding:0;
width:850px;
height:280;}
.wait{
list-style:none;
display:block;
width:100%;
height:25px;
margin:0;
padding:0;}
.wait li{
display:inline;
width:300px;
}.wait a{
display:block;
float:left;
height:25px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
color: #FFF;
line-height:25px;
}.wait a:hover{
color:#FC0;}
#web_space{
padding:0;
margin:0 0 150px 0;
}#slider ul, li{ margin:0; padding:0; list-style:none; }, li{ width:900px; height:500px; overflow:hidden; } span#prevBtn{} span#nextBtn{} #slider2 ul, li{ margin:0; padding:0; list-style:none; }, li{ width:900px; height:500px; overflow:hidden; } span#prevBtn{} span#nextBtn{} #slider3 ul, li{ margin:0; padding:0; list-style:none; }, li{ width:900px; height:500px; overflow:hidden; } span#prevBtn{} span#nextBtn{} #contact_me{ background:url(Nuova%20cartella/image/contactme.png); height:150px; width:700px; margin:250px 0 0 0; padding:0; } #modulo{ margin:0 0 -400 75px; } form#contact{ width:900px; height:380px; margin: 0; padding: 47px 15px 10px 15px; background-image:url(Nuova%20cartella/image/form.png); background-repeat:no-repeat; } label{ width: 200px; height: 30px; font: 12px/30px Arial,sans-serif; margin-right: 5px; text-align: right; color: #666 } input,textarea,button{ border: 0px solid; font: 12px Arial,sans-serif; } div.input-cont{ width: 200px; height: 30px; margin-bottom: 3px } input{ display: block; width: 200px; height:25px; background: #FFF; margin: 12px 0 0 280px } div.textarea-cont{ width: 200px; height: 100px; padding: 1px; } textarea{ width: 280px; height: 85px; margin: 33px 0 0 180px; } button#go{ width: 220px; height:25px; height /**/:30px; line-height: 25px; display: inline; margin:-10px 0 0 550px; padding: 1px 0 4px; background: #ffcc00; font:Arial, Helvetica, sans-serif; font-weight:bolder; font-size:16px; text-transform:uppercase; color:#333; cursor:pointer; }
-
Bisognava semplicemente sostituire gli id in questo modo
$("#slider").easySlider({ prevText: 'Previous Slide', prevId: 'prevBtn', nextText: 'Next Slide', nextId: 'nextBtn', orientation: 'horizontal'
e agire poi sui rispettivi CSS
#slider ul, li{ margin:0; padding:0; list-style:none; } , li{ width:900px; height:400px; overflow:hidden; } span#prevBtn{ margin:0 0 0 50px} span#nextBtn{ margin:0 0 0 750px}