Salve sto creando una pagina web in cui chi entra può scegliere una galleria fotografica da visualizzare. Avevo pensato di strutturarla così: un div per la galleria, uno per i thumb della galleria e uno per le miniature di selezione delle varie galleria. Cliccando su uno di questi si attiva una funzione innerHTML che va a sostituire nei div della galleria e dei thumb le immagini relative. Per la galleria ho usato bxslider che ho inserito così:
inclusioni:
...codice:<link href="jquery.bxslider.css" rel="stylesheet" type="text/css" /> //foglio di stile <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>//libreira jQuery <script src="js/jquery.bxslider.min.js"></script> //file javascrispt dove sono definite le classi per la galleria
inserito nell'head per le prorietà della galleria
...codice:<script type="text/javascript"> $(document).ready(function(){ $('.bxslider').bxSlider({auto: true,autoControls: true,pagerCustom: '#bx-pager'}); }); </script>
div con le immagini inseriti nel body
Questa invece è la funzione di innerHTMLcodice:<div id="area_gallery"> <div class="bxslider"> <span>[img]immagini/avellino/1.png[/img]</span> <span>[img]immagini/avellino/2.png[/img]</span> <span>[img]immagini/avellino/3.png[/img]</span> <span>[img]immagini/avellino/4.png[/img]</span> </div> </div> <div id="area_thumb" style="background-image: url(immagini/IMGthumbBOT.png);"> <div id="bx-pager" style="text-align:right"> [img]immagini/avellino/t1.png[/img] [img]immagini/avellino/t2.png[/img] [img]immagini/avellino/t3.png[/img] [img]immagini/avellino/t4.png[/img] </div> </div>
e questo è il codice triggercodice:function changeImage(idLink) { var immagine = document.getElementById("area_gallery"); var thumbnail = document.getElementById("area_thumb"); if(idLink == "avellino") { immagine.innerHTML = '<div class="bxslider"> <span>[img]immagini/avellino/1.png[/img]</span> <span>[img]immagini/avellino/2.png[/img]</span> <span>[img]immagini/avellino/3.png[/img]</span> <span>[img]immagini/avellino/4.png[/img]</span> </div>'; thumbnail.innerHTML = '<div id="bx-pager" style="text-align:right"> [img]immagini/avellino/t1.png[/img] [img]immagini/avellino/t2.png[/img] [img]immagini/avellino/t3.png[/img] [img]immagini/avellino/t4.png[/img] </div>'; } else if(idLink == "napoli1"){ immagine.innerHTML = '<div class="bxslider"> <span>[img]immagini/napoli1/1.png[/img]</span> <span>[img]immagini/napoli1/2.png[/img]</span> <span>[img]immagini/napoli1/3.png[/img]</span> </div>'; thumbnail.innerHTML = '<div id="bx-pager" style="text-align:right"> [img]immagini/napoli1/t1.png[/img] [img]immagini/napoli1/t2.png[/img] [img]immagini/napoli1/t3.png[/img] </div>'; } else if(idLink == "napoli2"){ immagine.innerHTML = '<div class="bxslider"> <span>[img]immagini/napoli2/1.png[/img]</span> <span>[img]immagini/napoli2/2.png[/img]</span> <span>[img]immagini/napoli2/3.png[/img]</span> </div>'; thumbnail.innerHTML = '<div id="bx-pager" style="text-align:right"> [img]immagini/napoli2/t1.png[/img] [img]immagini/napoli2/t2.png[/img] [img]immagini/napoli2/t3.png[/img] </div>'; } else if(idLink == "napoli3"){ immagine.innerHTML = '<div class="bxslider"> <span>[img]immagini/napoli3/1.png[/img]</span> <span>[img]immagini/napoli3/2.png[/img]</span> <span>[img]immagini/napoli3/3.png[/img]</span> <span>[img]immagini/napoli3/4.png[/img]</span> <span>[img]immagini/napoli3/5.png[/img]</span> <span>[img]immagini/napoli3/6.png[/img]</span> <span>[img]immagini/napoli3/7.png[/img]</span> <span>[img]immagini/napoli3/8.png[/img]</span> <span>[img]immagini/napoli3/9.png[/img]</span> </div>'; thumbnail.innerHTML = '<div id="bx-pager" style="text-align:right"> [img]immagini/napoli3/t1.png[/img] [img]immagini/napoli3/t2.png[/img] [img]immagini/napoli3/t3.png[/img] [img]immagini/napoli3/t4.png[/img] [img]immagini/napoli3/t5.png[/img] [img]immagini/napoli3/t6.png[/img] [img]immagini/napoli3/t7.png[/img] [img]immagini/napoli3/t8.png[/img] [img]immagini/napoli3/t9.png[/img] </div>'; } else if(idLink == "olanda"){ immagine.innerHTML = '<div class="bxslider"> <span>[img]immagini/olanda/1.png[/img]</span> <span>[img]immagini/olanda/2.png[/img]</span> <span>[img]immagini/olanda/3.png[/img]</span> <span>[img]immagini/olanda/4.png[/img]</span> <span>[img]immagini/olanda/5.png[/img]</span> </div>'; thumbnail.innerHTML = '<div id="bx-pager" style="text-align:right"> [img]immagini/olanda/t1.png[/img] [img]immagini/olanda/t2.png[/img] [img]immagini/olanda/t3.png[/img] [img]immagini/olanda/t4.png[/img] [img]immagini/olanda/t5.png[/img] </div>'; } else if(idLink == "vomero"){ immagine.innerHTML = '<div class="bxslider"> <span>[img]immagini/vomero/1.png[/img]</span> <span>[img]immagini/vomero/2.png[/img]</span> <span>[img]immagini/vomero/3.png[/img]</span> <span>[img]immagini/vomero/4.png[/img]</span> </div>'; thumbnail.innerHTML = '<div id="bx-pager" style="text-align:right"> [img]immagini/vomero/t1.png[/img] [img]immagini/vomero/t2.png[/img] [img]immagini/vomero/t3.png[/img] [img]immagini/vomero/t4.png[/img] </div>'; } } </script>
il risultato:codice:<div id="area_thumb2" style="background-image:url(immagini/IMGgallBOT.png)"> <div class="thumb"> [img]immagini/olTH.png[/img] </div> <div class="thumb" style="margin-left:10px"> [img]immagini/n3TH.png[/img] </div> <div class="thumb" style="margin-left:10px"> [img]immagini/n2TH.png[/img] </div> <div class="thumb" style="margin-left:10px"> [img]immagini/n1TH.png[/img] </div> <div class="thumb" style="margin-left:10px"> [img]immagini/voTH.png[/img] </div> <div class="thumb" style="margin-left:10px"> [img]immagini/avTH.png[/img] </div> </div>
una volta cliccato su uno dei trigger nel div vengono inserite le immagini giuste, ma perdono tutte le caratteristiche di stile e di funzionamento della galleria, disponendosi (tutte visibili) in colonna una sotto l'altra, mentre i thumb si posizionano correttamente, ma cliccandoci su ti riportano alla galleria di default...so che probabilmente non si è capito niente XD ma se qualcuno si è riuscito a fare un'idea del perchè me lo facesse sapere *_*[CODE]
Rispondi quotando