Ciao a tutti,
premetto che di programmazione so davvero poco, ma sto sviluppando delle pagine web, recuperando un po' di codici open in giro per la rete.
nello specifico ho trovato uno script che mi permette di inserire uno slider all'interno della pagina, pilotato da dei pulsanti. Lo slider mi consente di mandare in slide dei div con del contenuto al loro interno.
La mia necessità è quella di inserire più d'uno di questi slider all'interno della pagina.
E fino a qui tutto ok.
Il sistemino però mi obbliga a cambiare l'ID del div contenitore dello slider ad ogni istanza dello stesso.
Questo mi è scomodo perché dovroò aggiornare spesso la pagina, modificando anche il numero degli slider presenti, e questo tipo di procedura è ad alto rischio di errore.
esempio qui: http://www.fuzzonce.com/ipad/boxPlus2.htm
Io cos'ho fatto: ho definito una variabile numerica che incremento ad ogni istanza dello slider. Questa variabile poi la "unisco" (scusate il termine poco tecnico) alle variabili necessarie allo script e quindi all'ID del contenitore dello slider (e anche al contenitore dei controlli).
Ecco. Non funziona. Come vedete dall'esempio linkato, funziona solo l'ultimo slider, come se le funzioni che lo governano venissero attivate solo una volta finito di caricare la pagina, e quindi pescando solo l'ultimo valore della variabile numerica che via via è andata incrementandosi.
questo il codice presente nel body della pagina:
<script type="text/javascript">var numBoxPlus=1;</script>
<script type="text/javascript">
numBoxPlus = numBoxPlus + 1;
document.write("<div id='containerBoxPlus" + numBoxPlus + "' class='containerBoxPlus'>");
</script>
<script type="text/javascript">
numBoxPlus = numBoxPlus.toString();
window.addEvent('domready', function() {
//slider variables for making things easier below
var itemsHolder = $('containerBoxPlus' + numBoxPlus); var myItems = $$(itemsHolder.getElements('.itemBoxPlus'));
//controls for slider
var theControls = $('controlsBoxPlus' + numBoxPlus); var numNavHolder = $(theControls.getElement('ul')); var thePlayBtn = $(theControls.getElement('.play_btn')); var thePrevBtn = $(theControls.getElement('.BoxPrev')); var theNextBtn = $(theControls.getElement('.BoxNext'));
//create instance of the slider, and start it up
var mySlider = new SL_Slider({slideTimer: 200, orientation: 'vertical', fade: true, isPaused: true, container: itemsHolder, items: myItems, numNavActive: true, numNavHolder: numNavHolder, playBtn: thePlayBtn, prevBtn: thePrevBtn, nextBtn: theNextBtn}); mySlider.start(); });
</script>
<div class="itemBoxPlus BoxItemEmpty"></div>
<div class="itemBoxPlus BoxItemBlack">
Fusce aliquam blandit elit. Suspendisse lectus massa, ultricies sed, hendrerit in, tempor non, nunc.
</div>
<script type="text/javascript"> document.write("<div id='controlsBoxPlus" + numBoxPlus + "'>");</script>
<div class="BoxPrev"><</div> <div class="BoxNext" style="background:none;">></div> <div class="BoxNum_nav"><ul>[/list]</div> </div>
</div>
Non riesco a venirne fuori...
ciao e grazie a tutti