Salve a tutti.
Vi espongo subito il mio problema, spero qualcuno possa aiutarmi il prima possibile.
La pagina "Works" del sito che sto sviluppando dovrebbe essere composta da vari carousel orizzontali, uno per ogni sezione Works, ognuno di questi integrato con dei lightbox che permettano di navigare tra i lavori singoli, visualizzandoli a tutta pagina.
Ho già avuto molti problemi per trovare un carousel che permettesse di caricare più gallerie indipendenti sulla stessa pagina (ho usato jcarousel di sorgalla ); solo che non appena integro lo script di un qualsiasi lightbox (ho provato con più di uno) mi si smonta tutto la unordered list, tutti gli elementi mi si posizionano in verticale.
Vi alleggo l'html della pagina:
<!-- collegamento al css del carousel --->
<link rel="stylesheet" type="text/css" href="jsor-jcarousel-7bb2e0a/skins/tango/skin.css" />
<!-- collegamento allo script del carousel --->
<script type="text/javascript" src="jsor-jcarousel-7bb2e0a/lib/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jsor-jcarousel-7bb2e0a/lib/jquery.jcarousel.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.first-and-second-carousel').jcarousel({
scroll: 5,
wrap: 'last'
});
});
</script>
<!-- collegamento al css del lightbox --->
<link rel="stylesheet" type="text/css" href="lightbox/css/jquery.lightbox-0.5.css"/>
<!-- collegamento allo script del lightbox --->
<script type="text/javascript" src="lightbox/js/jquery.js"></script>
<script type="text/javascript" src="lightbox/js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
$(function() {
$('a').lightBox();
});
</script>
<div class="jcarousel-skin-tango">
<div class="jcarousel-container">
<div class="jcarousel-clip">
<ul id="first-carousel" class="first-and-second-carousel jcarousel-skin-tango">
<li><img src="immagini/works/infographics_s1.png" /></li>
<li><img src="immagini/works/infographics_s2.png" /></li>
<li><img src="immagini/works/infographics_s3.png" /></li>
<li><img src="immagini/works/infographics_s4.png" /></li>
<li><img src="immagini/works/infographics_s5.png" /></li>
<li><a href="immagini/latestworks_1.png"><img src="immagini/works/infographics_w1.png" /></a></li>
<li><a href="immagini/latestworks_2.png"><img src="immagini/works/infographics_w1.png" /></a></li>
<li><a href="immagini/latestworks_1.png"><img src="immagini/works/infographics_w1.png" /></a></li>
<li><a href="immagini/latestworks_2.png"><img src="immagini/works/infographics_w1.png" /></a></li>
<li><a href="immagini/latestworks_1.png"><img src="immagini/works/infographics_w1.png" /></a></li>
<li><a href="immagini/latestworks_2.png"><img src="immagini/works/infographics_w1.png" /></a></li>
<li><a href="immagini/latestworks_1.png"><img src="immagini/works/infographics_w1.png" /></a></li>
<li><a href="immagini/latestworks_2.png"><img src="immagini/works/infographics_w1.png" /></a></li>
</ul>
</div>
<div disabled="disabled" class="jcarousel-prev jcarousel-prev-disabled"></div>
<div class="jcarousel-next"></div>
</div>
<img src="immagini/linea1px.png" width="960" height="2" /></div>
<div class="jcarousel-skin-tango">
<div class="jcarousel-container">
<div class="jcarousel-clip">
<ul id="second-carousel" class="first-and-second-carousel jcarousel-skin-tango">
<li><img src="immagini/works/infographics_s1.png" /></li>
<li><img src="immagini/works/infographics_s2.png" /></li>
<li><img src="immagini/works/infographics_s3.png" /></li>
<li><img src="immagini/works/infographics_s4.png" /></li>
<li><img src="immagini/works/infographics_s5.png" /></li>
<li><img src="immagini/works/infographics_w1.png" /></li>
<li><img src="immagini/works/infographics_w1.png" /></li>
<li><img src="immagini/works/infographics_w1.png" /></li>
<li><img src="immagini/works/infographics_w1.png" /></li>
<li><img src="immagini/works/infographics_w1.png" /></li>
<li><img src="immagini/works/infographics_w1.png" /></li>
<li><img src="immagini/works/infographics_w1.png" /></li>
<li><img src="immagini/works/infographics_w1.png" /></li>
</ul>
</div>
<div disabled="disabled" class="jcarousel-prev jcarousel-prev-disabled"></div>
<div class="jcarousel-next"></div>
</div>
<img src="immagini/linea1px.png" width="960" height="2" /></div>
Premetto che non sono un programmatore, ma studio graphic design, il sito è un progetto d'esame per il corso di web design, che, purtroppo, è stato svolto in maniera piuttosto sommaria... Spero che qualcuno mi possa dare qualche consiglio, il prima possibile che l'esame è alle porte...
Grazie mille!
