Results 1 to 9 of 9

Thread: Want to add a description to the image

  1. #1
    Join Date
    Apr 2013
    Posts
    18
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default Want to add a description to the image

    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
    Attached Files Attached Files
    Last edited by shad97; 06-14-2013 at 04:55 PM.

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,775
    Thanks
    2
    Thanked 411 Times in 406 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Apr 2013
    Posts
    18
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    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
    Last edited by shad97; 06-14-2013 at 12:58 PM.

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,775
    Thanks
    2
    Thanked 411 Times in 406 Posts

    Default

    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
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. The Following User Says Thank You to vwphillips For This Useful Post:

    shad97 (06-14-2013)

  6. #5
    Join Date
    Apr 2013
    Posts
    18
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    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?

  7. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. The Following User Says Thank You to jscheuer1 For This Useful Post:

    shad97 (06-14-2013)

  9. #7
    Join Date
    Apr 2013
    Posts
    18
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    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?

  10. #8
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,775
    Thanks
    2
    Thanked 411 Times in 406 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  11. The Following User Says Thank You to vwphillips For This Useful Post:

    shad97 (06-20-2013)

  12. #9
    Join Date
    Apr 2013
    Posts
    18
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    Thank you very much, that fixed it.

Similar Threads

  1. Image w/ description tooltip - Description hidden
    By Lady Rogue in forum Dynamic Drive scripts help
    Replies: 9
    Last Post: 01-25-2010, 04:39 PM
  2. Replies: 0
    Last Post: 11-26-2008, 10:32 AM
  3. Image w/ Description - Remove Description?
    By phrozen in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 09-05-2007, 08:31 PM
  4. Image w/ description tooltip or Image Thumbnail Viewer
    By rizquine in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 04-07-2006, 04:38 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •