-
Hi John,
Not sure if you can help, but I am still having trouble with this automated scrolling image. The one that my ISP suggested has virtually no support I can find and is more complecated and since I'm a complete rookie i'm totally lost. To be honest I'm amazed how hard this can be on a simple e-commerce package considering almost every online store in the world uses one of these type things!
They suggest this:
http://www.leigeber.com/2008/12/javascript-slideshow/
And show it running here in a mock online store using the same platform:
http://shops.ecorner.com/epages/test1.sf
I've tried my best to upload all the parts in the right places and all the right files etc etc but it just doesn't work for me. I've spent so long on this it's hard to believe and it's driving me crazy! Hopeful you might be able to help out once again?
-
Instead of:
Code:
<div><p>
Welcome to MyAV - The home of Australia's best deals in Audio Visual products!
</p>
<br />
<ul><li><h3>Pic1</h3>/WebRoot/ntdb2/Shops/didi6439/MediaGallery/1.jpg
<br/>
<a href="http://www.oceanicdistribution.com"></a></li><li><h3>Pic2</h3><span>http://www.myav.com.au/WebRoot/ntdb2/Shops/didi6439/MediaGallery/1.jpg</span>
<br/>
<a href="http://www.oceanicdistribution.com"></a></li><li><h3>Pic3</h3><span>/WebRoot/ntdb2/Shops/didi6439/MediaGallery/1.jpg</span>
<br/>
<a href="http://www.oceanicdistribution.com"></a></li><li><h3>Pic4</h3>/WebRoot/ntdb2/Shops/didi6439/MediaGallery/1.jpg
<br/>
<a href="http://www.oceanicdistribution.com"></a></li></ul>
<div id="wrapper">
<div id="fullsize">
<div id="information">
<div id="imgprev" class="imgnav" title="Previous Image"></div>
<div id="imglink"></div>
<div id="imgnext" class="imgnav" title="Next Image"></div>
<div id="image"></div>
<div id="information">
<h3></h3>
<p></p>
</div>
</div>
</div>
<script type="text/javascript" src="/WebRoot/ntdb2/Shops/didi6439/MediaGallery/compressed.js"></script>
<script type="text/javascript">
$('slideshow').style.display='none';
$('wrapper').style.display='block';
var slideshow=new TINY.slideshow("slideshow");
window.onload=function(){
slideshow.auto=true;
slideshow.speed=4;
slideshow.link="linkhover";
slideshow.info="information";
slideshow.thumbs="";
slideshow.left="slideleft";
slideshow.right="slideright";
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active="#fff";
slideshow.init("slideshow","image","imgprev","imgnext","imglink");
}
</script></div>
<div class="Separator"></div>
Do like:
Code:
<div><p>
Welcome to MyAV - The home of Australia's best deals in Audio Visual products!
</p>
<ul id="slideshow">
<li>
<h3>Kiama Beach</h3>
<a href="http://www.oceanicdistribution.com"><span>/WebRoot/ntdb2/Shops/didi6439/MediaGallery/1.jpg</span></a>
<p>Nice Example 1</p>
</li>
<li>
<h3>Kiama Beach</h3>
<a href="http://www.oceanicdistribution.com"><span>/WebRoot/ntdb2/Shops/didi6439/MediaGallery/1.jpg</span></a>
<p>Nice Example 2</p>
</li>
<li>
<h3>Kiama</h3>
<a href="http://www.oceanicdistribution.com"><span>/WebRoot/ntdb2/Shops/didi6439/MediaGallery/1.jpg</span></a>
<p>Nice Example 3</p>
</li>
<li>
<h3>Kiama</h3>
<a href="http://www.oceanicdistribution.com"><span>/WebRoot/ntdb2/Shops/didi6439/MediaGallery/1.jpg</span></a>
<p>Nice Example 4</p>
</li>
</ul>
<div id="wrapper">
<div id="fullsize">
<div id="imgprev" class="imgnav" title="Previous Image"></div>
<div id="imglink"></div>
<div id="imgnext" class="imgnav" title="Next Image"></div>
<div id="image"></div>
<div id="information">
<h3></h3>
<p></p>
</div>
</div>
</div>
<script type="text/javascript" src="/WebRoot/ntdb2/Shops/didi6439/MediaGallery/compressed.js"></script>
<script type="text/javascript">
$('slideshow').style.display='none';
$('wrapper').style.display='block';
var slideshow=new TINY.slideshow("slideshow");
window.onload=function(){
slideshow.auto=true;
slideshow.speed=9;
slideshow.link="linkhover";
slideshow.info="information";
slideshow.thumbs="";
slideshow.left="slideleft";
slideshow.right="slideright";
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active="#fff";
slideshow.init("slideshow","image","imgprev","imgnext","imglink");
}
</script></div>
<div class="Separator"></div>
That gets it sort of working. You are missing the support images:
left.gif
right.gif
scroll-left.gif
scroll-right.gif
which should be in:
/WebRoot/ntdb2/Shops/didi6439/MediaGallery/images/
Place those in that folder. You also need more than the one image for the slide show. Right now you only have:
/WebRoot/ntdb2/Shops/didi6439/MediaGallery/1.jpg
I'm not sure why, but the descriptions aren't showing up. I think you may have edited the style. If so, that could be preventing the descriptions from being seen. But it might be something else. And there's a non-fatal script error:
Code:
Error: element is null
Source File: http://www.myav.com.au/WebRoot/ntdb2/LightBox/js/prototype.js
Line: 1545
which I'm not sure yet what's causing it, or if it's even related to the slide show.
-
John - you are a champion!
It looks like i've got it all working. The way the system works I cant put files where I like it they are all in the /MediaGallery folder and if I want something in the head tag it has to be on all pages. But looks good now :):):)
Now I just have to try and solve this error problem, I don't think people like that on an e-commerce site. Do you have any ideas? Other than that it's all good, I just have to fix the spacing a little and also work out how to remove that double underline under the image changer, not sure why that is there either :p
Thanks again, best help I've ever received from any forum anywhere ever.
-
It doesn't so much matter where the files are, as long as other code that needs to find them has their correct location. In this case this probably means that you were able to edit the css file to point to the correct location of these resource files. That's a perfectly fine way of dealing with it.
The non-fatal error only shows up under aggressive error checking in Firefox, perhaps others. It does not show up in IE as the dreaded status bar yellow triangle. So I wouldn't worry about it. Most users will never see it.
However, I'm now seeing another error that does show up in IE in the status bar. It doesn't happen until after the slide show runs for a little while. It does look to be related to the slide show. It's also non-fatal, but disturbing in that it shows up in the status bar. I will have to look into it.
The dotted lines are are each produced by:
HTML Code:
<div class="Separator"></div>
Code:
<script type="text/javascript" src="/WebRoot/ntdb2/Shops/didi6439/MediaGallery/compressed.js"></script>
<script type="text/javascript">
$('slideshow').style.display='none';
$('wrapper').style.display='block';
var slideshow=new TINY.slideshow("slideshow");
window.onload=function(){
slideshow.auto=true;
slideshow.speed=5;
slideshow.link="linkhover";
slideshow.info="information";
slideshow.thumbs="";
slideshow.left="slideleft";
slideshow.right="slideright";
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active="#fff";
slideshow.init("slideshow","image","imgprev","imgnext","imglink");
}
</script></div>
<div class="Separator"></div></div>
<div class="Separator"></div>
Get rid of one of those and there will be only one dotted line. Get rid of both, and there will be no dotted line.
-
1 Attachment(s)
OK, the first error I was talking about does show up in IE, but only as the page unloads. As a result, the user never sees it.
Now, I'm wondering - if you can add a script like compressed.js, why can't you change a script like prototype.js? Just asking.
On to the second error. This one is intermittent, and appears to be IE only. It definitely relates to the slide show, but doesn't show up in your host's example, only yours. It may be cause by an interaction with scripts on your page that aren't the same as on the host's example, or by a deviation in markup, perhaps something else. But since it's non-fatal, we can catch the error so that it doesn't show up in the status bar.
I'm attaching an updated version of compressed.js that takes care of that:
Attachment 3508
I'm not 100% sure this fixes it, more like 99%. As I say, it's intermittent. But logically, it should, and I've been running it for about an hour now with no problem.
