Want to add a description to the image

**shad97** · 06-13-2013, 05:15 PM

1) Script Title: :: MultiFrame Image slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...frameslide.htm

3) Describe problem: I am trying to get a description to show up at the bottom of an image when it is displayed. The images load fine, but I can't figure out how to make a description show up also. I would like to have a separate description load for each image. I found where some said to add an alt and title, and I figured that out with their help, however that only gives me a description when you mouse over the image. I was hoping to get the description to automatically show up at the bottom of the image.

I am hoping someone can help me with this.
I am attaching the code I am currently using for the pictures.

Thanks,
Stephen

**vwphillips** · 06-14-2013, 11:51 AM

Code:

<!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[*/

#mss {
  position:relative;width:100px;height:100px;
}

.frame {
  position:relative;width:102px;height:102px;margin-Top:10px;
}

.frame IMG{
  width:100px;height:100px;border:solid red 1px
}

.frame DIV{
  position:absolute;left:5px;top:5px;width:80px;background-Color:#FFFFCC;border:solid red 1px;
}

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

<body>

<div id="mss" onmouseover="zxcMultiFrame.Pause('mss');"  onmouseout="zxcMultiFrame.Auto('mss');">
</div>

<script type="text/javascript">
/*<![CDATA[*/

var zxcMultiFrame={

 Auto:function(id,ms){
  var oop=this,o=this['zxc'+id];
  if (o){
   o.to=setTimeout(function(){ oop.rotate(o); },ms||200);
  }
 },


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

 init:function(o){
  var id=o.ParentID,cls=o.FrameClass,nu=o.FrameNumer,ary=o.ImageArray,obj=document.getElementById(id);
  if (obj){
   var src,z0=0;
   for (var z0=0;z0<ary.length;z0++){
    src=ary[z0][0];
    ary[z0][0]=new Image();
    ary[z0][0].src=src;
   }
   this['zxc'+id]=o;
   o.id=id;
   o.obj=obj;
   o.cls=cls;
   o.nu=nu;
   o.ary=ary;
   o.fcnt=-1;
   o.icnt=-1;
   o.ms=o.HoldDelay;
   o.frames=[];
   this.load(o,obj,nu,cls);
  }
 },

 load:function(o,obj,nu,cls){
  for (var oop=this,z0=0;z0<o.ary.length;z0++){
   if (o.ary[z0][0].width<40){
    o.to=setTimeout(function(){ oop.load(o,obj,nu,cls); },200);
    return;
   }
  }
  for (var a,i,d,t,z1=0;z1<nu;z1++){
   d=document.createElement('DIV');
   d.className=cls;
   a=document.createElement('A');
   o.ary[z1][2]?a.href=o.ary[z1][2]:null;
   d.appendChild(a);
   i=document.createElement('IMG');
   a.appendChild(i);
   t=document.createElement('DIV');
   d.appendChild(t);
   obj.appendChild(d);
   o.frames[z1]=[d,a,i,t];
  }
  oop.rotate(o);
 },

 rotate:function(o){
  clearTimeout(o.to);
  o.fcnt=++o.fcnt%o.nu;
  if (o.fcnt==0){
   for (var z0=0;z0<o.nu;z0++){
    o.icnt=++o.icnt%o.ary.length;
    o.frames[z0][1].removeAttribute('href');
    o.ary[o.icnt][2]?o.frames[z0][1].href=o.ary[o.icnt][2]:null;
    o.frames[z0][2].src=o.ary[o.icnt][0].src;
    o.frames[z0][3].innerHTML=o.ary[z0][1]?o.ary[z0][1]:'';
    this.opc(o.frames[z0][0],o.Opacity[0]*100);
   }
  }
  this.opc(o.frames[o.fcnt][0],o.Opacity[1]*100);
  this.Auto(o.id,o.ms);
 },


 opc:function(o,opc){
  o.style.filter='alpha(opacity='+opc+')';
  o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=opc/100-.001;
 }


}

zxcMultiFrame.init({
 ParentID:'mss',
 FrameClass:'frame',
 FrameNumer:3,
 Opacity:[0.2,1],
 HoldDelay:2000,
 ImageArray:[
  ['http://www.vicsjavascripts.org.uk/StdImages/1.gif','My Text 1','http://www.vicsjavascripts.org.uk/'],
  ['http://www.vicsjavascripts.org.uk/StdImages/2.gif','My Text 2',''],
  ['http://www.vicsjavascripts.org.uk/StdImages/3.gif','My Text 3',''],
  ['http://www.vicsjavascripts.org.uk/StdImages/4.gif','My Text 4',''],
  ['http://www.vicsjavascripts.org.uk/StdImages/5.gif','My Text 5',''],
  ['http://www.vicsjavascripts.org.uk/StdImages/6.gif','My Text 6','']
 ]
});

/*]]>*/
</script>

</body>

</html>

**shad97** · 06-14-2013, 12:47 PM

I just want to make sure I understand where this goes and is it replacing the code for Multiframe Image Slideshow? Sorry, I just don't want to mess it up. Also, where do I change the size so that it matches the image size?
Also, can I put the css that you have in the header inside my css file to call or does it have to be in the <head> of the actual page?

Thanks

**vwphillips** · 06-14-2013, 01:14 PM

it replaces the current script

the style sheet goes in the header

