Loop immagini prese da db

lunedì 20 aprile 2009 - 13.06

stee85 Profilo | Senior Member

Ciao a tutti,
spero di aver preso la sezione corretta

Avrei bisogno di far ruotare nella home una serie di immagini.
Il nome dell'immagine però devo pescarla dal db, e se possibile anche la durata dell'esposizione dovrei prenderla sempre da li

Qualche suggerimento?

Grazie mille
Ciao
Ste

alx_81 Profilo | Guru

>Ciao a tutti,
Ciao

>Qualche suggerimento?
con jquery (ho usato un plugin) hai questo effetto:
http://www.graficamalvisi.it/Default.aspx
ti andrebbe bene?

>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

se ci fosse la possibilità di non dover installere plugin sarebbe meglio...
altrimenti va bene anche quello
Ste

alx_81 Profilo | Guru

>se ci fosse la possibilità di non dover installere plugin sarebbe meglio...
installare un plugin di jquery, significa includere solo un file js cross browser, non è una installazione vera e propria. Si tratta di javascript.
--

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

ah ok scusa.. pensavo di dover installare qualche cosa sul server
ok allora tento con quel plugin
Ste

alx_81 Profilo | Guru

>ah ok scusa.. pensavo di dover installare qualche cosa sul server
>
>ok allora tento con quel plugin
E' molto semplice.
Lui richiede una struttura, se non ricordo male una <UL>/<LI>

tipo:
<div id="s3slider"> <ul id="s3sliderContent"> <li class="s3sliderImage"> <img src="path 1" alt="Caricamento.." /> <span>descrizione 1</span> </li> <li class="s3sliderImage"> <img src="path 2" alt="Caricamento.." /> <span>descrizione 2</span> </li> <div class="clear s3sliderImage"></div> </ul> </div>

e poi il jquery:
<script language="javascript" type="text/javascript" src="Common/s3Slider.js"></script> <script language="javascript" type="text/javascript"> // Codice per slideshow $(document).ready(function() { $('#s3slider').s3Slider({ timeOut: 3000 }); }); </script>

il link è http://www.serie3.info/s3slider/, c'è spiegato tutto.
Il "difficile" sta nel creare la lista dinamicamente, nulla di impossibile
--

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

