Alt and Title Attributes for Codelifter Javascript Slideshow

**ellenjones6** · 07-04-2012, 05:07 PM

I have been using a Javascript from Codelifter.com to create slideshows (with captions) for my website: www.adirondackvic.org . However, none of the images in my slideshows are being indexed by Google, because they don't have Alt or Title attributes. Is there a way I can include Alt and Title attributes so that Google recognizes them and indexes the images? Here is a sample page with a slideshow I have modified (following instructions I found in a 2006 thread): http://www.adirondackvic.org/Adirond...-June-2012.htm . The slideshow works but the Alt text for each image is not showing up in IE. (I see the Alt text for the initial image only.) Can anyone help me? What am I doing wrong?

Here is the code:

Code:

<script>

// (C) 2003 by CodeLifter.com
// Free for all users, but leave in this header.

// ==============================
// Set the following variables...
// ==============================

// Set the slideshow speed (in milliseconds)
var SlideShowSpeed = 3000;

// Set the duration of crossfade (in seconds)
var CrossFadeDuration = 2;

var Picture = new Array(), Alt = new Array(); Title = new Array()// don't change this
var Caption = new Array(); // don't change this
var showHot = false;       // don't change this

// Specify the image files...
// To add more images, just continue
// the pattern, adding to the array below.
// To use fewer images, remove lines
// starting at the end of the Picture array.
// Caution: The number of Pictures *must*
// equal the number of Captions!

Picture[1]  = 'Images/Adirondack-Birding-Center-Bird-Walk-30-June-2012-1.jpg';
Picture[2]  = 'Images/Adirondack-Birding-Center-Bird-Walk-30-June-2012-2.jpg';
Picture[3]  = 'Images/Adirondack-Birding-Center-Bird-Walk-30-June-2012-3.jpg';
Picture[4]  = 'Images/Adirondack-Birding-Center-Bird-Walk-30-June-2012-4.jpg';
Picture[5]  = 'Images/Adirondack-Birding-Center-Bird-Walk-30-June-2012-5.jpg';
Picture[6] = 'Images/Adirondack-Birding-Center-Bird-Walk-30-June-2012-6.jpg';


Alt[1]  = "Barnum Brook from the Jenkins Mountain Trail";
Alt[2]  = "Adirondack Wildflowers: Spreading Dogbane blooming near the VIC building";
Alt[3]  = "New trail surfacing on the Hemlock Connector";
Alt[4]  = "Adirondack Wildflowers: Common Wood Sorrel blooming on the Boreal Life Trail";
Alt[5]  = "Saint Regis Mountain from the trail in front of the VIC building";
Alt[6]  = "Adirondack Wildflowers: Partridge Berry blooming on the Boreal Life Trail";

Title[1]  = "Barnum Brook from the Jenkins Mountain Trail";
Title[2]  = "Adirondack Wildflowers: Spreading Dogbane blooming near the VIC building";
Title[3]  = "New trail surfacing on the Hemlock Connector";
Title[4]  = "Adirondack Wildflowers: Common Wood Sorrel blooming on the Boreal Life Trail";
Title[5]  = "Saint Regis Mountain from the trail in front of the VIC building";
Title[6]  = "Adirondack Wildflowers: Partridge Berry blooming on the Boreal Life Trail";

// Specify the Captions...
// To add more captions, just continue
// the pattern, adding to the array below.
// To use fewer captions, remove lines
// starting at the end of the Caption array.
// Caution: The number of Captions *must*
// equal the number of Pictures!


Caption[1]  = "Barnum Brook from the Jenkins Mountain Trail";
Caption[2]  = "Adirondack Wildflowers: Spreading Dogbane blooming near the VIC building";
Caption[3]  = "New trail surfacing on the Hemlock Connector";
Caption[4]  = "Adirondack Wildflowers: Common Wood Sorrel blooming on the Boreal Life Trail";
Caption[5]  = "Saint Regis Mountain from the trail in front of the VIC building";
Caption[6]  = "Adirondack Wildflowers: Partridge Berry blooming on the Boreal Life Trail";


// =====================================
// Do not edit anything below this line!
// =====================================


var tss;
var iss;
var jss = 0;
var pss = Picture.length-1;

