• L
    User Attivo •

    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&amp;umenu=FAQ's&amp;page=FAQ's&amp;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;
    }
    0
  • L
    User Attivo •

    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}
    0
Effettua l'accesso per rispondere