forse ho trovato qualche cosa di un po meno complicato (grazie per il link e l'esempio ma nn ho capito un granchè)
ho trovato il seguente codice, che caricato su una pagina aspx funziona perfettamente ma nn riesco a farlo funzionare su una pagina ascx

Questo è il Javascript
<script type="text/javascript"> // Set slideShowSpeed (milliseconds) var slideShowSpeed = 5000 // Duration of crossfade (seconds) var crossFadeDuration = 3 // Specify the image files var Pic = new Array() // don't touch this // to add more images, just continue // the pattern, adding to the array below var totImage = <%=Session["imgTot"].ToString()%> if (parseInt(totImage) > 0) { Pic[0] = '<%=Session["img1"].ToString()%>' } if (parseInt(totImage) > 1) { Pic[1] = '<%=Session["img2"].ToString()%>' } if (parseInt(totImage) > 2) { Pic[2] = '<%=Session["img3"].ToString()%>' } if(parseInt(totImage) > 3) { Pic[3] = '<%=Session["img4"].ToString()%>' } if (parseInt(totImage) > 4) { Pic[4] = '<%=Session["img5"].ToString()%>' } if (parseInt(totImage) > 5) { Pic[5] = '<%=Session["img6"].ToString()%>' } // ======================================= // do not edit anything below this line // ======================================= var t var j = 0 var p = Pic.length var preLoad = new Array() for (i = 0; i < p; i++){ preLoad[i] = new Image() preLoad[i].src = Pic[i] } function runSlideShow(){ if (document.all){ document.images.SlideShow.style.filter="blendTrans(duration=2)" document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)" document.images.SlideShow.filters.blendTrans.Apply() } document.images.SlideShow.src = preLoad[j].src if (document.all){ document.images.SlideShow.filters.blendTrans.Play() } j = j + 1 if (j > (p-1)) j=0 t = setTimeout('runSlideShow()', slideShowSpeed) } </script>

viene richiamato nel body
<body onload="runSlideShow()">

e associato alla seguente immagine
<img src="images/space_vert.gif" id='SlideShow' alt="" />

poi via codice salvo le immagini nelle Session (max 6 immagini)

Nella pagina ascx per es nn ho il body ... come faccio?

Ste

samar Profilo | Senior Member

Scusa ma il tuo sistema mi sembra più complicato di quello che ti hanno proposto, io ho avuto la stessa necessità risolta con un sistema simile, per la lista delle immagini da far visualizzare ho semplicemente utilizzato un repeater (per creare l'elenco ordinato ul) che si caricava i dati dal db prendendo il percorso dei file e relativo titolo se presente...secondo me è la soluzione migliore e più veloce

alx_81 Profilo | Guru

>Scusa ma il tuo sistema mi sembra più complicato di quello che
>ti hanno proposto, io ho avuto la stessa necessità risolta con
>un sistema simile, per la lista delle immagini da far visualizzare
>ho semplicemente utilizzato un repeater (per creare l'elenco
>ordinato ul) che si caricava i dati dal db prendendo il percorso
>dei file e relativo titolo se presente...secondo me è la soluzione
>migliore e più veloce
Quoto. E ti dirò.. 5 minuti di sviluppo

--

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

samar Profilo | Senior Member

Se vuoi appena posso ti posto un pò di codice riportato a quel plugin di jquery ma è talmente semplice che nn vorrei toglierti la soddisfazione di farcela da solo cmq se hai bisogno sappi che ci siamo

alx_81 Profilo | Guru

@stee85
cosa non capisci di quello che ti ho postato?
--

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

il fatto è che vedo tutte le immagini una sotto l'altra e nn succede niente..
ho scaricato jquery http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.js

l'ho incluso nella pagina
<script language="javascript" type="text/javascript" src="s3Slider.js"></script>

creato il mio elenco di immagini
<div id="s3slider"> <ul id="s3sliderContent"> <li class="s3sliderImage"> <img src='<%=Session["img1"].ToString() %>' alt="Caricamento.." /> <span>descrizione 1</span> </li> <li class="s3sliderImage"> <img src='<%=Session["img2"].ToString() %>' alt="Caricamento.." /> <span>descrizione 2</span> </li> <li class="s3sliderImage"> <img src='<%=Session["img3"].ToString() %>' alt="Caricamento.." /> <span>descrizione 3</span> </li> <li class="s3sliderImage"> <img src='<%=Session["img4"].ToString() %>' alt="Caricamento.." /> <span>descrizione 4</span> </li> <li class="s3sliderImage"> <img src='<%=Session["img5"].ToString() %>' alt="Caricamento.." /> <span>descrizione 5</span> </li> <li class="s3sliderImage"> <img src='<%=Session["img6"].ToString() %>' alt="Caricamento.." /> <span>descrizione 6</span> </li> <div class="clear s3sliderImage"></div> </ul> </div>

copiato la parte di css che si vede al link che mi hai passato nel mio style.css
Ste

samar Profilo | Senior Member

hai incluso anche il framework con la riga:

<script src="js/jquery.js" type="text/javascript"></script>

? e verificato la correttezza dei percorsi?

stee85 Profilo | Senior Member

ok scusa sono un rico... ma quanti file dovevo scaricare? io scaricato solo
jquery-1.3.2.js che poi ho rinominato in s3Slider.js

Ste

alx_81 Profilo | Guru

>ok scusa sono un rico... ma quanti file dovevo scaricare? io
>scaricato solo
> jquery-1.3.2.js che poi ho rinominato in s3Slider.js
no, ragioniamo per passo.

1) vai sul sito di jquery e scarica la versione 1.2.6, meglio
2) mettilo in una cartella sul tuo sito
3) vai sul sito di slider, scarica il suo js
4) mettilo nella stessa cartella dell'altro js
5) includili tutti e due con due tag di script
6) usa un ulteriore script tag per scrivere il jquery proposto nel sito di slider
7) genera dinamicamente (un repeater) il tuo ul/l

fine.

--

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

samar Profilo | Senior Member

No no, devi scaricare e includere 2 file JS, uno è il fw di jquery mentre l'altro (s3slider) è il plugin, cioè un'estensione che sfrutta jquery...
allora vedrai che includendoli tutti funzionerà alla prima, fai questo e poi vediamo come caricare le imgs da db...

stee85 Profilo | Senior Member

ce l'ho fatta!!!
nn avevo scaricato un file...

grazie mille per la pazienza
Ste

samar Profilo | Senior Member

Prego figurati, ma forse era + giusto accettare la risposta di Alx!!!

alx_81 Profilo | Guru

>grazie mille per la pazienza
di nulla! anzi, avvicinati a jquery
--

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