...

View Full Version : Rotating images displayed in grid of divs



jaredalexander
06-19-2012, 10:35 AM
Hi, I am quite the amatuer at JavaScript but am trying to bring back an array of say 15 items using C# (this works). Fetch this array using JavaScript (this works) and populate the src attribute of 9 hard coded images, in a grid layout. I then want to rotate these. So for example I want to display images 15,14,13,12,11,10,9,8,7 and then after a couple of seconds 6,5,4,3,2,1,15,14,13 etc etc. I had some help to get where I am, but have tried and tried to complete it with little luck, could anyone help indicate where I'm going wrong, thanks.



<script type="text/javascript">
function GetImages() {
PageMethods.GetImages(OnSucceeded, OnFailed);
}

var pics = null;
var lastIndexUsed = 0;
function OnSucceeded(data) {
pics = data;
setImages();
//$
}

function setImages() {
for (var i = 0; i < 9; i++) {
var x = i;
var y = 1; // The multiplyer, so we know how many times we have hit a number divisible by 10 (ie 10,20,30,40,50,60).
if (i / (9 * y) == 1) {
x = i - (9 * y);
y++;
}
$("#mainContent_imgPhoto" + x.toString()).attr("src", (pics[i].Image));
$('#imgTag' + x.toString()).html(pics[i].Tag);
lastIndexUsed = i;

if (lastIndexUsed == pics.Length-1) {
lastIndexUsed = 0;
}
}
//setTimeout("setImages()", 2000);
//setTimeout("setImages(" + lastIndexUsed + ")", 2000);
}

function OnFailed(error) {
alert(error.get_message());
}
</script>


I have 9 divs like this numbered 0 to 8




<div id="tile_0" class="tile" style="height:200px;width:230px;">
<asp:LinkButton ID="btnViewRec0" runat="server">
<asp:Image id="imgPhoto0" runat="server" ImageUrl="~/images/missing.png" style="height:200px;width:230px;" />
</asp:LinkButton>
<p id="imgTag0" style="width:210px;">tile_0</p>
</div>



This script does populate the first 9 (although images dont display even though the correct src is in there), so my problem is getting it to rotate through the array.

vwphillips
06-19-2012, 05:00 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/

.panel {
position:relative;width:900px;height:610px;border:solid red 1px;
}

.panel IMG {
position:relative;float:left;margin-Left:5px;margin-Top:5px;border-Width:0px;
}

/*]]>*/
</style>
</head>

<body>

<div id="panel1" class="panel" onmouseover="zxcFadeImagePanel.Pause('panel1');" onmouseout="zxcFadeImagePanel.Auto('panel1');">
</div>

<script type="text/javascript">
/*<![CDATA[*/
// Fade Image Panel. (16-June-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/


