Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: Dynamically load Images to Conveyor Belt Slideshow

  1. #1
    Join Date
    Oct 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Dynamically load Images to Conveyor Belt Slideshow

    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,

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Feb 2007
    Location
    australia
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi,

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

    Thanks

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by ramya View Post
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Feb 2007
    Location
    australia
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  6. #6
    Join Date
    Feb 2007
    Location
    australia
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Feb 2007
    Location
    australia
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  9. #9
    Join Date
    Feb 2007
    Location
    australia
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
    To wit (from your htmlgenerated.txt file):

    Code:
    //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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •