img duplicata usando bxSlider + fancybox

[roxanna]

Buonasera a tutti.
Ho cercato parecchio in giro ma non ho trovato la soluzione al mio problema. Spero possiate aiutarmi.
Ho utilizzato bxSlider x poter ottenere l'effetto slide x le immagini di una gallery. Cliccando sulla slide si attiva fancybox in modo tale da poter vedere l'img in questione ingrandita. Il problema che riscontro è il seguente: fancybox duplica l'ultima immagine della gallery. Come posso evitare ciò?

Se utilizzo solo bxSlider tutto funziona correttamente. Lo stesso vale se utilizzo solo fancybox. Se li utilizzo insieme si verifica la duplicazione dell'ultima img.

Di seguito posto la parte di codice js che ho utilizzato:

$(document).ready(function() {
	 	 		   $('#gallery').bxSlider({infiniteLoop:false,hideControlOnEnd:true,auto:true,autoHover:true}); 			 		
$("a[rel=example_group]").fancybox({ 			
'padding' : '0', 			
'cyclic' : 'true', 			
'transitionIn'		: 'fade', 			
'transitionOut'		: 'fade', 					
}); 	
	 	
});

[lucavizzi]

A volte capita coi plug-in.
Prova ad inizializare fancybox prima di bxSlider oppure posta un link alla pagina.

Ciao

[roxanna]

Ho provato ad invertire l'inizializzazione come mi hai suggerito, lucavizzi, ma niente

Ecco il link

[lucavizzi]

In pratica succede che lo slider, per suoi scopi, duplica l'ultimo elemento quindi fancybox lo mostra due volte.

Puoi ovviare così:

<script type="text/javascript">
	$(document).ready(function() {
              //inizializzi prima lo slider	
		$('#gallery').bxSlider({infiniteLoop:false,hideControlOnEnd:true,auto:true,autoHover:true});
              //poi rimuovi l'attributo "rel" all'elemento duplicato, tanto allo slider non serve il rel...
		$("a[rel=example_group]:last").attr('rel','');
              //inizializzi fancybox	
		$("a[rel=example_group]").fancybox({
			'padding' : '0',
			'cyclic' : 'true',
			'transitionIn'		: 'fade',
			'transitionOut'		: 'fade'
		});
		
		
	});
</script>

Occhio che includi jQuery due volte, ne basta una:

<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://www.laboratoricreativi.net/NUOVO/js/fade.js"></script>



<script type="text/javascript" src="http://www.laboratoricreativi.net/NUOVO/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.laboratoricreativi.net/NUOVO/fancybox/jquery.fancybox-1.3.4.css" media="screen" />



<link href="http://www.laboratoricreativi.net/NUOVO/css/bx_styles.css" rel="stylesheet" type="text/css" />
<script src="http://www.laboratoricreativi.net/NUOVO/js/jquery.bxSlider.min.js" type="text/javascript"></script>

Ciao

[roxanna]

Lucavizzi, ho modificato lo script e l'img duplicata non c'è più. Nasce però un nuovo problema: se adesso provo ad avviare fancybox dall'ultima img della gallery questo non mi funziona (ad es in questo caso ). Idem se nella gallery c'è inserita una sola immagine (vedi qui).

Ancora, se provo a togliere uno dei 2 jQuery non funziona o bxSlider o fancybox...


Hai qualche suggerimento da darmi?
Io javascript proprio non lo capisco

Grazie ancora

[roxanna]

Sono riuscita a risolvere il nuovo problema nel caso in cui nella gallery ci sia solo una img aggiungendo la riga di codice:

 
if ($('.galleryElement').length>0) {
...
}

Rimane sempre il problema che se provo ad avviare fancybox dall'ultima img della gallery questo non funziona.
Nessun consiglio?

[lucavizzi]

Originariamente inviato da roxanna
Lucavizzi, ho modificato lo script e l'img duplicata non c'è più. Nasce però un nuovo problema: se adesso provo ad avviare fancybox dall'ultima img della gallery questo non mi funziona (ad es in questo caso ). Idem se nella gallery c'è inserita una sola immagine (vedi qui).

Ancora, se provo a togliere uno dei 2 jQuery non funziona o bxSlider o fancybox...


Hai qualche suggerimento da darmi?
Io javascript proprio non lo capisco

Grazie ancora

In pratica non bisogna rimuovere l'attributo all'ultimo elemento bensì al primo.
Quindi:
$("a[rel=example_group]:last").attr('rel','');
diventa:
$("a[rel=example_group]:first").attr('rel','');

Includere due versioni di jQuery è comunque un errore, con la configurazione che ti ho postato prima dovrebbe andare.

Ciao

[roxanna]

Ho rincontrollato tutto il codice e finalmente adesso funziona.

Grazie mille lucavizzi x i tuoi consigli

[lucavizzi]

Originariamente inviato da roxanna
Ho rincontrollato tutto il codice e finalmente adesso funziona.

Grazie mille lucavizzi x i tuoi consigli

Prego