Immagini a rotazione a tempo

lunedì 20 luglio 2009 - 12.43

stee85 Profilo | Senior Member

Ciao a tutti,
spero di aver scelto il forum corretto..
Ho una serie di immagini caricate da db che faccio girare nella mia pagina..
HTML/JS
<!-- CSS --> <style type="text/css" media="screen"> #slider { width: 810px; /* important to be same as image width */ height: 790px; /* important to be same as image height */ position: relative; /* important */ overflow: hidden; /* important */ } #sliderContent { width: 810px; /* important to be same as image width or wider */ position: absolute; top: 0; margin-left: 10px; } .sliderImage { float: left; position: relative; display: none; } .sliderImage span { position: absolute; font: 10px/15px Arial, Helvetica, sans-serif; padding: 10px 13px; width: 1px; background-color: #fff; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; color: #fff; display: none; } .clear { clear: both; } .sliderImage span strong { font-size: 14px; } .top { top: 0; left: 0; } .bottom { bottom: 0; left: 0; } ul { list-style-type: none;} </style> <!-- JavaScripts--> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/s3Slider.js"></script> <script type="text/javascript"> $(document).ready( function() { $('#slider').s3Slider({ timeOut: 3000 } ); //}); </script>
<div id="slider"> <ul id="sliderContent"> <asp:Literal runat="server" ID="scriptImage"></asp:Literal> <div class="clear sliderImage"></div> </ul> </div>
C#
Il codice sorgente non è stato renderizzato qui
perchè non c'è sufficiente spazio.
Clicca qui per visualizzarlo in una nuova finestra

Fin qui tutto ok ... adesso però avrei bisogno di passare io il tempo che ogni immagine deve restare visualizzata sullo schermo.
Il tempo è salvato su un campo del db e ogni foto può avere un tempo diverso

