PDA

View Full Version : Dynamically load Images to Conveyor Belt Slideshow



Intravler
10-24-2006, 07:34 PM
1) Script Title: Conveyor Belt Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/leftrightslide.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
10-25-2006, 06:24 AM
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/showthread.php?t=10510

ramya
02-28-2007, 02:32 AM
Hi,

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

Thanks

jscheuer1
02-28-2007, 03:41 AM
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/showthread.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
02-28-2007, 04:14 AM
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
02-28-2007, 04:22 AM
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
02-28-2007, 04:48 AM
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
02-28-2007, 05:41 AM
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/BIGShare/HIRES/ENTERTAINMENT/Mar06/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
02-28-2007, 05:58 AM
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.:cool:

jscheuer1
02-28-2007, 06:21 AM
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.

ramya
02-28-2007, 10:38 PM
Hi john,

Your right i need to uncomment the line as you said and everything works fine.

I am loading the images from the database itself what i have done is

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

I am inisialising the leftrightslide array so that the span temp can set the dimensions for the script and after that assigning the image path's in onload event so that i am able to load images dynamically too.

But this is not right i dont know how many images will be loaded and if i dont inisialize properly the images will not come up.

Can you let me know of any alternative to set the dimensions of span temp.

Thanks lot for yor help.

ramya
02-28-2007, 10:40 PM
Hi john,

Also what you mean by this line

Also, please reinstate the script credit.

jscheuer1
03-01-2007, 05:05 AM
First off, even with a modified script, you need to include the script credit.


Also, please reinstate the script credit.


Hi john,

Also what you mean by this line

Also, please reinstate the script credit.

Your page is in violation of Dynamic Drive's usage terms (http://www.dynamicdrive.com/notice.htm), which, among other things, state that the script credit must appear in the source code of the page(s) using the script. Please reinstate the notice first.

By way of further explanation, this:


<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"

should look like so:


<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="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"

This has nothing much to do with me as, I have no direct affiliation with Dynamic Drive, it is Dynamic Drive's policy. Except to say that, I do happen to really like Dynamic Drive and am grateful to them for providing this forum - among other things so, I do wish to help them enforce their policy.

ramya
03-01-2007, 06:55 AM
Hi john,

Sure i will add the lines on my page i had it as i was doing lot of stuffs with it I must have deleted by mistake.

Many thanks for your help my slideshow is working fine and i am loading all the images dynamically too.