html - jQuery Slideshow that supports a table format? -

i have client has website using commercespace network solutions , have image fader on front page. issue run cannot seem work right because formatting in table. can't changed because that's way software lays out. have idea? use jquery cycle plugin, cannot work right. help?

it working scriptaculous before, didn't decide use due jquery working better us, , worked before.

var e2; var f2; var g2; activeimage = 2; paused=0;   if (document.getelementsbyclassname('specials')[0] && document.getelementbyid('ctl00_pagecontent_ctl00_productlist')) { trs = document.getelementbyid('ctl00_pagecontent_ctl00_productlist').getelementsbytagname('tr'); featcount = 0; colcount = 1; (i=0;i<trs.length;i++) {      if (trs[i].classname == "nojs") { continue; }     featcount++; trs[i].id="featimg"+featcount;      tds = trs[i].getelementsbytagname('td'); tdnum = 0;     timeout = "new effect.parallel([";      (j=0;j<tds.length;j++) {          if (tds[j].classname == "nojs") { continue; }         tds[j].id=trs[i].id+"td"+tdnum;         if (tds[j].getelementsbytagname('div')[0]) {             tds[j].getelementsbytagname('div')[0].id = tds[j].id+"div";             if (featcount != activeimage) {                 tds[j].style.display='none';                  new effect.opacity(tds[j].id+"div", {from: 1, to:0, duration: 0});             }         }         tdnum++;      } } function changeimg(direction,paused) {     cleartimeout(e2);cleartimeout(f2);cleartimeout(g2);     for3 = ""; for1 = "";     oldimage = activeimage;     if (direction=='previous'){activeimage = (activeimage == 1) ? featcount : activeimage-1;}     else { activeimage = (activeimage >= featcount) ? 1 : activeimage+1;}      timeout = "new effect.parallel([";     (i=0;i<colcount;i++) { timeout+="new effect.opacity('featimg"+oldimage+"td"+i+"div', {from: 1, to:0, duration: .5})"; if ((i+1)<colcount) { timeout+=","; }     }     e2 = settimeout(timeout+"], {duration: 0, sync: true})",10);      timeout = "new effect.parallel([";     (i=0;i<colcount;i++) { timeout+="new effect.fade('featimg"+oldimage+"td"+i+"', {duration: 0}),";}     (i=0;i<colcount;i++) { timeout+="new effect.appear('featimg"+activeimage+"td"+i+"', {duration: 0})"; if ((i+1)<colcount) { timeout+=","; }     }     f2 = settimeout(timeout+"], {duration: 0, sync: true})",600);      timeout = "new effect.parallel([";     (i=0;i<colcount;i++) { timeout+="new effect.opacity('featimg"+activeimage+"td"+i+"div', {from: 0, to:1, duration: 1})"; if ((i+1)<colcount) { timeout+=","; }     }     g2 = settimeout(timeout+"], {duration: 0, sync: true})",700);      if (direction=='auto' && paused==0) {t=settimeout("changeimg('auto',"+paused+")",10000);}     else {(pause(0))}; } var t=settimeout("changeimg('auto',0)",7000); 

}

this general format of table.

