far scorrere le immagini di uno slide

**w.ve** · 02-03-2016, 15:40

buonasera,
ho uno script che mi permette di aprire in un pop-up uno slide con le anteprime caricate sotto e cliccando sulle piccole anteprime mi fa vedere l'immagine grande al centro.
vorrei fare in modo che le immagini scorrano anche da sole oltre che cliccando sulle anteprime.

le immagini vengono prese attraverso il codice asp in un db.

qualcuno potrebbe aiutarmi a risolvere

?
..non ho molta dimestichezza con javascript..

grazie mille

codice:

 <%
    dim FotoImmob(20)
    jj=0
    ' EFFETTUA QUERY DI RICERCA SUL DB IN BASE AI PARAMETRI PASSATI'
    query = "SELECT * FROM foto WHERE immobile=" & session("IdImmobile") & " ORDER BY numero"
    set rs=server.createobject("ADODB.Recordset")
    rs.open query, connex
    do while not rs.eof
        jj=jj+1
        if jj<=21 then FotoImmob(jj) = "foto/" & rs("foto")
        rs.movenext
    loop
     
    rs.close
    set rs=nothing
    connex.close
    set connex=nothing     
  %> 


<script type="text/javascript">




var dynimages=new Array()
dynimages[0]=['<%=FotoImmob(1)%>', ""]
dynimages[1]=['<%=FotoImmob(2)%>', ""]
dynimages[2]=['<%=FotoImmob(3)%>', ""]
dynimages[3]=['<%=FotoImmob(4)%>', ""]
dynimages[4]=['<%=FotoImmob(5)%>', ""]
dynimages[5]=['<%=FotoImmob(6)%>', ""]
dynimages[6]=['<%=FotoImmob(7)%>', ""]
dynimages[7]=['<%=FotoImmob(8)%>', ""]
dynimages[8]=['<%=FotoImmob(9)%>', ""]
dynimages[9]=['<%=FotoImmob(10)%>', ""]
dynimages[10]=['<%=FotoImmob(11)%>', ""]
dynimages[11]=['<%=FotoImmob(12)%>', ""]
dynimages[12]=['<%=FotoImmob(13)%>', ""]
dynimages[13]=['<%=FotoImmob(14)%>', ""]
dynimages[14]=['<%=FotoImmob(15)%>', ""]
dynimages[15]=['<%=FotoImmob(16)%>', ""]
dynimages[16]=['<%=FotoImmob(17)%>', ""]
dynimages[17]=['<%=FotoImmob(18)%>', ""]
dynimages[18]=['<%=FotoImmob(19)%>', ""]
dynimages[19]=['<%=FotoImmob(20)%>', ""]






var preloadimg="no"


var optlinktarget=""


var imgborderwidth=0


var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"


if (preloadimg=="yes"){
for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0]
}
}


function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}


function modifyimage(loadarea, imgindex){
if (document.getElementById){
var imgobj=document.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()
}
imgobj.innerHTML=returnimgcode(dynimages[imgindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}


</script>




   </head>
   <body>
<table align="center" width="650px" height="450px"  cellpadding="0" cellspacing="0" border="1" style="border:1px solid #CCCCCC">
<tr>
<td align="center" height="450px" width="650px"  class="nobord">
<div id="dynloadarea""><img src=<%=FotoImmob(1)%> height="400" width="600" border="0"/></div>
</td>
</tr>
</table>
<br>
<table align="center" cellpadding="5" cellspacing="0" style="border:1px solid #CCCCCC">
<tr>


<% if FotoImmob(1)<>"" then %>
<td>
    <a href="#" onClick="modifyimage('dynloadarea', 0)"><img src=<%=FotoImmob(1)%> height="100" width="100" border="0"/></a>
    <br>
    </td>
<% end if %>
<% if FotoImmob(2)<>"" then %>
    <td>
    <a href="#" onClick="modifyimage('dynloadarea', 1)"><img src=<%=FotoImmob(2)%> height="100" width="100" border="0"/></a><br>
    </td>
<% end if %>
<% if FotoImmob(3)<>"" then %>
    <td>
    <a href="#" onClick="modifyimage('dynloadarea', 2)"><img src=<%=FotoImmob(3)%> height="100" width="100" border="0"/></a><br> 
    </td>
<% end if %>
<% if FotoImmob(4)<>"" then %>
    <td>
    <a href="#" onClick="modifyimage('dynloadarea', 3)"><img src=<%=FotoImmob(4)%> height="100" width="100" border="0"/></a><br>
    </td>
<% end if %>
<% if FotoImmob(5)<>"" then %>
    <td>
    <a href="#" onClick="modifyimage('dynloadarea', 4)"><img src=<%=FotoImmob(5)%> height="100" width="100" border="0"/></a><br>
    </td>
<% end if %>
<% if FotoImmob(6)<>"" then %>
    <td>
    <a href="#" onClick="modifyimage('dynloadarea', 5)"><img src=<%=FotoImmob(6)%> height="100" width="100" border="0"/></a><br>
    </td>
<% end if %>
<% if FotoImmob(7)<>"" then %>
    <td>
    <a href="#" onClick="modifyimage('dynloadarea', 6)"><img src=<%=FotoImmob(7)%> height="100" width="100" border="0"/></a><br>
    </td>
<% end if %>
<% if FotoImmob(8)<>"" then %>
    <td>
    <a href="#" onClick="modifyimage('dynloadarea', 7)"><img src=<%=FotoImmob(8)%> height="100" width="100" border="0"/></a><br>
    </td>
<% end if %>
<% if FotoImmob(9)<>"" then %>
    <td>
    <a href="#" onClick="modifyimage('dynloadarea', 8)"><img src=<%=FotoImmob(9)%> height="100" width="100" border="0"/></a><br>
    </td>
<% end if %>
<% if FotoImmob(10)<>"" then %>
    <td>
    <a href="#" onClick="modifyimage('dynloadarea', 9)"><img src=<%=FotoImmob(10)%> height="100" width="100" border="0"/></a><br>
    </td>
<% end if %>
<% if FotoImmob(11)<>"" then %>
    <td>
    <a href="#" onClick="modifyimage('dynloadarea', 10)"><img src=<%=FotoImmob(11)%> height="100" width="100" border="0"/></a><br>
    </td>
<% end if %>
<% if FotoImmob(12)<>"" then %>
    <td>
    <a href="#" onClick="modifyimage('dynloadarea', 11)"><img src=<%=FotoImmob(12)%> height="100" width="100" border="0"/></a><br>
    </td>
<% end if %>
<% if FotoImmob(13)<>"" then %>
    <td>
    <a href="#" onClick="modifyimage('dynloadarea', 12)"><img src=<%=FotoImmob(13)%> height="100" width="100" border="0"/></a><br>
    </td>
<% end if %>
<% if FotoImmob(14)<>"" then %>
    <td>
    <a href="#" onClick="modifyimage('dynloadarea', 13)"><img src=<%=FotoImmob(14)%> height="100" width="100" border="0"/></a><br>
    </td>
<% end if %>
<% if FotoImmob(15)<>"" then %>
    <td>
    <a href="#" onClick="modifyimage('dynloadarea', 14)"><img src=<%=FotoImmob(15)%> height="100" width="100" border="0"/></a><br>
    </td>
<% end if %>
<% if FotoImmob(16)<>"" then %>
    <td>
    <a href="#" onClick="modifyimage('dynloadarea', 15)"><img src=<%=FotoImmob(16)%> height="100" width="100" border="0"/></a><br>
    </td>
<% end if %>
<% if FotoImmob(17)<>"" then %>
    <td>
    <a href="#" onClick="modifyimage('dynloadarea', 16)"><img src=<%=FotoImmob(17)%> height="100" width="100" border="0"/></a><br>
    </td>
<% end if %>
<% if FotoImmob(18)<>"" then %>
    <td>
    <a href="#" onClick="modifyimage('dynloadarea', 17)"><img src=<%=FotoImmob(18)%> height="100" width="100" border="0"/></a><br>
    </td>
<% end if %>
<% if FotoImmob(19)<>"" then %>
    <td>
    <a href="#" onClick="modifyimage('dynloadarea', 18)"><img src=<%=FotoImmob(19)%> height="100" width="100" border="0"/></a><br>
    </td>
<% end if %>
<% if FotoImmob(20)<>"" then %>
    <td>
    <a href="#" onClick="modifyimage('dynloadarea', 19)"><img src=<%=FotoImmob(20)%> height="100" width="100" border="0"/></a><br>
    </td>
<% end if %>


</tr>


</table>


   </body>

**cavicchiandrea** · 02-03-2016, 18:53

Originariamente inviata da w.ve

...
vorrei fare in modo che le immagini scorrano anche da sole oltre che cliccando sulle anteprime.

Bisognerebbe capire cosa intendi per socorimento e dove lo vorresti. Una cosa del genere potrebbe aiutare

Originariamente inviata da w.ve

..non ho molta dimestichezza con javascript..

In questi casi consiglio sempre di cercare (di slide trovi molto) in rete uno script preconfezionato e installarlo

**w.ve** · 03-03-2016, 11:03

Originariamente inviata da cavicchiandrea

Bisognerebbe capire cosa intendi per socorimento e dove lo vorresti. Una cosa del genere potrebbe aiutareIn questi casi consiglio sempre di cercare (di slide trovi molto) in rete uno script preconfezionato e installarlo

vorrei far scorrere una immagine con l'altra in modo orizzontale, quindi si dovrebbero scambiare tra loro le immagini in modo automatico img1---> img2---> img3 senza dover necessariamente cliccare sulle piccole anteprime.

ho provato a integrare il marquee ma non riesco a farlo funzionare.

codice:

<style type="text/css">	 a:link {
text-decoration : none;
}
a:visited {
text-decoration : none;
}
a:hover {
text-decoration : none;
}
 
td.nobord {
border:none;
}


td.crop{
    float:left;
    margin:.5em 10px .5em 0;
    overflow:hidden; /* this is important */
    border:1px solid #ccc;
    }
    /* input values to crop the image: top, right, bottom, left */
img.crop {
    margin:-20px -15px -40px -55px;
    }
	
	li {
	overflow:visible; 
	overflow-style: marquee-line; 
	marquee-style: slide; 
	marquee-play-count: infinite; 
	marquee-direction: forward; 
	marquee-speed: normal;
	}


</style>






   <%
    dim FotoImmob(20)
	jj=0
    ' EFFETTUA QUERY DI RICERCA SUL DB IN BASE AI PARAMETRI PASSATI'
	query = "SELECT * FROM foto WHERE immobile=" & session("IdImmobile") & " ORDER BY numero"
    set rs=server.createobject("ADODB.Recordset")
	rs.open query, connex
	do while not rs.eof
		jj=jj+1
		if jj<=21 then FotoImmob(jj) = "foto/" & rs("foto")
    	rs.movenext
    loop
	 
    rs.close
    set rs=nothing
    connex.close
    set connex=nothing	 
  %> 




<script type="text/javascript">


var dynimages=new Array()
dynimages[0]=['<%=FotoImmob(1)%>', ""]
dynimages[1]=['<%=FotoImmob(2)%>', ""]
dynimages[2]=['<%=FotoImmob(3)%>', ""]
dynimages[3]=['<%=FotoImmob(4)%>', ""]
dynimages[4]=['<%=FotoImmob(5)%>', ""]
dynimages[5]=['<%=FotoImmob(6)%>', ""]
dynimages[6]=['<%=FotoImmob(7)%>', ""]
dynimages[7]=['<%=FotoImmob(8)%>', ""]
dynimages[8]=['<%=FotoImmob(9)%>', ""]
dynimages[9]=['<%=FotoImmob(10)%>', ""]
dynimages[10]=['<%=FotoImmob(11)%>', ""]
dynimages[11]=['<%=FotoImmob(12)%>', ""]
dynimages[12]=['<%=FotoImmob(13)%>', ""]
dynimages[13]=['<%=FotoImmob(14)%>', ""]
dynimages[14]=['<%=FotoImmob(15)%>', ""]
dynimages[15]=['<%=FotoImmob(16)%>', ""]
dynimages[16]=['<%=FotoImmob(17)%>', ""]
dynimages[17]=['<%=FotoImmob(18)%>', ""]
dynimages[18]=['<%=FotoImmob(19)%>', ""]
dynimages[19]=['<%=FotoImmob(20)%>', ""]






var preloadimg="no"


var optlinktarget=""


var imgborderwidth=0


var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"


if (preloadimg=="yes"){
for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0]
}
}