the class '.frame' controlls the fame size
the class '.frame IMG' controlls the image size
the class '.frame DIV' controlls the DIV the text is displayed insize

the script init function must be called after the 'mss' DIV has loaded

**shad97** · 06-14-2013, 03:43 PM

Thank you very much. It is finally working the way I was hoping. My only other question is how do I mark this as solved?

**jscheuer1** · 06-14-2013, 04:21 PM

Go to your first post in the thread, hit:

Edit

Then in the lower right hit:

Go Advanced

Then in the top portion of the advanced editor "Your Message" section find the drop down for:

Prefix

Change it to Resolved.

**shad97** · 06-19-2013, 07:49 PM

Ok. The pictures are working great, Thank you very much. However, I just noticed that the descriptions are not changing when the images change? I was just wondering if you had any thoughts?

**vwphillips** · 06-20-2013, 09:09 AM

Code:

<!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[*/

#mss {
  position:relative;width:100px;height:100px;
}

.frame {
  position:relative;width:102px;height:102px;margin-Top:10px;
}

.frame IMG{
  width:100px;height:100px;border:solid red 1px
}

.frame DIV{
  position:absolute;left:5px;top:5px;width:80px;background-Color:#FFFFCC;border:solid red 1px;
}

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

<body>

<div id="mss" onmouseover="zxcMultiFrame.Pause('mss');"  onmouseout="zxcMultiFrame.Auto('mss');">
</div>
<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:700px;left:0px;" >
<input size=100 name=Show0 >
<input size=10 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
<input size=10 name=Show7 >
<input size=10 name=Show8 >
<input size=10 name=Show9 ><br>
<textarea name=TA rows=1 cols=100 ></textarea>
</form>

<script type="text/javascript">
/*<![CDATA[*/

var zxcMultiFrame={

 Auto:function(id,ms){
  var oop=this,o=this['zxc'+id];
  if (o){
   o.to=setTimeout(function(){ oop.rotate(o); },ms||200);
  }
 },


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

 init:function(o){
  var id=o.ParentID,cls=o.FrameClass,nu=o.FrameNumer,ary=o.ImageArray,obj=document.getElementById(id);
  if (obj){
   var src,z0=0;
   for (var z0=0;z0<ary.length;z0++){
    src=ary[z0][0];
    ary[z0][0]=new Image();
    ary[z0][0].src=src;
   }
   this['zxc'+id]=o;
   o.id=id;
   o.obj=obj;
   o.cls=cls;
   o.nu=nu;
   o.ary=ary;
   o.fcnt=-1;
   o.icnt=-1;
   o.ms=o.HoldDelay;
   o.frames=[];
   this.load(o,obj,nu,cls);
  }
 },

 load:function(o,obj,nu,cls){
  for (var oop=this,z0=0;z0<o.ary.length;z0++){
   if (o.ary[z0][0].width<40){
    o.to=setTimeout(function(){ oop.load(o,obj,nu,cls); },200);
    return;
   }
  }
  for (var a,i,d,t,z1=0;z1<nu;z1++){
   d=document.createElement('DIV');
   d.className=cls;
   a=document.createElement('A');
   o.ary[z1][2]?a.href=o.ary[z1][2]:null;
   d.appendChild(a);
   i=document.createElement('IMG');
   a.appendChild(i);
   t=document.createElement('DIV');
   d.appendChild(t);
   obj.appendChild(d);
   o.frames[z1]=[d,a,i,t];
  }
  oop.rotate(o);
 },

 rotate:function(o){
  clearTimeout(o.to);
  o.fcnt=++o.fcnt%o.nu;
  if (o.fcnt==0){
   for (var z0=0;z0<o.nu;z0++){
    o.icnt=++o.icnt%o.ary.length;
    o.frames[z0][1].removeAttribute('href');
    o.ary[o.icnt][2]?o.frames[z0][1].href=o.ary[o.icnt][2]:null;
    o.frames[z0][2].src=o.ary[o.icnt][0].src;
    o.frames[z0][3].innerHTML=o.ary[o.icnt][1]?o.ary[o.icnt][1]:'';
    this.opc(o.frames[z0][0],o.Opacity[0]*100);
   }
  }
  this.opc(o.frames[o.fcnt][0],o.Opacity[1]*100);
  this.Auto(o.id,o.ms);
 },


 opc:function(o,opc){
  o.style.filter='alpha(opacity='+opc+')';
  o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=opc/100-.001;
 }


}

zxcMultiFrame.init({
 ParentID:'mss',
 FrameClass:'frame',
 FrameNumer:3,
 Opacity:[0.2,1],
 HoldDelay:2000,
 ImageArray:[
  ['http://www.vicsjavascripts.org.uk/StdImages/1.gif','My Text 1','http://www.vicsjavascripts.org.uk/'],
  ['http://www.vicsjavascripts.org.uk/StdImages/2.gif','My Text 2',''],
  ['http://www.vicsjavascripts.org.uk/StdImages/3.gif','My Text 3',''],
  ['http://www.vicsjavascripts.org.uk/StdImages/4.gif','My Text 4',''],
  ['http://www.vicsjavascripts.org.uk/StdImages/5.gif','My Text 5',''],
  ['http://www.vicsjavascripts.org.uk/StdImages/6.gif','My Text 6','']
 ]
});

/*]]>*/
</script>

</body>

</html>