<table id="ctl00_pagecontent_ctl00_productlist" class="product-list" cellspacing="0" border="0" style="width:100%;border-collapse:collapse;"> <tr> <td class="product-list-item-container" style="width:100%;"> <div class="product-list-item" onkeypress="javascript:return webform_firedefaultbutton(event, 'ctl00_pagecontent_ctl00_productlist_ctl00_imbadd')"> <div class='caption_wrapper' style='float:left; width:240px;'> <a href="/antiqueancient3000yearoldegyptiancarnelianstone-7-1-4-1-1-1-1-1-1-4-3-1-1-1-1-1-1-1-1-2-9.aspx"> <img class='product-list-img' src='/images/products/thumb/85caacopy.png' title='' style='width:240px; height:315px; border:none;' border='0' /> </a> <div class='caption_description'> <div class='caption_description_content' style='width:220px;'> <p class="caption-title">  large ancient    egyptian new kingdom clear glass bead 1500 bc. </p>  <p class="caption-price" style="padding-top:10px;">$28.00</p> <p style="padding-top:10px; margin-left:-3px;"><input type="image" name="ctl00$pagecontent$ctl00$productlist$ctl00$imbadd" id="ctl00_pagecontent_ctl00_productlist_ctl00_imbadd" src="/themes/barclay-1-2-1/images/buttons/cart_btn_add.gif" onclick="javascript:webform_dopostbackwithoptions(new webform_postbackoptions(&quot;ctl00$pagecontent$ctl00$productlist$ctl00$imbadd&quot;, &quot;&quot;, true, &quot;productlist1739&quot;, &quot;&quot;, false, false))" style="border-width:0px;" /><a href="/antiqueancient3000yearoldegyptiancarnelianstone-7-1-4-1-1-1-1-1-1-4-3-1-1-1-1-1-1-1-1-2-9.aspx"><img src="/themes/barclay-1-2-1/images/buttons/cart_btn_view.gif" style="margin-top:-31px; margin-left:118px;"></a></p> </div> </div> </div> </div> </td> </tr><tr> <td class="product-list-item-container-alt" style="width:100%;"> <div class="product-list-item" onkeypress="javascript:return webform_firedefaultbutton(event, 'ctl00_pagecontent_ctl00_productlist_ctl01_imbadd')">  <div class='caption_wrapper' style='float:left; width:240px;'> <a href="/antiqueancient3000yearoldegyptiancarnelianstone-7-1-4-1-1-1-1-1-1-4-3-1-1-1-1-1-1-1-1-2-6.aspx"> <img class='product-list-img' src='/images/products/thumb/82caacopy.png' title='' style='width:240px; height:315px; border:none;' border='0' /> </a> <div class='caption_description'> <div class='caption_description_content' style='width:220px;'> <p class="caption-title">  large ancient egyptian new kingdom clear glass bead 1500 bc.</p> <p class="caption-price" style="padding-top:10px;">$28.00</p> <p style="padding-top:10px; margin-left:-3px;"><input type="image" name="ctl00$pagecontent$ctl00$productlist$ctl01$imbadd" id="ctl00_pagecontent_ctl00_productlist_ctl01_imbadd" src="/themes/barclay-1-2-1/images/buttons/cart_btn_add.gif" onclick="javascript:webform_dopostbackwithoptions(new webform_postbackoptions(&quot;ctl00$pagecontent$ctl00$productlist$ctl01$imbadd&quot;, &quot;&quot;, true, &quot;productlist1736&quot;, &quot;&quot;, false, false))" style="border-width:0px;" /><a href="/antiqueancient3000yearoldegyptiancarnelianstone-7-1-4-1-1-1-1-1-1-4-3-1-1-1-1-1-1-1-1-2-6.aspx"><img src="/themes/barclay-1-2-1/images/buttons/cart_btn_view.gif" style="margin-top:-31px; margin-left:118px;"></a></p> </div> </div>  </div> </div> </td> </tr><tr> <td class="product-list-item-container" style="width:100%;"> <div class="product-list-item" onkeypress="javascript:return webform_firedefaultbutton(event, 'ctl00_pagecontent_ctl00_productlist_ctl02_imbadd')"> <div class='caption_wrapper' style='float:left; width:240px;'> <a href="/antiqueancient3000yearoldegyptiancarnelianstone-7-1-4-1-1-1-1-1-1-4-3-1-1-1-1-1-1-1-1-1-1-1-1-2.aspx"> <img class='product-list-img' src='/images/products/thumb/91caacopy.png' title='' style='width:240px; height:315px; border:none;' border='0' /> </a> <div class='caption_description'>  <div class='caption_description_content' style='width:220px;'> <p class="caption-title"> ancient        egyptian    new   kingdom   magical glass   bead     1500 bc  </p> <p class="caption-price" style="padding-top:10px;">$24.00</p> <p style="padding-top:10px; margin-left:-3px;"><input type="image" name="ctl00$pagecontent$ctl00$productlist$ctl02$imbadd" id="ctl00_pagecontent_ctl00_productlist_ctl02_imbadd" src="/themes/barclay-1-2-1/images/buttons/cart_btn_add.gif" onclick="javascript:webform_dopostbackwithoptions(new webform_postbackoptions(&quot;ctl00$pagecontent$ctl00$productlist$ctl02$imbadd&quot;, &quot;&quot;, true, &quot;productlist1720&quot;, &quot;&quot;, false, false))" style="border-width:0px;" /><a href="/antiqueancient3000yearoldegyptiancarnelianstone-7-1-4-1-1-1-1-1-1-4-3-1-1-1-1-1-1-1-1-1-1-1-1-2.aspx"><img src="/themes/barclay-1-2-1/images/buttons/cart_btn_view.gif" style="margin-top:-31px; margin-left:118px;"></a></p> </div> </div> </div> </div> </td> </tr><tr>  <td class="product-list-item-container-alt" style="width:100%;"> <div class="product-list-item" onkeypress="javascript:return webform_firedefaultbutton(event, 'ctl00_pagecontent_ctl00_productlist_ctl03_imbadd')"> <div class='caption_wrapper' style='float:left; width:240px;'> <a href="/rareashantibraceletc1880africanartantiquebracelet-scabra6-1-1-1.aspx"> <img class='product-list-img' src='/images/products/thumb/45caacopy.png' title='' style='width:240px; height:315px; border:none;' border='0' /> </a> <div class='caption_description'> <div class='caption_description_content' style='width:220px;'> <p class="caption-title">  rare   ashanti  bracelet c1880 </p> <p class="caption-price" style="padding-top:10px;">$120.00</p>  <p style="padding-top:10px; margin-left:-3px;"><input type="image" name="ctl00$pagecontent$ctl00$productlist$ctl03$imbadd" id="ctl00_pagecontent_ctl00_productlist_ctl03_imbadd" src="/themes/barclay-1-2-1/images/buttons/cart_btn_add.gif" onclick="javascript:webform_dopostbackwithoptions(new webform_postbackoptions(&quot;ctl00$pagecontent$ctl00$productlist$ctl03$imbadd&quot;, &quot;&quot;, true, &quot;productlist1714&quot;, &quot;&quot;, false, false))" style="border-width:0px;" /><a href="/rareashantibraceletc1880africanartantiquebracelet-scabra6-1-1-1.aspx"><img src="/themes/barclay-1-2-1/images/buttons/cart_btn_view.gif" style="margin-top:-31px; margin-left:118px;"></a></p> </div> </div> </div> </div> </td> </tr><tr> <td class="product-list-item-container" style="width:100%;"> <div class="product-list-item" onkeypress="javascript:return webform_firedefaultbutton(event, 'ctl00_pagecontent_ctl00_productlist_ctl04_imbadd')"> <div class='caption_wrapper' style='float:left; width:240px;'>  <a href="/antiqueancient3000yearoldegyptiancarnelianstone-7-1-4-1-1-1-1-1-1-4-3-1-1-1-1-1-1-1-1.aspx"> <img class='product-list-img' src='/images/products/thumb/86caacopy.png' title='' style='width:240px; height:315px; border:none;' border='0' /> </a> <div class='caption_description'> <div class='caption_description_content' style='width:220px;'> <p class="caption-title">    ancient    egyptian    new kingdom   magical glass   bead   1500 bc</p> <p class="caption-price" style="padding-top:10px;">$24.00</p> <p style="padding-top:10px; margin-left:-3px;"><input type="image" name="ctl00$pagecontent$ctl00$productlist$ctl04$imbadd" id="ctl00_pagecontent_ctl00_productlist_ctl04_imbadd" src="/themes/barclay-1-2-1/images/buttons/cart_btn_add.gif" onclick="javascript:webform_dopostbackwithoptions(new webform_postbackoptions(&quot;ctl00$pagecontent$ctl00$productlist$ctl04$imbadd&quot;, &quot;&quot;, true, &quot;productlist1697&quot;, &quot;&quot;, false, false))" style="border-width:0px;" /><a href="/antiqueancient3000yearoldegyptiancarnelianstone-7-1-4-1-1-1-1-1-1-4-3-1-1-1-1-1-1-1-1.aspx"><img src="/themes/barclay-1-2-1/images/buttons/cart_btn_view.gif" style="margin-top:-31px; margin-left:118px;"></a></p> </div> </div> </div> </div>  </td> </tr> </table> 

have javascript write out div images.

document.write('<div class = "slideshow1">'); $('.product-list-img').each( function() {      document.write('<img src="'+this.src+'">')  }); document.write('</div>')  window.onload= function() {   $('.slideshow1').cycle({         fx:       'fade',         speed:     1500,         timeout:   4000,         next:      'slideshow1'     }); };