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("ctl00$pagecontent$ctl00$productlist$ctl00$imbadd", "", true, "productlist1739", "", 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("ctl00$pagecontent$ctl00$productlist$ctl01$imbadd", "", true, "productlist1736", "", 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("ctl00$pagecontent$ctl00$productlist$ctl02$imbadd", "", true, "productlist1720", "", 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("ctl00$pagecontent$ctl00$productlist$ctl03$imbadd", "", true, "productlist1714", "", 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("ctl00$pagecontent$ctl00$productlist$ctl04$imbadd", "", true, "productlist1697", "", 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' }); };
Comments
Post a Comment