Ho una pagina in cui sono presenti molti box, in ciascuno dei quali ho uno slider orizzontale. Per questa funzione, ho adottato / adattato il noto coda-slider.
Questo è il codice JS (sto cominciando il testing di funzionalità con solo due box):
Nella pagina, ho quindi i due box:Codice PHP:$(document).ready(function () {
//PRIMO SLIDER
var $panels1 = $('#slider1 .scrollContainer1 > div');
var $container1 = $('#slider1 .scrollContainer1');
var horizontal = true;
if (horizontal) {
$panels1.css({
'float' : 'left',
'position' : 'relative'
});
}
var $scroll = $('#slider1 .scroll').css('overflow', 'hidden');
function selectNav() {
$(this)
.parents('ul:first')
.find('a')
.removeClass('selected')
.end()
.end()
.addClass('selected');
}
$('#slider1 .navigation').find('a').click(selectNav);
function trigger(data) {
var el = $('#slider1 .navigation').find('a[href$="' + data.id + '"]').get(0);
selectNav.call(el);
}
if (window.location.hash) {
trigger({ id : window.location.hash.substr(1) });
} else {
$('ul.navigation a:first').click();
}
var offset = parseInt((horizontal ?
$container1.css('paddingTop') :
$container1.css('paddingLeft'))
|| 0) * -1;
var scrollOptions = {
target: $scroll,
items: $panels1,
navigation: '.navigation a',
prev: 'img.left',
next: 'img.right',
axis: 'xy',
onAfter: trigger,
offset: offset,
duration: 500,
easing: 'swing'
};
$('#slider1').serialScroll(scrollOptions);
$.localScroll(scrollOptions);
scrollOptions.duration = 1;
$.localScroll.hash(scrollOptions);
//SECONDO SLIDER
var $panels2 = $('#slider2 .scrollContainer2 > div');
var $container2 = $('#slider2 .scrollContainer2');
var horizontal = true;
if (horizontal) {
$panels2.css({
'float' : 'left',
'position' : 'relative'
});
}
var $scroll = $('#slider2 .scroll').css('overflow', 'hidden');
function selectNav() {
$(this)
.parents('ul:first')
.find('a')
.removeClass('selected')
.end()
.end()
.addClass('selected');
}
$('#slider2 .navigation').find('a').click(selectNav);
function trigger(data) {
var el = $('#slider2 .navigation').find('a[href$="' + data.id + '"]').get(0);
selectNav.call(el);
}
if (window.location.hash) {
trigger({ id : window.location.hash.substr(1) });
} else {
$('ul.navigation a:first').click();
}
var offset = parseInt((horizontal ?
$container2.css('paddingTop') :
$container2.css('paddingLeft'))
|| 0) * -1;
var scrollOptions = {
target: $scroll,
items: $panels2,
navigation: '.navigation a',
prev: 'img.left',
next: 'img.right',
axis: 'xy',
onAfter: trigger,
offset: offset,
duration: 500,
easing: 'swing'
};
$('#slider2').serialScroll(scrollOptions);
$.localScroll(scrollOptions);
scrollOptions.duration = 1;
$.localScroll.hash(scrollOptions);
});
Il problema che riscontro è che:Codice PHP:<div class="middlediv"><div id="slider1"><div id="nav">
<ul class="navigation">[*][url="#scheda1"]Scheda[/url][*][*]Foto:[*][url="#img1a"]1[/url]|[url="#img2a"]2[/url]|[url="#img3a"]3[/url]|[url="#img4a"]4[/url]|[url="#img5a"]5[/url]|[url="#img6a"]6[/url][*][*][url="#omaggi1"]I nostri omaggi[/url][*][url="#dove1"]Come arrivare[/url][/list]</div>
<div style="overflow: hidden;" class="scroll">
<div style="width: 9999px;" class="scrollContainer1">
<div style="float: left; position: relative;" class="panel" id="scheda1"><table width="922" border="0" cellspacing="5" cellpadding="0">
<tr>
<td width="100" align="left" valign="top">[url="#img1a"][img]images/nausica1t.jpg[/img][/url]</td>
<td width="100" align="left" valign="top">[url="#img2a"][img]images/nausica2t.jpg[/img][/url]</td>
<td width="100" align="left" valign="top">[url="#img3a"][img]images/nausica3t.jpg[/img][/url]</td>
<td rowspan="2" align="left" valign="top"><h3>Nausica Palace Hotel</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dapibus. Nunc hendrerit urna sed nisl. In hac habitasse platea dictumst.</td>
</tr>
<tr>
<td width="100" align="left" valign="top">[url="#img4a"][img]images/nausica4t.jpg[/img][/url]</td>
<td width="100" align="left" valign="top">[url="#img5a"][img]images/nausica5t.jpg[/img][/url]</td>
<td width="100" align="left" valign="top">[url="#img6a"][img]images/nausica6t.jpg[/img][/url]</td>
</tr>
</table>
</div>
<div style="float: left; position: relative;" class="panel" id="img1a">[img]images/nausica1.jpg[/img]</div>
<div style="float: left; position: relative;" class="panel" id="img2a">[img]images/nausica2.jpg[/img]</div>
<div style="float: left; position: relative;" class="panel" id="img3a">[img]images/nausica3.jpg[/img]</div>
<div style="float: left; position: relative;" class="panel" id="img4a">[img]images/nausica4.jpg[/img]</div>
<div style="float: left; position: relative;" class="panel" id="img5a">[img]images/nausica5.jpg[/img]</div>
<div style="float: left; position: relative;" class="panel" id="img6a">[img]images/nausica6.jpg[/img]</div>
<div class="panel" style="float: left; position: relative;" id="omaggi1"><table width="922" border="0" cellspacing="5" cellpadding="0"><tr><td><h3>I nostri omaggi</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dapibus. Nunc hendrerit urna sed nisl. In hac habitasse platea dictumst. Phasellus augue enim, adipiscing a, sagittis ut, pharetra pretium, neque. </td></tr></table></div>
<div class="panel" style="float: left; position: relative;" id="dove1"><table width="922" border="0" cellspacing="5" cellpadding="0">
<tr><td><h3>Come arrivare</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dapibus. Nunc hendrerit urna sed nisl. In hac habitasse platea dictumst.</td></tr></table></div>
</div></div></div>
</div>
<div class="middlediv"><div id="slider2"><div id="nav">
<ul class="navigation">[*][url="#scheda2"]Scheda[/url][*][*]Foto:[*][url="#img1b"]1[/url]|[url="#img2b"]2[/url]|[url="#img3b"]3[/url]|[url="#img4b"]4[/url]|[url="#img5b"]5[/url]|[url="#img6b"]6[/url][*][*][url="#omaggi2"]I nostri omaggi[/url][*][url="#dove2"]Come arrivare[/url][/list]</div>
<div style="overflow: hidden;" class="scroll">
<div style="width: 9999px;" class="scrollContainer2">
<div style="float: left; position: relative;" class="panel" id="scheda2"><table width="922" border="0" cellspacing="5" cellpadding="0">
<tr>
<td width="100" align="left" valign="top">[url="#img1b"][img]images/Camera matrimoniale standard p 2.jpg[/img][/url]</td>
<td width="100" align="left" valign="top">[url="#img2b"][img]images/Ingresso - Hall p.jpg[/img][/url]</td>
<td width="100" align="left" valign="top">[url="#img3b"][img]images/Palestra p.jpg[/img][/url]</td>
<td rowspan="2" align="left" valign="top"><h3>Hotel Tramonto d'Oro</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dapibus. Nunc hendrerit urna sed nisl. In hac habitasse platea dictumst. Phasellus augue enim, adipiscing a, sagittis ut, pharetra pretium, neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</td>
</tr>
<tr>
<td width="100" align="left" valign="top">[url="#img4b"][img]images/Piscina termale esterna p 2.jpg[/img][/url]</td>
<td width="100" align="left" valign="top">[url="#img5b"][img]images/Piscina termale esterna p.jpg[/img][/url]</td>
<td width="100" align="left" valign="top">[url="#img6b"][img]images/Piscina termale interna p.jpg[/img][/url]</td>
</tr>
</table>
</div>
<div style="float: left; position: relative;" class="panel" id="img1b">[img]images/Camera matrimoniale standard b2.jpg[/img]</div>
<div style="float: left; position: relative;" class="panel" id="img2b">[img]images/Ingresso - Hal2l.jpg[/img]</div>
<div style="float: left; position: relative;" class="panel" id="img3b">[img]images/Palestra2.jpg[/img]</div>
<div style="float: left; position: relative;" class="panel" id="img4b">[img]images/Piscina termale esterna 2b.jpg[/img]</div>
<div style="float: left; position: relative;" class="panel" id="img5b">[img]images/Piscina termale esterna.jpg[/img]</div>
<div style="float: left; position: relative;" class="panel" id="img6b">[img]images/Piscina termale interna2.jpg[/img]</div>
<div class="panel" style="float: left; position: relative;" id="omaggi2"><table width="922" border="0" cellspacing="5" cellpadding="0"><tr><td><h3>I nostri omaggi</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dapibus. Nunc hendrerit urna sed nisl. In hac habitasse platea dictumst.</td></tr></table></div>
<div class="panel" style="float: left; position: relative;" id="dove2"><table width="922" border="0" cellspacing="5" cellpadding="0">
<tr><td><h3>Come arrivare</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dapibus. Nunc hendrerit urna sed nisl. In hac habitasse platea dictumst.</td></tr></table></div>
</div></div></div>
</div>
- il primo slider funziona correttamente
- il secondo slider non funziona affatto
- il primo slider fa scorrere anche il secondo
- il secondo slider fa scorrere il primo
In pratica, le opzioni di navigazione del primo slider, agiscono sia sul primo che sul secondo, mentre quelle del secondo agiscono soltanto sul primo!
Dove sto toppando ?
Rispondi quotando