var preLoad = new Array();
for (iss = 1; iss < pss+1; iss++){
preLoad[iss] = new Image();
preLoad[iss].src = Picture[iss];}

function control(how){
if (showHot){
if (how=="H") jss = 10;
if (how=="F") jss = jss + 1;
if (how=="B") jss = jss - 1;
if (jss > (pss)) jss=1;
if (jss < 1) jss = pss;
if (document.all){
document.images.PictureBox.style.filter="blendTrans(duration=2)";
document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";
document.images.PictureBox.filters.blendTrans.Apply();}
document.images.PictureBox.src = preLoad[jss].src;
if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];
if (document.all) document.images.PictureBox.filters.blendTrans.Play();
}}

</script>

                    <!--
    The next table cell holds the images.
    Set cell and image width and height the same.
    The img src must have name=PictureBox in its
    tag.  Often, the first image in the Picture
    array in the script is used here; but you
    may also use a different, introductory image
    as we have here, since this image is shown
    only on start-up.
    //-->
                    <td width=468 colspan="3"> 
                      <div align="center">
                        <h1><font face="Arial, Helvetica, sans-serif" size="2"><br>
                          <b>Birding the Adirondacks:<br>
                          Teddy Roosevelt Bird Walk<br>
                          30 June 2012</b><br>
                          <br>
                          <img src=Images/Adirondack-Birding-Center-Bird-Walk-30-June-2012-3.jpg name=PictureBox width=468 height=357  border="1" alt="Birding the Adirondacks | Teddy Roosevelt Bird  Walk (30 June 2012)"> 
                          </font></h1>
                      </div>
                      <font face="Arial, Helvetica, sans-serif" size="2"><noscript> 
                      </noscript><noscript> </noscript><noscript> </noscript><noscript> 
                      </noscript><noscript> </noscript><noscript> </noscript><noscript> 
                      </noscript><noscript> </noscript><noscript> </noscript><noscript> 
                      </noscript><noscript> </noscript><noscript> </noscript><noscript> 
                      </noscript><noscript> </noscript></font><font size="2"><noscript> 
                      </noscript><noscript> </noscript></font><noscript> 
                      <center>
                        <font color="red" face="Arial, Helvetica, sans-serif" size="2"><a name="1"></a>You 
                        have JavaScript turned off on your browser. To view the 
                        entire slide show, please enable JavaScript.</font> 
                      </center>
                      </noscript> </td>
                  </tr>
                  <!--
    The following three cells contain the controls.
    Each of the control a href's must contain class=
    Controls, to attach the styles (see top of script).
    To dress this up a bit, you can of course substitute
    <img src> images for the text in the links.
    //-->
                  <tr> 
                    <td width=33% align="center"> <font face="Arial, Helvetica, sans-serif" size="2"><a class=Controls href="#1" onClick="javascript:control('B');">Previous 
                      Slide</a></font></td>
                    <td width=33% align="center"> <font face="Arial, Helvetica, sans-serif" size="2"><a class=Controls href="#1" onClick="javascript:control('H');">First 
                      Slide</a> </font></td>
                    <td width=33% align="center"> <font face="Arial, Helvetica, sans-serif" size="2">&nbsp;&nbsp; 
                      &nbsp;<a class=Controls href="#1" onClick="javascript:control('F');">Next 
                      Slide</a> </font></td>
                  </tr>
                  <tr> 
                    <!-- 
    The next table cell holds the captions.
    This table cell must have id=CaptionBox and
    class=Caption in its tag. The default caption
    shows whilst loading in all browsers; NS4
    will show only the default caption, throughout.
    //-->
                    <td id=CaptionBox class=Caption align=center colspan="3"><font face="Arial, Helvetica, sans-serif" size="2"><br>
                      <b>TR Bird Walk Slide Show</b></font></td>
                  </tr>
                </table>
              </center>

**ajfmrf** · 07-04-2012, 06:04 PM

Your code shows use of both the alt and title for each image.(this is in reference to the posted code)

However the code you are using in your pages is not the same code.Have you tried to use the code you posted to see if it works? If it does then it includes both alt and title aspects you are asking about.Just make a new version of one slide show using that code you posted with the alt/title and see if it works

**ApacheTech** · 07-04-2012, 06:37 PM

