• 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;
        } 
    

  • 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}