Dynamically load Images to Conveyor Belt Slideshow

[Intravler]

1) Script Title: Conveyor Belt Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...rightslide.htm

3) Describe problem: I'm new to JS and would like some assistance on how I could dynamically load images into 'conveyor belt' from a DB.

The script is being used within an 'asp' page, can I construct an array from a request selection and pass it as a variable to the script?

Any assistance will greatly appreciated.

Thanks,

[jscheuer1]

If you know how to do that in asp/VBscript, yes. Here is a thread where asp/VBscript interacts with javascript:

http://www.dynamicdrive.com/forums/s...ad.php?t=10510

[ramya]

Hi,

I am using asp.net and c#.net can i get any code samples to dynamically load images

Thanks

[jscheuer1]

Hi,

I am using asp.net and c#.net can i get any code samples to dynamically load images

Thanks

You give no indication of your level of experience - beginner, novice/journeyman, advanced, expert, whatever. But, the only thing that comes to mind is:

http://www.dynamicdrive.com/forums/s...ad.php?t=10510

That uses asp/VBasic to grab images from a directory to an array that javascript can then use in a different gallery type script. I'm just a novice in this area. I know that the code I came up with there can be adapted to just about any javascript that uses images though. On the javascript side I am just about expert so, if you need help adapting it to your javascript purpose, let me know.

[ramya]

Hi john,

Thanks lot for replying

Let me explain what i have did i get the image path from the database and store it in a hiddden field in the page and assign that value to the leftrightslide array

But the images are not getting displayed.Here is the modified script

<script type="text/javascript">

//Specify the slider's width (in pixels)
var sliderwidth="700px"
//Specify the slider's height
var sliderheight="250px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=3
//configure background color:
slidebgcolor="black"

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''


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

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


////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:hidden;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)
}

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 (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.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>')
}
}

function setleftrightslide()
{
alert("in setleftright slide");
var hdImages=document.getElementById("hdImages");
var sImagePath=hdImages.value;
var sSplitPath=sImagePath.split(",");

for(var i=1;i<sSplitPath.length;i++)
{
leftrightslide[i]="<a href=''><img src='"+sSplitPath[i]+"' border=1 width=175 height=250></a>";

}
}
function window_onload() {
setleftrightslide();
fillup();
}

</script>

the setleftrightslide function assign's value to teh leftright slide array

and i have modified the window.onload=fillup() to

function window_onload() {
setleftrightslide();
fillup();
}

so that i can assign values to leftrightslide array

the values are assigning properly but the images dont comeup

and my doubt is if i put the image path which connect to a server like
\\myserver\foldername\filename

will that affect?

and also if i set the values for leftrightslide array in window.onload

if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')

will the above statement get the value of leftrightslide array which is assigned in onload.

Thanks lot in advance.

[ramya]

Hi john,

Regarding experience i have been working as software developer for 3 yrs in C#.net,asp.net i can play around in that well but in javascript i have basic experience.

[jscheuer1]

First off, even with a modified script, you need to include the script credit. Second, I don't see where in your code that:

i get the image path from the database and store it in a hiddden field in the page

To answer your question though, however the image data is gotten to the script, it has to before the browser parses any part of the script that requires the image data. The temp span is required to set the dimensions for the script and to do so needs the image data. Normally this happens as the page is loading, not onload so, may well be before your method makes the data available.

Also, a lot can be found out by looking at both the page's generated source as seen by the browser after being served and then again as seen by the browser after parsing the javascript.

The first is easy, just load the page and use the browser's 'view source'. The second requires a tool like FF's developer's extension that will examine the javascript generated HTML. You can also get a rough idea of this second bit of information by pasting this into the address bar after loading the page:

javascript:document.write('<textarea>'+document.body.innerHTML+'<\/textarea>')

Hit enter, right click on the resulting small textarea, select all, copy and paste to a text editor.

If I had a link to your page, I could investigate (at least most of) these things myself.

The beauty of a getpics.asp or something like it is that the data can be available on the page before it is required by the script.

[ramya]

Hi john,

Thanks again for the reply that was lot of useful information in your post.

for your question

i get the image path from the database and store it in a hiddden field in the page

I do this in codebehind file you know in .net there would be .aspx file and .aspx.cs file (where all of the server code goes ) in that i have a page load event and in that i do the assigning of image path to hidden field.

thats the problem the hidden field will get the value once the page is loaded and it will be assigned to the leftrightslide array.

So as you said the span temp is not getting any data in the method i have implemented.

I am jumping back to the old method like having the predefined leftrightside array.

for the first part john i have the doubt whether if i provide the path like as i asked before \\servername\foldername\filename will it work ?

As you said i have generated the html and attached to this post.when i see in the html the test2 and test3 div have the image path like
http://localhost:3356/kactus/BIGShar...ar06/small.jpg

i dont know y it is considering like this as i said kactus is my server where the images are present.

And if you notice in the span temp the path is like
\kactus\BIGShare\HIRESENTERTAINMENT\Mar06\small.jpg

Have look at it whether this gives any idea for you whats wrong going on.

i am just developing the website so i am unable to provide you the link of the page sorry about that.

Thanks

[ramya]

Hi john,

I figured out what is the problem I was having the path with single "\" but it should be "\\" now the images come up fine

Now my only doubt is how to provide span temp with data if i figure out that i can implement my method of loading images from database.

if you have any thoughts or alternatives for setting the dimensions for the script can you please let me know.

But you are a champ your method of generating html helped me to identify what was wrong. Many thanks for that.

[jscheuer1]

Looking at your htmlgenerated.txt file, it appears that the temp span is getting populated but that the <nobr> tag is missing. it also looks as though you have commented out this line:

leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'

To wit (from your htmlgenerated.txt file):

//leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'

It may be, at this point, as simple as removing the (above red highlighted) comment slashes from your code. Also, please reinstate the script credit.