Another webpage made in the 90's. The first thing you should do is bring the source code 20 years forward into the present. Replace all the depreciated tags, use CSS styling, use parentheses where needed, close all open tags and format the structure of the page how you need it, then worry about the back end javascript.

There are currently 30 Errors and 6 Warnings on the page.

Once the HTML is up to scratch, the javascript will fit in a lot easier. We can then start shortening the code and making it a lot more efficient that it is at the moment.

**keyboard** · 07-04-2012, 10:32 PM

Also -

Please use the forum's bbcode tags to make it more readable:

for php code............[php] <?php /* code goes here */ ?> [/php]
for html...............[html] .....[/html]
for js/css/other.......[code] code goes here................[/code]

Just incase we get into another one of these arguments -
We're not telling you to use current standards because we're picky or anything. We're telling you because often, the problem is caused by some incompatiablity caused by outdated code.

<font> tags are no longer supported (use <span style=""></span> instead)
<center> tags are no longer supported (use <span style="text-align:center;"></span> or <div style="width:80%;margin:auto;"></div> 
You shouldn't use tables for non-tabular data. (Don't use them for the layout of your site). Use div tags and css instead.
Always include a Doctype (eg. <!DOCTYPE html>) at the top of your page.

That's all I can think of.
Keyboard1333

**bernie1227** · 07-04-2012, 11:11 PM

If I had a penny for every site layer out with tables.... I'd be a very rich man.
It is, however, amazing how easy it is to replace deprecated tags with CSS styles.
For example:
<center> = text-align:
<font> = font:
Anyone remember <nobr> ?
<nobr> = whitespace: nowrap;
It's really quite simple and more websites need to do it.

**ellenjones6** · 07-05-2012, 10:12 AM

Thank you all so much for your gracious advice.

**ApacheTech** · 07-05-2012, 02:00 PM

Don't be worried that we're saying to bring your HTML up to date and seemingly ignoring the Javasctipt for now. Over the decades since this script was written, a vast amount of changes have been made to the way HTML and Javascript works, especially how they talk to each other and the way things are displayed. Whilst every effort has been made by W3C and Sun Microsystems, there have been a few breaking changes made.

Before we can legitimately debug a script, we need to make sure that those breaking changes have been ironed out, by getting the HTML up to date and valid first. We find in 60-70% of cases that fixing these breaking changes in the HTML will either fix or drastically reduce the problems the client is having. We're also doing our part in keeping the internet rolling forwards, we can't push technology forward whilst still having to cater for nearly 30 year old websites.

There are a lot of online websites that can help you rewrite you website in HTML5 or XHTML5, just use your favourite search engine. It's best if you do it yourself though so that you know what and where everything is.

**jscheuer1** · 07-05-2012, 02:55 PM

To answer the original question, the script needs to assign the title and alt attributes here (additions highlighted):

Code:

function control(how){
if (showHot){
if (how=="H") jss = 10;
if (how=="F") jss = jss + 1;
if (how=="B") jss = jss - 1;
if (jss > (pss)) jss=1;
if (jss < 1) jss = pss;
if (document.all){
document.images.PictureBox.style.filter="blendTrans(duration=2)";
document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";
document.images.PictureBox.filters.blendTrans.Apply();}
document.images.PictureBox.src = preLoad[jss].src;
document.images.PictureBox.alt = Alt[jss];
document.images.PictureBox.title = Title[jss];
if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];
if (document.all) document.images.PictureBox.filters.blendTrans.Play();
}}

I do agree that this is an old, virtually worn out script and markup. It's still serviceable though.

I would suggest updating to something like the Swiss Army slide show, or the Ultimate Fade-in slide show.

**vwphillips** · 07-05-2012, 02:57 PM

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>

</head>

