I've successfully implemented the jqeury cycle plugin ( http://jquery.malsup.com/cycle/ )

 

I'm using a pager with pagerAnchorBuilder to provide control and go directly to a slide. It works perfectly in IE8, Safari, Firefox, Chrome and Opera. However, in IE6/IE7, the slideshow plays but the pager anchor does not appear:

 

Here's the javascript:

 

function loadSlideshow()
{
  $(function() {
    $("#picsContent").cycle({
          fx: 'turnDown',
          speed: 2000,
          timeout: 6000,
       pager: '#slideControl1',
       pagerAnchorBuilder: function(index, el) {
       return '<a href="javascript:void(0);"></a>';
      }
    });
  });
}

 

Here's the HTML:

 

<div id="pics">
   <div id="picsContent">

           <div>

                  <span class="left1"><b>Diamond Rings and <br />Color Stone Rings</b><br /><br />More text goes here...</span><img src="/prestige/global/images/slide_rings.jpg" border="0" width="740" height="190" />

            </div>

            <div>

                  <span class="left1"><b>Bracelets and Earrings</b><br /><br />More text goes here...</span><img src="/prestige/global/images/slide_bracelets_earrings.jpg" border="0" width="740" height="190" />

            </div>

            <div>

                  <span class="left1"><b>Necklaces and Pendants</b><br /><br />More text goes here...</span><img src="/prestige/global/images/slide_necklaces_pendants.jpg" border="0" width="740" height="190" />

            </div>

       </div>

     <div id="slideControl1"></div>

</div>

 

Here's the CSS:

 

#pics {
   position: relative;
   width: 804px;  

   height: 210px;

   overflow: hidden; 

   z-index: 0;
}

 

#picsContent {
   width: 750px;
   height: 210px;
   position: absolute;
   left: 30px;
   top: 20px;
   z-index: 0;
}

 

#slideControl1 {
 position: absolute;
 top: 16px;
 left: 710px;
 font-family: Verdana, sans-serif;
 font-size: 8px;
 color: #010066;
    z-index: 1;
}

 

#slideControl1 a {
 border: 1px solid #A3D1FF;
 background-color: #f0f0f0;
 text-decoration: none;
 margin: 0px 2px;
 padding: 0px 4px;
}

 

#slideControl1 a.activeSlide {
 background-color: #A3D1FF;
}

 

#slideControl1 a:focus {
 outline: none;
}

 

.left1 {
 position: absolute;
 top: 0px;
 left: 0px;
 width: 130px !important;
 height: 210px;
 font-family: Tahoma, sans-serif;
 font-size: 13px;
 color: #666666;
 text-align: left;
 padding: 5px 5px;
 background-color: #ffffff;
 filter: alpha(opacity=70);
 -moz-opacity: .7;
 -khtml-opacity: .7;
 opacity: .7;  
 z-index: 1;

}

 

To see it in action, view the following page with IE6 or IE7: http://www.prestigejewelrysf.com/prestige/

 

Thanks in advance for your help,

 

-Isaac