Da slider con Prev e Next a slider con bullet

giovedì 12 marzo 2015 - 11.27

Elenco Threads

Stanze Forum

Aggiungi ai Preferiti

Cerca nel forum

Elenco Tags Javascript

fabry19dice Profilo | Newbie

8 messaggi | Data Invio: gio 12 mar 2015 - 11:27

Ciao a tutti,
mi hanno fornito uno script con slider cosi strutturato

<Prev (1/3) Next>

vorrei sostituire questo risultato con l'immagine dei tre pallini grey_bullet.png (cioè tanti quanti sono le immagini da scorrere)... e invece di cliccare su PROX o >, cliccare sull'immagine grey_bullet.png ... è complicato???

questo è codice.. nelle parti in rosso ho evidenziato la parte che secondo me andrebbe modificata..

Mi aiutate? Grazie mille!

 Il codice sorgente non è stato renderizzato qui
perchè non c'è sufficiente spazio.
Clicca qui per visualizzarlo in una nuova finestra

alx_81 Profilo | Guru

8.814 messaggi | Data Invio: mar 31 mar 2015 - 12:05

>Ciao a tutti,
ciao

>vorrei sostituire questo risultato con l'immagine dei tre pallini
>grey_bullet.png (cioè tanti quanti sono le immagini da scorrere)...
>e invece di cliccare su PROX o >, cliccare sull'immagine grey_bullet.png
>... è complicato???
Purtroppo dal codice non si vede la parte rossa. L'area che crea prev e next del nav bar è questa:
if(this.allSlides.length > 1) {
//Create nav control.
var counterTxt = document.createElement("span");
counterTxt.className = "counterTxt";
var counterNode = document.createTextNode(this.setCounterText());
this.counterNode = counterNode;
counterTxt.appendChild(counterNode);

var prevBtn = document.createElement("a");
prevBtn.innerHTML = "<span class='slidePrev'><</span> Prev";
prevBtn.setAttribute("href", "#");
prevBtn.className = "btnPrev";
prevBtn.mySlider = this;
prevBtn.onclick = this.prev;

var nextBtn = document.createElement("a");
nextBtn.innerHTML = "Next <span class='slideNext'>></span>";
nextBtn.setAttribute("href", "#");
nextBtn.className = "btnNext";
nextBtn.mySlider = this;
nextBtn.onclick = this.next;

var slideCtrl = document.createElement("DIV");
slideCtrl.appendChild(prevBtn);
slideCtrl.appendChild(counterTxt);
slideCtrl.appendChild(nextBtn);
slideCtrl.className = "slideControls";
thisSlider.parentNode.appendChild(slideCtrl);
}

come vedi, fa solo una concatenazione statica dei valori PREV, NEXT, ecc.. Ma questo puoi anche lasciarlo.
In base al numero di slide, dovrai fare un ciclo per andare a creare tanti pallini quante sono le pagine.

La parte che mette il numero di slide è questa:

CatGroupSlider.prototype.setCounterText = function() {
return " (" + (this.currSlide + 1) + " / " + (this.allSlides.length) + ") ";
};

io cambierei questo html, ma una volta creati i pallini, dovrai anche generare il comando di pagina posizionale con un link.

>Mi aiutate? Grazie mille!
di nulla!

Alessandro Alpi | SQL Server MVP
MCP|MCITP|MCTS|MCT

http://blogs.dotnethell.it/suxstellino
http://suxstellino.wordpress.com
http://mvp.microsoft.com/en-us/mvp/Alessandro%20Alpi-4014222

Torna su

Stanze Forum

Elenco Threads

Partecipa anche tu! Registrati!

Hai bisogno di aiuto ?
Perchè non ti registri subito?

Dopo esserti registrato potrai chiedere
aiuto sul nostro Forum oppure aiutare gli altri

Consulta le Stanze disponibili.

Registrati ora !