var zxcFadeImagePanel={

init:function(o){
var id=o.ID,p=document.getElementById(id),nu=o.Images,srcs=o.SRCArray,ms=o.FadeDuration,a,ms=typeof(ms)= ='number'&&ms>100?ms:1000,hold=o.HoldDuration,srt=o.AutoStart,imgs=[],s=o.SequenceDuration,imgs=[],z0=0,z1=0;
for (;z0<nu;z0++){
a=document.createElement('A');
imgs[z0]=document.createElement('IMG');
a.appendChild(imgs[z0]);
p.appendChild(a);
this.links(imgs[z0],srcs,z0);
}
zxcFadeImagePanel['zxc'+id]={
id:id,
imgs:imgs,
srcs:srcs,
lgth:imgs.length-1,
ms:ms,
hold:typeof(hold)=='number'?hold:ms*2,
sms:typeof(s)=='number'?s:ms/100
}
if (typeof(srt)=='number'){
this.Auto(id,srt);
}
},

Auto:function(id,ms){
var oop=this,o=this['zxc'+id];
if (o){
clearTimeout(o.to);
o.to=setTimeout(function(){
o.srcs=oop.shuffle(o.srcs);
o.cnt=0;
o.auto=true;
oop.sequence(o);
},ms||200);
}
},

Pause:function(id){
var o=this['zxc'+id];
if (o){
clearTimeout(o.to);
o.auto=false;
}
},

sequence:function(o){
if (o.imgs[o.cnt]){
var oop=this;
clearTimeout(o['dly'+o.cnt]);
oop.animate(o,o.imgs[o.cnt],100,0,new Date(),o.ms,'dly'+o.cnt,o.cnt);
o.cnt++
setTimeout(function(){ oop.sequence(o); },o.sms);
}
},

animate:function(o,obj,f,t,srt,mS,to,cnt){
var oop=this,a,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f,p;
if (isFinite(now)){
obj.style.filter='alpha(opacity='+now+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
}
if (ms<mS){
o[to]=setTimeout(function(){ oop.animate(o,obj,f,t,srt,mS,to,cnt); },10);
}
else {
if (t==0){
oop.links(obj,o.srcs,cnt);
oop.animate(o,obj,0,100,new Date(),o.ms,'dly'+cnt,cnt);
}
else if (o.auto&&cnt==o.lgth){
oop.Auto(o.id,o.hold);
}
}
},

links:function(obj,srcs,cnt){
obj.src=srcs[cnt][0];
a=obj.parentNode;
a.removeAttribute('href');
if (srcs[cnt][1]){
a.setAttribute('href',srcs[cnt][1]);
}
obj.removeAttribute('title');
if (srcs[cnt][2]){
obj.setAttribute('title',srcs[cnt][2]);
}
},

shuffle:function(ary){
for (var r,t,z0=0;z0<ary.length;z0++){
r=Math.floor(Math.random()*ary.length);
t=ary[z0];
ary[z0]=ary[r];
ary[r]=t;
}
return ary;
}

}

zxcFadeImagePanel.init({
ID:'panel1', // the unique ID name of the parent DIV. (string)
Images:16, // the number of images to display. (number)
SRCArray:[ // an array defining the image scrs, hrefs and titles (array)
// field 0 = the file path and name of the image. (string)
// field 1 = (optional) the href of the image link. (string, default = no link href)
// field 2 = (optional) the image title. (string, default = no image title)
['http://dev49.orderstorm.com/wp-content/alem_slide_images/photo1.jpg'],
['http://dev49.orderstorm.com/wp-content/alem_slide_images/photo2.jpg'],
['http://dev49.orderstorm.com/wp-content/alem_slide_images/photo3.jpg'],
['http://dev49.orderstorm.com/wp-content/alem_slide_images/photo4.jpg'],
['http://dev49.orderstorm.com/wp-content/alem_slide_images/photo5.jpg'],
['http://dev49.orderstorm.com/wp-content/alem_slide_images/photo6.jpg'],
['http://dev49.orderstorm.com/wp-content/alem_slide_images/photo7.jpg'],
['http://dev49.orderstorm.com/wp-content/alem_slide_images/photo8.jpg'],
['http://dev49.orderstorm.com/wp-content/alem_slide_images/photo9.jpg'],
['http://dev49.orderstorm.com/wp-content/alem_slide_images/photo10.jpg'],
['http://dev49.orderstorm.com/wp-content/alem_slide_images/photo11.jpg'],
['http://dev49.orderstorm.com/wp-content/alem_slide_images/photo12.jpg'],
['http://dev49.orderstorm.com/wp-content/alem_slide_images/photo13.jpg'],
['http://dev49.orderstorm.com/wp-content/alem_slide_images/photo14.jpg'],
['http://dev49.orderstorm.com/wp-content/alem_slide_images/photo15.jpg'],
['http://dev49.orderstorm.com/wp-content/alem_slide_images/photo16.jpg']
],
FadeDuration:1000, //(optional) the fade duration in milli seconds. (number, default = 1000)
HoldDutation:4000, //(optional) the 'hold' duration in milli seconds. (number, default = FadeDuration*2)
SequenceDuration:10, //(optional) the 'sequence' duration in milli seconds. (number, default = FadeDuration/100)
AutoStart:5000 //(optional) the time before initial squencing the images in milli seconds. (number, default = no initial sequencing)
});

/*]]>*/
</script>
</body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum