Condividi:        

SmoothScroll_JS in conflitto con lightbox

Problemi di HTML? Di PHP, ASP, .NET, JSP, Perl, SQL, JavaScript, Visual Basic..?
Vuoi realizzare programmi in C, C++, Java, Ruby o Smalltalk, e non sai da che parte cominciare?
Entra qui e troverai le risposte!

Moderatori: Anthony47, Triumph Of Steel, archimede

SmoothScroll_JS in conflitto con lightbox

Postdi lucaeffe » 06/11/09 16:06

Immagine



Quella in foto è una sezione del mio sito.
Gli otto quadrati fanno parte dei div slider e vengono spostati a gruppi di otto tramite lo script easyslider.

La freccia "^" che è presente in alto sula destra fa parte dello script smoothscroll e serve per riportare l'utente in alto.

La freccia pero invece di riportarci in alto fa aprire a metà una finestra lightbox per metà come si vede nella foto, script tra l'altro che è implementato per visulizzare le immagini degli otto quadrati.

Il sito poi rimane in continuo loading.

Qualcuno sa come potrei risolvere il problema o dirmi almeno dove sta?
A me da l'impressione come se ci fosse un conflitto tra i due script!

Grazie.






Codice: Seleziona tutto
<!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="smoothscroll_dl/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:'<',
      prevId: 'prevBtn',
      nextText: '>',
      nextId: 'nextBtn',
      orientation: 'horizontal'

      
                  
                     
   });
   
   $("#slider2").easySlider({
       prevText: '<',
       prevId: 'prevBtn2',
       nextText: '>',
       nextId: 'nextBtn2',

    });
   
   
   
});

   </script>

   
   
   
   
   
   




    <style type="text/css">
   /* jQuery lightBox  plugin - Gallery style */
   #gallery{
      margin:250px 0 0 0;
      width:100%;
      height:3000px;
      text-decoration:none
   }
   
   #gallery a{
       font-family:Arial, Helvetica, sans-serif;
      color:#FFF;
      text-decoration:none;
      }
      
   #gallery ul {
        list-style: none;
       padding:100px 0 0 50px;
       margin:0 0 50px 0
   }
   #gallery ul li {
       display: inline;
   }
   #gallery ul img {
      margin:0 auto;
      border: 5px solid #3e3e3e;
      border-width:0;
   }
   #gallery ul a:hover img {
      border: 1px solid none;
      border-width:0;
      color: #fff;
   }
   #gallery ul a:hover { color: #fff;
   }
   
   </style>
   
<!-- inizio jQuery w.slide gallery -->
<style type="text/css" media="screen">
            
            
           #parent2-menu{
              text-decoration:none;
         
            }
         #parent2-menu li{
            padding:30px 0 0 75px;
            margin:0 auto;

         }
         
         #parent2 li{
            margin:0;
            padding: 20px 0 0 70px;
             font-family:Arial, Helvetica, sans-serif;
            color:#333;
             font-size:12px;
            }

         #parent2-menu a{
            text-decoration:none;
             font:Arial, Helvetica, sans-serif;
            color:#000;
         }
         #parent2-menu a:hover, #parent2-menu a.wactive{
            text-decoration:none;
            background: black;
            color:#000;}
                </style>
             


</head>




 


<body>
<a name="top"></a>


<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="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="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="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="image/illustractio.png" width="900" height="150" /></div><h2><a href="#top">^</a></h2></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="image/WEB.png" width="900" height="170" /><a name="p2"></a></div><h2><a href="#top">^</a></h2>  <!-- WEB TEMPLATES --> 

    <div id="slider2">
            <ul>         
            <li>
                <img src="JS/jquery-lightbox-0.5/photos/thumb_image17.png" width="765" height="280" alt="" /> </a>         
            </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>


<div id="advertising"><img src="image/logos.png" width="900" height="152" /> <a name="p3"></a></div><h2><a href="#top">^</a></h2><!-- 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>


   
<div id="advertising"><img src="image/advertising.png" width="915" height="150" /><a name="p4"></a></div><h2><a href="#top">^</a></h2><!-- 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"><a name="p5"></a></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>



</div>
<div id="footer">
<div id="linea_footer"><img src="image/footer-liena.png" width="950" height="6" /></div>
</div>
</body>
lucaeffe
Utente Junior
 
Post: 42
Iscritto il: 29/10/09 12:08

Sponsor
 

Torna a Programmazione


Topic correlati a "SmoothScroll_JS in conflitto con lightbox":


Chi c’è in linea

Visitano il forum: Nessuno e 13 ospiti