<body>
<table border=0 cellpadding=0 cellspacing=0>
                  <tr>
                    <!--
    The next table cell holds the images.
    Set cell and image width and height the same.
    The img src must have name=PictureBox in its
    tag.  Often, the first image in the Picture
    array in the script is used here; but you
    may also use a different, introductory image
    as we have here, since this image is shown
    only on start-up.
    //-->
                    <td width=468 colspan="3">
                      <div align="center">
                        <h1><font face="Arial, Helvetica, sans-serif" size="2"><br>
                          <b>Birding the Adirondacks:<br>
                          Teddy Roosevelt Bird Walk<br>
                          30 June 2012</b><br>
                          <br>
                          <div id="PictureBox" style="position:relative;width:468px;height:357px;border:solid red 0px;" >
                           <img src=http://www.adirondackvic.org/Images/Adirondack-Birding-Center-Bird-Walk-30-June-2012-3.jpg width=468 height=357  border="1" alt="Birding the Adirondacks | Teddy Roosevelt Bird  Walk (30 June 2012)">
                          </div>
                          </font></h1>
                      </div>
                      <font face="Arial, Helvetica, sans-serif" size="2"><noscript>
                      </noscript><noscript> </noscript><noscript> </noscript><noscript>
                      </noscript><noscript> </noscript><noscript> </noscript><noscript>
                      </noscript><noscript> </noscript><noscript> </noscript><noscript>
                      </noscript><noscript> </noscript><noscript> </noscript><noscript>
                      </noscript><noscript> </noscript></font><font size="2"><noscript>
                      </noscript><noscript> </noscript></font><noscript>
                      <center>
                        <font color="red" face="Arial, Helvetica, sans-serif" size="2"><a name="1"></a>You
                        have JavaScript turned off on your browser. To view the
                        entire slide show, please enable JavaScript.</font>
                      </center>
                      </noscript> </td>
                  </tr>
                  <!--
    The following three cells contain the controls.
    Each of the control a href's must contain class=
    Controls, to attach the styles (see top of script).
    To dress this up a bit, you can of course substitute
    <img src> images for the text in the links.
    //-->
                  <tr>
                    <td width=33% align="center"> <font face="Arial, Helvetica, sans-serif" size="2"><a class=Controls href="#1" onClick="return zxcSlideShow.Next('PictureBox',-1);">Previous
                      Slide</a></font></td>
                    <td width=33% align="center"> <font face="Arial, Helvetica, sans-serif" size="2"><a class=Controls href="#1" onClick="return zxcSlideShow.GoTo('PictureBox',0);">First
                      Slide</a> </font></td>
                    <td width=33% align="center"> <font face="Arial, Helvetica, sans-serif" size="2">&nbsp;&nbsp;
                      &nbsp;<a class=Controls href="#1" onClick="return zxcSlideShow.Next('PictureBox',1);">Next
                      Slide</a> </font></td>
                  </tr>
                  <tr>
                    <!--
    The next table cell holds the captions.
    This table cell must have id=CaptionBox and
    class=Caption in its tag. The default caption
    shows whilst loading in all browsers; NS4
    will show only the default caption, throughout.
    //-->
                    <td  class=Caption align=center colspan="3"><font face="Arial, Helvetica, sans-serif" size="2"><br>
                      <b><span id="CaptionBox" >TR Bird Walk Slide Show</span></b></font></td>
                  </tr>

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

var zxcSlideShow={

 init:function(o){
  var id=o.SlideShowID,obj=document.getElementById(id),txt=document.getElementById(o.CaptionID),srcs=o.SRCArray,ms=o.FadeDuration,img,ary=[],nu=o.DisplayNumber,nu=typeof(nu)=='number'&&srcs[nu]?nu:0,z0=0;
  obj.innerHTML='';
  for (;z0<srcs.length;z0++){
   img=document.createElement('IMG');
   img.src=srcs[z0][0];
   if (srcs[z0][1]){
    img.alt=srcs[z0][1];
    img.title=srcs[z0][1];
   }
   img.style.position='absolute';
   img.style.zIndex=z0!=nu?'0':'1';
   img.style.left='0px';
   img.style.top='0px';
   img.style.width='100%';
   img.style.height='100%';
   obj.appendChild(img);
   ary[z0]=[img,srcs[z0][2]||'','dly'+z0,z0!=nu?0:100];
   this.opac(img,z0!=nu?0:100);
  }
  if (txt){
   txt.innerHTML=ary[nu][1];
  }
  this[id]={
   ary:ary,
   lgth:ary.length-1,
   txt:txt,
   ms:typeof(ms)=='number'?ms:1000,
   cnt:nu
  }
 },

 Next:function(id,ud,goto){
  var o=this[id];
  if (o){
   var cnt=typeof(goto)=='number'?goto:o.cnt+ud,cnt=cnt>o.lgth?0:cnt<0?o.lgth:cnt;
   o.ary[o.cnt][0].style.zIndex='0';
   this.animate(o.ary[o.cnt],o.ary[o.cnt][3],0,new Date(),o.ms,o.ary[o.cnt][2]);
   o.ary[cnt][0].style.zIndex='1';
   this.animate(o.ary[cnt],o.ary[cnt][3],100,new Date(),o.ms,o.ary[cnt][2]);
   if (o.txt){
    o.txt.innerHTML=o.ary[cnt][1];
   }
   o.cnt=cnt;
  }
  return false;
 },

 GoTo:function(id,goto){
  var o=this[id];
  if (o&&o.ary[goto]&&goto!==o.cnt){
   this.Next(id,0,goto);
  }
 },

 animate:function(ary,f,t,srt,mS,to){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   this.opac(ary[0],now);
   ary[3]=now;
  }
  if (ms<mS){
   this[ary[2]]=setTimeout(function(){ oop.animate(ary,f,t,srt,mS,to); },10);
  }
  else {
  }
 },

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


}