function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}


function modifyimage(loadarea, imgindex){
if (document.getElementById){
var imgobj=document.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()
}
imgobj.innerHTML=returnimgcode(dynimages[imgindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
	


}


</script>




   </head>
   <body>
<table align="center" width="650px" height="450px"  cellpadding="0" cellspacing="0" border="1" style="border:1px solid #CCCCCC">
<tr>
<td align="center" height="450px" width="650px"  class="nobord">
<div id="dynloadarea"><img src=<%=FotoImmob(1)%> border="0"/></div>
</td>
</tr>
</table>
<br>
<table align="center" cellpadding="5" cellspacing="0" style="border:1px solid #CCCCCC">
<tr>


<% if FotoImmob(1)<>"" then %>
<td><li>
	<a href="#" onClick="modifyimage('dynloadarea', 0)"><img src=<%=FotoImmob(1)%> height="100" width="100" border="0"/></a>
	<br>
	</li></td>
<% end if %>
<% if FotoImmob(2)<>"" then %>
	<td><li>
	<a href="#" onClick="modifyimage('dynloadarea', 1)"><img src=<%=FotoImmob(2)%> height="100" width="100" border="0"/></a><br>
	</li></td>
<% end if %>
<% if FotoImmob(3)<>"" then %>
	<td><li>
	<a href="#" onClick="modifyimage('dynloadarea', 2)"><img src=<%=FotoImmob(3)%> height="100" width="100" border="0"/></a><br> 
	</li></td>
<% end if %>
<% if FotoImmob(4)<>"" then %>
	<td><li>
	<a href="#" onClick="modifyimage('dynloadarea', 3)"><img src=<%=FotoImmob(4)%> height="100" width="100" border="0"/></a><br>
	</li></td>
<% end if %>
<% if FotoImmob(5)<>"" then %>
	<td><li>
	<a href="#" onClick="modifyimage('dynloadarea', 4)"><img src=<%=FotoImmob(5)%> height="100" width="100" border="0"/></a><br>
	</li></td>
<% end if %>
.....

**cavicchiandrea** · 03-03-2016, 12:21

Originariamente inviata da w.ve

vorrei far scorrere una immagine con l'altra in modo orizzontale, quindi si dovrebbero scambiare tra loro le immagini in modo automatico img1---> img2---> img3 senza dover necessariamente cliccare sulle piccole anteprime.

In tal caso penso non vada bene il marquee, passerei alla seconda possibilità di trovare una slide in rete

Discussione: far scorrere le immagini di uno slide

Strumenti discussione

Ricerca discussione

Visualizza

far scorrere le immagini di uno slide

Permessi di invio