I have a client who has a website using CommerceSpace by Network Solutions and

Question

0

Asked: May 22, 20262026-05-22T14:27:09+00:00 2026-05-22T14:27:09+00:00

I have a client who has a website using CommerceSpace by Network Solutions and

0

I have a client who has a website using CommerceSpace by Network Solutions and would like to have an image fader on the front page. The only issue I run into is I cannot seem to get it to work right because the formatting is in a table. That can’t be changed because that’s the way this software lays everything out. Does anybody have an idea? I would like to use the jQuery Cycle plugin, but I cannot get it to work right. Help?

It was working with scriptaculous before, but we didn’t decide to use that due to jQuery working better for us, and this is what 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;
for (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([";

    for (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([";
    for (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([";
    for (i=0;i<colcount;i++) { timeout+="new Effect.Fade('featimg"+oldImage+"td"+i+"', {duration: 0}),";}
    for (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([";
    for (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 is the general format of the 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>

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-05-22T14:27:10+00:00

Editorial Team

2026-05-22T14:27:10+00:00Added an answer on May 22, 2026 at 2:27 pm

Have javascript write out a div with your 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'
    });
};

0

Reply
Share
Share

- Report

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I have a client who has a website using CommerceSpace by Network Solutions and

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply