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:
<!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>
<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>
<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>
<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">[*]illustraction[*]web[*]logo[*]advertising[/list]
<div id="barra_luminosa_centro"></div>
</div>
<div id="header2">
<ul class="welcome"> [*]Welcome[*]About me[*]Services[*]Contact[/list]
<ul id="parent2">[*]
<h1>[img]image/welcometext.png[/img]</h1>
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”;
[*]<h1>[img]image/aboutmetext.png[/img]</h1>
Diplomato all'istituto Statale d'arte I.S.A.F.F. di sassari,
frequento ora l'Accademia delle arti digitali<span class="wait">NEMO NT.</span>
[*]<h1>[img]image/services.png[/img]</h1>
[b]
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.
[/list]
</div>
<div id="gallery">
<a name="p1"><div id="illustraction">[img]image/illustractio.png[/img]</div><h2>^</h2></a>
<div id="slider">
<ul>
[*]
<a href="JS/jquery-lightbox-0.5/photos/image1.jpg" title="Try to Get Me - stampa per tavola da surf">
[img]JS/jquery-lightbox-0.5/photos/thumb_image1.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image2.jpg" title="Contest 'crea il tuo natale' - Grafici creativi.it ">
[img]JS/jquery-lightbox-0.5/photos/thumb_image2.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image3.jpg" title="Brad Pitt - Burn after Reading">
[img]JS/jquery-lightbox-0.5/photos/thumb_image3.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image4.jpg" title="Prison Break">
[img]JS/jquery-lightbox-0.5/photos/thumb_image4.jpg[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image5.jpg" title="100 anni di storia dell'inter">
[img]JS/jquery-lightbox-0.5/photos/thumb_image5.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image6.jpg" title="Johnny Depp">
[img]JS/jquery-lightbox-0.5/photos/thumb_image6.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image7.jpg" title="Jason Schwartzman - Spun">
[img]JS/jquery-lightbox-0.5/photos/thumb_image7.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image8.jpg" title="The last word from this world-Vincenzo Basile">
[img]JS/jquery-lightbox-0.5/photos/thumb_image8.png[/img]
</a>
[*] <a href="JS/jquery-lightbox-0.5/photos/image1.jpg" title="Try to Get Me - stampa per tavola da surf">
[img]JS/jquery-lightbox-0.5/photos/thumb_image1.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image2.jpg" title="Contest 'crea il tuo natale' - Grafici creativi.it ">
[img]JS/jquery-lightbox-0.5/photos/thumb_image2.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image3.jpg" title="Brad Pitt - Burn after Reading">
[img]JS/jquery-lightbox-0.5/photos/thumb_image3.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image4.jpg" title="Prison Break">
[img]JS/jquery-lightbox-0.5/photos/thumb_image4.jpg[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image5.jpg" title="100 anni di storia dell'inter">
[img]JS/jquery-lightbox-0.5/photos/thumb_image5.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image6.jpg" title="Johnny Depp">
[img]JS/jquery-lightbox-0.5/photos/thumb_image6.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image7.jpg" title="Jason Schwartzman - Spun">
[img]JS/jquery-lightbox-0.5/photos/thumb_image7.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image8.jpg" title="The last word from this world-Vincenzo Basile">
[img]JS/jquery-lightbox-0.5/photos/thumb_image8.png[/img]
</a>
[/list]
</div>
<div id="advertising">[img]image/WEB.png[/img]<a name="p2"></a></div><h2>^</h2>
<div id="slider2">
<ul> [*]
[img]JS/jquery-lightbox-0.5/photos/thumb_image17.png[/img] </a>
[*]
<a href="JS/jquery-lightbox-0.5/photos/image22.jpg" title="Polliceverde.it">
[img]JS/jquery-lightbox-0.5/photos/thumb_image22.png[/img] </a>
[img]JS/jquery-lightbox-0.5/photos/web_comm2.png[/img]
[/list]
</div>
<div id="advertising">[img]image/logos.png[/img] <a name="p3"></a></div><h2>^</h2>
<ul>[*]
<a href="JS/jquery-lightbox-0.5/photos/image18.jpg" title="contest 'lovely crociere' grafici creativi.it">
[img]JS/jquery-lightbox-0.5/photos/thumb_image18.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image19.jpg" title="Nemoland-dietro le quinte della fantascienza e del fantasy">
[img]JS/jquery-lightbox-0.5/photos/thumb_image19.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image20.jpg" title="lucaeffe logo">
[img]JS/jquery-lightbox-0.5/photos/thumb_image20.png[/img]
</a>
<a href="JS/jquery-lightbox-0.5/photos/image23.jpg" title="NEMO NT - Colori puri">
[img]JS/jquery-lightbox-0.5/photos/thumb_image23.png[/img]
</a>
[img]JS/jquery-lightbox-0.5/photos/thumb_image21.png[/img]
</a>
[img]JS/jquery-lightbox-0.5/photos/thumb_image21.png[/img]
</a>
[img]JS/jquery-lightbox-0.5/photos/thumb_image21.png[/img]
</a>
[img]JS/jquery-lightbox-0.5/photos/thumb_image21.png[/img]
</a>
[/list]
[...]manca buona parte del codice per problemi di spazio[...]
</body>