Slideshow a scorrimento automatico v2.0

[S]Ulquiorra

Posted on 3/4/2013, 14:42

.

User deleted

Come faccio a impostare che le immagini scorrano in automatico dopo un "X" tempo?

.

Davine Lu Linvega

Posted on 3/4/2013, 14:53

.

Advanced Member

Group: Member

Posts: 1,787

Activity Level: 0

Location: Toha Heavy Industries

Status: Anonymous

Nel codice HTML

SPOILER (click to view)

QUOTE (El Gringo 89 @ 6/3/2013, 20:34)

Modifica

HTML

slideJRadio[eSlide].checked = true;
eSlide++;
}, 4000);

sostituendo a 4000 un valore a piacere. Maggiore sarà il valore scelto, maggiore sarà l'intervallo di transizione e viceversa.

.

Progeus

Posted on 3/4/2013, 21:03

.

User deleted

raga io ho fatto ma non me lo cambia in automatico...perche?

.

Davine Lu Linvega

Posted on 3/4/2013, 21:38

.

Advanced Member

Group: Member

Posts: 1,787

Activity Level: 0

Location: Toha Heavy Industries

Status: Anonymous

Hai inserito tutto il codice nel pannello HTML?

SPOILER (click to view)

QUOTE (El Gringo 89 @ 6/3/2013, 20:34)

HTML

CODICE
<script type="text/javascript">
//SLIDESHOW A SCORRIMENTO AUTOMATICO
//by bored - http://ffmagazine.forumfree.it/?t=65226584
var slideJRadio = document.getElementById('slideshow').querySelectorAll('input[type="radio"]');
var eSlide = 1;
var slideJTime;
function setSlideTime(){
slideJTime = window.setInterval(function(){
if(eSlide === slideJRadio.length){
eSlide = 0;
}
slideJRadio[eSlide].checked = true;
eSlide++;
}, 4000);
}
setSlideTime();
document.getElementById('slideshow').onmouseover = function(){
window.clearInterval(slideJTime);
}
document.getElementById('slideshow').onmouseout = setSlideTime;
for(var i = 0; i < slideJRadio.length; i++){
slideJRadio[i].onclick=function(){
eSlide = this.id.match(/[0-9]+/) - 1;
}
}
</script>

[/SPOILER]

.

Progeus

Posted on 4/4/2013, 14:25

.

User deleted

CODICE

<div id="slideshow">


<input checked="checked" name="pan" id="pan1" type="radio">
<input name="pan" id="pan2" type="radio">
<input name="pan" id="pan3" type="radio">
<input name="pan" id="pan4" type="radio">
<input name="pan" id="pan5" type="radio">
<div id="slides">
<div id="mask">
<div class="slide_content">


<div class="pannello" id="p1"> 
<div style="font-weight: bold; font-size: 20px; text-align: left">1</div>

<div style="text-align: justify; padding: 0 10px">

<div style="background: url(http://i.imgur.com/kW8tAob.jpg) no-repeat center -105px;background-size: 100%;height: 80px;margin: 5px 0;border: 2px solid #e0e0e0;border-radius: 10px;box-shadow: 0 0 0 1px rgba(255, 255, 255, .4)"></div></div>
</div>


<div class="pannello" id="p2"> 
<div style="font-weight: bold; font-size: 20px; text-align: left">2</div>

<div style="text-align: justify; padding: 0 10px">

<div style="background: url(http://i.imgur.com/pL4vTJr.jpg) no-repeat center -165px;background-size: 100%;height: 80px;margin: 5px 0;border: 2px solid #e0e0e0;border-radius: 10px;box-shadow: 0 0 0 1px rgba(255, 255, 255, .4)"></div></div>
</div>


<div class="pannello" id="p3"> 
<div style="font-weight: bold; font-size: 20px; text-align: left">3</div>

<div style="text-align: justify; padding: 0 10px">

</div>
</div>


<div class="pannello" id="p4"> 
<div style="font-weight: bold; font-size: 20px; text-align: left">4</div>

<div style="text-align: justify; padding: 0 10px">

<div style="background: url(http://i.imgur.com/xYNL7qq.jpg) no-repeat center -105px;background-size: 100%;height: 80px;margin: 5px 0;border: 2px solid #e0e0e0;border-radius: 10px;box-shadow: 0 0 0 1px rgba(255, 255, 255, .4)"></div></div>
</div>


<div class="pannello" id="p5"> 
<div style="font-weight: bold; font-size: 20px; text-align: left">5</div>

<div style="text-align: justify; padding: 0 10px">

<div style="background: url(http://i.imgur.com/xYNL7qq.jpg) no-repeat center -105px;background-size: 100%;height: 80px;margin: 5px 0;border: 2px solid #e0e0e0;border-radius: 10px;box-shadow: 0 0 0 1px rgba(255, 255, 255, .4)"></div></div>
</div>

</div>
</div>
</div>

<div id="active">
<label for="pan1"></label>
<label for="pan2"></label>
<label for="pan3"></label>
<label for="pan4"></label>
<label for="pan5"></label>
</div>

</div>
<script type="text/javascript">
//SLIDESHOW A SCORRIMENTO AUTOMATICO
//by bored - http://ffmagazine.forumfree.it/?t=65226584
var slideJRadio = document.getElementById("slideshow").querySelectorAll("input[type="radio"]");
var eSlide = 1;
var slideJTime;
function setSlideTime(){
slideJTime = window.setInterval(function(){
if(eSlide === slideJRadio.length){
eSlide = 0;
}
slideJRadio[eSlide].checked = true;
eSlide++;
}, 4000);
}
setSlideTime();
document.getElementById("slideshow").onmouseover = function(){
window.clearInterval(slideJTime);
}
document.getElementById("slideshow").onmouseout = setSlideTime;
for(var i = 0; i < slideJRadio.length; i++){
slideJRadio[i].onclick=function(){
eSlide = this.id.match(/[0-9]+/) - 1;
}
}
</script>