Penso di dover modificare questa parte di codice
<script type="text/javascript">
$(document).ready(
function()
{
$('#slider').s3Slider({
timeOut: 3000
}
);
//});
</script>

ma non so come passare il valore..
Qualche suggerimento?

Grazie mille
Ste

alx_81 Profilo | Guru

>Ciao a tutti,
ciao!

$(document).ready(function () { var timeOutValue = document.getElementById("id del tuo campo").value; function() { $('#slider').s3Slider({ timeOut: timeOutValue } ); });

provato così?

>Grazie mille
di nulla!
--

Alessandro Alpi | SQL Server MVP

http://www.alessandroalpi.net
http://blogs.dotnethell.it/suxstellino
http://mvp.support.microsoft.com/profile/Alessandro.Alpi
http://italy.mvps.org

stee85 Profilo | Senior Member

>$(document).ready(function () {
>var timeOutValue = document.getElementById("id del tuo campo").value;
> function()
> {
> $('#slider').s3Slider({
> timeOut: timeOutValue
> }
> );
> });

ho provato così .. ma forse sbaglio a passargli il valore (non so molto di js)
nella parte di codice ho aggiunto una label con id "delayLabel" e Text = valore del db (es.3000)

poi ho messo
var timeOutValue = document.getElementById("delayLabel").value;

ma non sembra cambiato niente ... tutte le immagini ruotano con la stessa durata

MODIFICA:
ho provato anche così ma niente:

HTML
//PARTE AGGIUNTA
<asp:Literal runat="server" ID="delayImage"></asp:Literal>
//-->
<div id="slider">
<ul id="sliderContent">
<asp:Literal runat="server" ID="scriptImage"></asp:Literal>
<div class="clear sliderImage"></div>
</ul>
</div>

c#
for (int i = 0; i < advDt.Rows.Count; i++)
{
delImage = delImage + @"<input type='text' id='delaySlider' value='" + advDt.Rows[i]["AdvSec"].ToString() + "'>";
}
delayImage.Text = delImage;

Ste

alx_81 Profilo | Guru

>ho provato così .. ma forse sbaglio a passargli il valore (non
>so molto di js)
>nella parte di codice ho aggiunto una label con id "delayLabel"
>e Text = valore del db (es.3000)
>
>poi ho messo
>var timeOutValue = document.getElementById("delayLabel").value;
Questo a me funziona:

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

Alessandro Alpi | SQL Server MVP

http://www.alessandroalpi.net
http://blogs.dotnethell.it/suxstellino
http://mvp.support.microsoft.com/profile/Alessandro.Alpi
http://italy.mvps.org

stee85 Profilo | Senior Member

in quell'esempio è l'utente che cambia la durata. E poi tutte le immagini si cambiano ogni tot sec (sempre lo stesso tot di sec)..
Io ho bisogno di farle girare a tempi diversi.. per esempio la prima a 3000, la seconda a 5000 ecc...
al momento prende il primo valore che trova sul db e usa sempre quello.

grazie

Ste

alx_81 Profilo | Guru

>in quell'esempio è l'utente che cambia la durata. E poi tutte le immagini si cambiano ogni tot sec (sempre lo stesso tot di sec)..
>Io ho bisogno di farle girare a tempi diversi.. per esempio la prima a 3000, la seconda a 5000 ecc...
In tal caso la cosa cambia.. in base a cosa vuoi fare il cambiamento di tempo? Perchè ho paura che tu debba andare accanto al plugin per andare a fare una ridefinizione della parte in cui viene passato il tempo.
Magari andandolo a pescare da un hidden field a fianco dell'immagine. Nativamente non sembra tu possa farlo. Devi metterci le mani..
--

Alessandro Alpi | SQL Server MVP

http://www.alessandroalpi.net
http://blogs.dotnethell.it/suxstellino
http://mvp.support.microsoft.com/profile/Alessandro.Alpi
http://italy.mvps.org

stee85 Profilo | Senior Member

quando viene caricata la pagina devo far caricare le immagini e ognuna di queste visualizzarla per tot tempo..
Tutti i dati sono su db. Ho una tabella con
- id
- nome immagine
- tempo di visualizzazione
Ste

alx_81 Profilo | Guru

>quando viene caricata la pagina devo far caricare le immagini
>e ognuna di queste visualizzarla per tot tempo..
>Tutti i dati sono su db. Ho una tabella con
>- id
>- nome immagine
>- tempo di visualizzazione
Confermo ti tocca reimplementare una parte. Apri la plugin, e vai a cambiare la parte in cui prende il parametro del tempo. In quel punto vai a leggere in un punto del DOM il valore che creerai nell'html in un campo hidden nascosto ad hoc che è valorizzato direttamente da db (un repeater?).
--

Alessandro Alpi | SQL Server MVP

http://www.alessandroalpi.net
http://blogs.dotnethell.it/suxstellino
http://mvp.support.microsoft.com/profile/Alessandro.Alpi
http://italy.mvps.org

stee85 Profilo | Senior Member

ok sto provando a modificare lo script..
campo hidden
Il codice sorgente non è stato renderizzato qui
perchè non c'è sufficiente spazio.
Clicca qui per visualizzarlo in una nuova finestra

script
ho dichiarato una variabile delay passandogli il campo preso dal campo hidden e poi compilato il campo timeOut con il delay corrispondente

(function($){ //vars $.fn.s3Slider = function() { var element = this; var timeOut = 0;//vars.timeOut != undefined) ? vars.timeOut : 4000; var current = null; var timeOutFn = null; var faderStat = true; var mOver = false; var items = $("#" + element[0].id + "Content ." + element[0].id + "Image"); var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span"); //----- PARTE AGGIUNTA ----// var delay = $("#" + element[0].id + "Content ." + element[0].id + "Delay"); //--> items.each(function(i) { //----- PARTE AGGIUNTA ----// timeOut = $(delay[i]).value; //--> $(items[i]).mouseover(function() { mOver = true; }); $(items[i]).mouseout(function() { mOver = false; fadeElement(true); }); }); var fadeElement = function(isMouseOut) { var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut; thisTimeOut = (faderStat) ? 10 : thisTimeOut; if(items.length > 0) { timeOutFn = setTimeout(makeSlider, thisTimeOut); } else { console.log("Poof.."); } } var makeSlider = function() { current = (current != null) ? current : items[(items.length-1)]; var currNo = jQuery.inArray(current, items) + 1 currNo = (currNo == items.length) ? 0 : (currNo - 1); //----- PARTE AGGIUNTA ----// timeOut = $(delay[currNo]).value; //--> var newMargin = $(element).width() * currNo; if(faderStat == true) { if(!mOver) { $(items[currNo]).fadeIn((timeOut/6), function() { if($(itemsSpan[currNo]).css('bottom') == 0) { $(itemsSpan[currNo]).slideUp((timeOut/6), function() { faderStat = false; current = items[currNo]; if(!mOver) { fadeElement(false); } }); } else { $(itemsSpan[currNo]).slideDown((timeOut/6), function() { faderStat = false; current = items[currNo]; if(!mOver) { fadeElement(false); } }); } }); } } else { if(!mOver) { if($(itemsSpan[currNo]).css('bottom') == 0) { $(itemsSpan[currNo]).slideDown((timeOut/6), function() { $(items[currNo]).fadeOut((timeOut/6), function() { faderStat = true; current = items[(currNo+1)]; if(!mOver) { fadeElement(false); } }); }); } else { $(itemsSpan[currNo]).slideUp((timeOut/6), function() { $(items[currNo]).fadeOut((timeOut/6), function() { faderStat = true; current = items[(currNo+1)]; if(!mOver) { fadeElement(false); } }); }); } } } } makeSlider(); }; })(jQuery);

Nel db ci sono 4 immagini da far ruotare con rispettivi tempi: 1sec, 10 sec, 10 sec, 5 sec
Le immagini continuano a ruotare ogni 1 sec...
Ste

alx_81 Profilo | Guru

>ok sto provando a modificare lo script..
hai provato a debuggare nella parte aggiunta per vedere se il timeout vale quanto vorresti?
--

Alessandro Alpi | SQL Server MVP

http://www.alessandroalpi.net
http://blogs.dotnethell.it/suxstellino
http://mvp.support.microsoft.com/profile/Alessandro.Alpi
http://italy.mvps.org
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 !
Copyright © dotNetHell.it 2002-2024
Running on Windows Server 2008 R2 Standard, SQL Server 2012 & ASP.NET 3.5