zxcSlideShow.init({
 SlideShowID:'PictureBox', // the unique ID name of the image container DIV.          (string)
 SRCArray:[                // an array defining the image src, alt/title and caption. (array)
  // field 0 = the image file path and name.      (string)
  // field 1 = (optional) the image alt/title.    (string)
  // field 2 = (optional) the image caption html. (string)
  ['http://www.adirondackvic.org/Images/Adirondack-Birding-Center-Bird-Walk-30-June-2012-1.jpg',"Barnum Brook from the Jenkins Mountain Trail","Barnum Brook from the Jenkins Mountain Trail"],
  ['http://www.adirondackvic.org/Images/Adirondack-Birding-Center-Bird-Walk-30-June-2012-2.jpg',"Adirondack Wildflowers: Spreading Dogbane blooming near the VIC building","Adirondack Wildflowers: Spreading Dogbane blooming near the VIC building"],
  ['http://www.adirondackvic.org/Images/Adirondack-Birding-Center-Bird-Walk-30-June-2012-3.jpg',"New trail surfacing on the Hemlock Connector","New trail surfacing on the Hemlock Connector"],
  ['http://www.adirondackvic.org/Images/Adirondack-Birding-Center-Bird-Walk-30-June-2012-4.jpg','Adirondack Wildflowers: Common Wood Sorrel blooming on the Boreal Life Trail','Adirondack Wildflowers: Common Wood Sorrel blooming on the Boreal Life Trail'],
  ['http://www.adirondackvic.org/Images/Adirondack-Birding-Center-Bird-Walk-30-June-2012-5.jpg',"Saint Regis Mountain from the trail in front of the VIC building","Saint Regis Mountain from the trail in front of the VIC building"],
  ['http://www.adirondackvic.org/Images/Adirondack-Birding-Center-Bird-Walk-30-June-2012-6.jpg',"Adirondack Wildflowers: Partridge Berry blooming on the Boreal Life Trail","Adirondack Wildflowers: Partridge Berry blooming on the Boreal Life Trail"]
 ],
 CaptionID:'CaptionBox',   //(optional) the unique ID name of the 'caption' element.  (string, default = no captions)
 FadeDuration:1000,        //(optional) the fade duration in milli seconds.           (number, default = 1000)
 DisplayNumber:3           //(optional) the initial image index number.               (number, default = 0)
});
/*]]>*/
</script>
</body>

</html>

**ellenjones6** · 07-06-2012, 03:19 AM

John -- Thank you very much for the code. I incorporated it into one of my slide shows and it works! http://adirondackvic.org/Adirondack-...-June-2012.htm I have looked at the two alternate slideshows you suggested and I will try each of them, although they look a bit challenging for a non-coder like me.

Vic -- Thank you for the script. However, I was not able to get it to work. I could not figure out how to insert it into the code for my page. When I cut and pasted it into a separate page, I found that the images jumped around. http://adirondackvic.org/SlideShowTest5July2012.html What am I doing wrong?