.

Progeus

Posted on 20/4/2013, 04:14

.

User deleted

up!
mi aiutate?

.

Shadow Angel Jubie

Posted on 8/5/2013, 15:57

.

User deleted

Ma è possibile mettere i pallini che mostrano i vari pannelli sopra e non sotto la slidershow?Sapete dirmi come fare?

.

Bàstard

Posted on 8/5/2013, 16:23

.

User deleted

CITAZIONE (Progeus @ 20/4/2013, 05:14)

up!
mi aiutate?

Usa il generatore, mette lo scorrimento automatico in autmatico

.

Jotaro74

Posted on 11/5/2013, 17:50

.

Senior Member

Group: Member

Posts: 49,895

Activity Level: 0

Location: Napoli

Status: Anonymous

Mi chiedevo: si potrebbero far scorrere i vari pannelli in modo random (casuale) invece che sempre nello stesso ordine prestabilito? Se sì come?

.

.Dante.

Posted on 23/5/2013, 15:50

.

User deleted

Ho inserito i codici del generatore affinché ci fosse l'effetto automatico ma in realtà non c'è... ho modificato il parametro che è di default 4000 in 1000 ma non vedo alcuno scorrimento automatico. Poi non ho capito come sistemarci dentro ogni pannello delle semplici immagini (tutte di dimensioni 525X320) con relativo link. Chi può aiutarmi? Grazie, i vostri script sono sempre molto belli e utili!^^

P.S. link del forum

Edited by .Dante. - 23/5/2013, 22:22

.

Androidz

Posted on 23/5/2013, 22:20

.

User deleted

e possibile rimpicciolire ?

.

Arctic

Posted on 24/5/2013, 14:19

.

Advanced Member

Group: Lettore

Posts: 6,548

Activity Level: 0

Status: Anonymous

@Shadow Angel Jubie sei i palli li vuoi sopra in HTML sistema così:

SPOILER (clicca per visualizzare)

CODICE

<div id="slideshow">

<input checked="checked" type="radio" name="pan" id="pan1"> </input>
<input type="radio" name="pan" id="pan2"> </input>
<input type="radio" name="pan" id="pan3"> </input>
<input type="radio" name="pan" id="pan4"> </input>

<div id="active">
<label for="pan1"></label>
<label for="pan2"></label>
<label for="pan3"></label>
<label for="pan4"></label>
</div>

<div id="slides">
<div id="mask">
<div class="slide_content">

<div class="pannello" id="p1"> 
CONTENUTO PANNELLO 1
</div>

<div class="pannello" id="p2"> 
CONTENUTO PANNELLO 2
</div>

<div class="pannello" id="p3"> 
CONTENUTO PANNELLO 3
</div>

<div class="pannello" id="p4"> 
CONTENUTO PANNELLO 4
</div>

</div></div></div>

</div>

@.Dante. Hai inserito lo script in fondo al forum?

SPOILER (clicca per visualizzare)

CODICE

E per inserire le immagini nel pannello dove c'è scritto:

CODICE

<div class="pannello" id="p1"> 
CONTENUTO PANNELLO 1
</div>

Al posto di CONTENUTO PANNELLO metti:

CODICE

@Androidz

CODICE

#slideshow {width: 580px; padding: 10px; margin: 10px auto}

al posto di 580px metti la dimensione che preferisci

.

.Dante.

Posted on 24/5/2013, 14:41

.

User deleted

Ciao Amphetamines'! Grazie per aver risposto! Si,ho messo quella parte di codice in fondo al forum ma lo slideshow continua ad essere non automatico. Poi il contenuto all'interno del pannello per l'inserimento dell'immagine che mi hai postato è lo stesso che avevo inserito e non va! Esce fuori QUESTO! E poi l'altezza, se lo slideshow fosse un tantino più alto le due immagini laterali non andrebbero a coprire i titoli delle tabelle.

Le immagini che voglio inserire al suo interno sono 525x320. E' il formato delle immagini che usavo per lo slideshow "normale" (quella col tag GALLERY), è solo che adesso non funziona più (ho segnalato la cosa anche al support di forumfree) e quindi sono costretto ad ovviare al problema con questo slideshow che è si bellissimo, però sto avendo parecchi problemi. Mi servirebbe risolvere presto in vista di alcuni eventi che dobbiamo pubblicizzare!! : (

.

Arctic

Posted on 24/5/2013, 15:26

.

Advanced Member

Group: Lettore

Posts: 6,548

Activity Level: 0

Status: Anonymous

Strano.. perchè io ho utilizzato questo codice già più e più volte e non mi ha mai dato questo genere di problema. Prova magari a vedere se hai inserito qualche altro script, forse vanno in contrasto (ma di script non né sò molto). Per l'immagine hai inserito quindi così:

CODICE

Assicurati di aver chiuso bene tutti gli apici (") e magari prova a cambiare hosting (prova su dumpshare)

.

.Dante.

Posted on 24/5/2013, 16:17

.

User deleted

Dunque l'immagine adesso va! L'ho solo riuppata, però rimane il problema che i pannelli non si muovono automaticamente... e poi non ho capito le dimensioni, cioè mi sballa le immagini laterali per non so quale motivo, adesso sono più in basso del dovuto. L'immagine dentro il pannello ho provato a metterla più piccola ma tutto resta com'è!

.