DynamicDrive Conveyor Belt Slideshow...

User 291218 Photo


Registered User
5 posts

I am trying to add a conveyor belt slideshow to the text portion of the spotlight area. I use both the newest versions of SCC Pro and SCD Pro. I am using the HTML widget in pages view and using javascript code from the following link that works fine in a plain HTML page http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htm. the actual code from my test site is listed below. When I cut and paste the code, I get an error message "you have some unclosed tags. Please check your source." Again, the exact same code without the HTML brqacketsworks fine on a blank HTML or PHP page. When I publish to my shop site medxchangellc.com/llcshop/ all I see is a link to the Dynamic Drive webpage that shares the javascript. I know that the pictures are in the right place since the code works in the plain HTML page and I know it can be done in the spotlight area because a different script, Wow Slider www.wowslider.com with slightly different features works fine when published. The code for that script that works is posted below also for comparison:

Can anyone help a modest newcomer to get this site up and running for a friend who is anxious to get going and really impressed with the conveyor belt slideshow effect. Any help woulde be SOOOOOOO appreciated Look below for the two sets of code:

CONVEYOR BELT SLIDESHOW (the one that doesn't work):(

[[[<body>
<script type="text/javascript">

/***********************************************
* Conveyor belt slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/


//Specify the slider's width (in pixels)
var sliderwidth="1200px"
//Specify the slider's height
var sliderheight="450px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=8
//configure background color:
slidebgcolor="#EAEAEA"

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://medxchangellc.com/llcshop/category.php"><img src="http://medxchangellc.com/llcshop/conveyor/1.jpg" border=1></a>'
leftrightslide[1]='<a href="http://medxchangellc.com/llcshop/cart.php"><img src="http://medxchangellc.com/llcshop/conveyor/2.jpg" border=1></a>'
leftrightslide[2]='<a href="http://medxchangellc.com/llcshop/index.php"><img src="http://medxchangellc.com/llcshop/conveyor/3.jpg" border=1></a>'
leftrightslide[3]='<a href="http://medxchangellc.com/llcshop/checkoutgc.php"><img src="http://medxchangellc.com/llcshop/conveyor/4.jpg" border=1></a>'
leftrightslide[4]='<a href="http://medxchangellc.com/llcshop/checkoutwpay.php"><img src="http://medxchangellc.com/llcshop/conveyor/5.jpg" border=1></a>'

//Specify gap between each image (use HTML):
var imagegap="5 "

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=1


////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:visible;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide

function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup

function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"

}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap
}
}


if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>

<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://dynamicdrive.com">Dynamic Drive</a></font></p>
<body/>]]]

Here is where I could add some text or a picture


WOW SLIDER (the one that does work when published):D

[[[<!DOCTYPE html>
<html>
<head>
<title>Wow image slider 1</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Made with WOW Slider - Create beautiful, responsive image sliders in a few clicks. Awesome skins and animations. Jquery slider free download" />

<!-- Start WOWSlider.com HEAD section --> <!-- add to the <head> of your page -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->

</head>
<body style="background-color:#d7d7d7;margin:0">

<!-- Start WOWSlider.com BODY section --> <!-- add to the <body> of your page -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="data1/images/modularramp.jpg" alt="modularramp" title="modularramp" id="wows1_0"/></li>
<li><img src="data1/images/stairlift.jpg" alt="stairlift" title="stairlift" id="wows1_1"/></li>
<li><img src="data1/images/jazzyselect7red300x375.jpg" alt="JazzySelect7Red300x375" title="JazzySelect7Red300x375" id="wows1_2"/></li>
<li><a href="http://wowslider.com/vi"><img src="data1/images/ll450_berry_3.jpg" alt="bootstrap slider" title="LL450_Berry_3" id="wows1_3"/></a></li>
<li><img src="data1/images/stylus300x300.jpg" alt="Stylus300x300" title="Stylus300x300" id="wows1_4"/></li>
</ul></div>
<div class="ws_bullets"><div>
<a href="#" title="modularramp"><span><img src="data1/tooltips/modularramp.jpg" alt="modularramp"/>1</span></a>
<a href="#" title="stairlift"><span><img src="data1/tooltips/stairlift.jpg" alt="stairlift"/>2</span></a>
<a href="#" title="JazzySelect7Red300x375"><span><img src="data1/tooltips/jazzyselect7red300x375.jpg" alt="JazzySelect7Red300x375"/>3</span></a>
<a href="#" title="LL450_Berry_3"><span><img src="data1/tooltips/ll450_berry_3.jpg" alt="LL450_Berry_3"/>4</span></a>
<a href="#" title="Stylus300x300"><span><img src="data1/tooltips/stylus300x300.jpg" alt="Stylus300x300"/>5</span></a>
</div></div><div class="ws_script" style="position:absolute;left:-99%"><a href="http://wowslider.com">jquery slider free download</a> by WOWSlider.com v8.2</div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->

</body>
</html>]]]

Thanks in advance for the help.


User 2336860 Photo


Registered User
252 posts

You do not need to add <body> tags to HTML that is added via the HTML Element in SCCP. That could be a major cause of your issues.

User 291218 Photo


Registered User
5 posts

Thanks Chefscott
Took them out but nothing changed.
User 187934 Photo


Senior Advisor
20,188 posts

I would place the code on a plain html page and upload that to your host and then use an iframe in your shops page to show the content.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 291218 Photo


Registered User
5 posts

Eric,

You, sir, are a genius. I have to do a lot of playing around with variables for size and location on the page but it does work. The only thing left is that since it is in an iframe, the link page for each picture when clicked wants to come up in the iframe and is limited to the size of the iframe. Any ideas around this. Is there a way to call a page to display outside of the iframe? You can take a look at the test sight at http://www.medxchangellc.com/llcshop/ .
User 187934 Photo


Senior Advisor
20,188 posts

Set your image links up like this.
<a href="http://medxchangellc.com/llcshop/category.php" target="_parent">
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.