Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

I need some short javascript coding 1

Status
Not open for further replies.
dwest100

dwest100

Technical User
Aug 9, 2003
59
US
Hi folk,
I have an image slide show script which I have managed to combine (read hack) with the ASP FSO to populate the arrays from the folder/file system on the server.

The javascript then lists the subfolder names in the Gallery folder as links on the page which can be clicked to change the slide show to retrieve and show the files within the desired subfolder.

Effectively allowing one to categorize the images by putting them in separate folders.

That works great but I desparately need a way to start/stop/forward/backward through the images being displayed.

I'm not sharp enough to figure this out so I need a guru to code it. I'm cross-eyed from getting as far as I have. :)

I'm sure it's not going to be to hard to do for someone who lives and breathes javascript.

If you can help, please reply and I'll get the file to you for review.

Many thanks!!
 
Sort by date Sort by votes

>> If you can help, please reply and I'll get the file to you for review.

Maybe you should consider posting your code, so we can see what you have so far... Then we can suggest ways to add the functionality you desire to it.

It's hard to add functionality to existing code without knowing how it would all fit together.

Dan
 
Upvote 0 Downvote
Thanks for the reply! The code is posted here as requested. An active sample can be seen here:
Note the inactive links above of the image. That's the navigational functionality I wish to add. I haven't a clue how to do it. I'm a hacker at coding javascript/ASP. I'd gladly pay for a solution.
Code: 
<table border="0" align="center" cellpadding="0" cellspacing="0" class="slideshow">
  <tr>
    <td rowspan="2" class="menu"><%
'//USE ASP FILE SYSTEM OBJECT TO POPULATE JAVASCRIPT VARIABLES WITH FOLDERS AND FILE NAMES.//
Dim strPicArray
Dim strFolderArray

'//URL path to GALLERY FOLDER//
galleryFolderPath = "[URL unfurl="true"]http://www.downtoearthsites.com/admin/assets/gallery/"[/URL]
'//PHYSICAL PATH TO GALLERY FOLDERS//
galleryPhysicalPath = "c:\Site_DownToEarthSites\admin\assets\gallery"
'//INSTATIATE THE FILE SYSTEM OBJECT
Set fso = CreateObject("Scripting.FileSystemObject")
'//GET INSTANCE OF THE GALLERYFOLDER
Set galleryfolder = fso.GetFolder(galleryPhysicalPath)
'//COLLECT ALL THE SUBFOLDERS IN THE GALLERYFOLDER
Set foldercollection = galleryfolder.SubFolders
intTotFolders = -1
For Each subfolder in foldercollection
	  intTotFolders = intTotFolders + 1
	  SubFolderName = SubFolder.Name
	  ReDim strFolderArray(intTotFolders)
		'WRITE THE JAVASCRIPT ARRAY FOR THE FOLDER SELECTION LINKS
		For s = intTotFolders to UBound(strFolderArray)
		Response.Write("<a href='javascript:setslide(" & intTotFolders & ")'>" & SubFolderName & "</a><br>")
        Next
Next      	
%>
    </td>
    <td class="navigation">Previous&nbsp;&nbsp;Start&nbsp;&nbsp;Stop&nbsp;&nbsp;Next</td>
  </tr>
  <tr>
    <td class="imagewindow"><script language="JavaScript1.2">
/*Multi image slideshow script- by javascriptkit.com
Visit JavaScript Kit ([URL unfurl="true"]http://javascriptkit.com)[/URL] for script
Credit must stay intact for use*/

//#1 SPECIFY number of slideshows
var number_of_slideshows=10

//#2 SPECIFY interval between slide (2000=2 seconds)
var interval=2000

//#3 SHOULD each slide be linked to a unique URL?
var linked=0

var slideshows=new Array(number_of_slideshows)
for (i=0; i <number_of_slideshows; i++)
slideshows[i]=new Array()

<%
'//THIS ASP CODE WRITES THE JAVASCRIPT ARRAY OF THE SUBFOLDERS OF THE GALLERY AND THE IMAGES INSIDE THE
'//SUBFOLDERS.  THIS ALLOWS FOR SIMPLY UPLOADING THE IMAGES INTO THE APPROPRIATE FOLDER ON THE SERVER.
'//USE ASP FILESYSTEM OBJECT TO CAPTURE SUBFOLDER NAMES UNDER THE GALLERY FOLDER//
intTotFolders = 0
For Each subfolder in foldercollection
	  intTotFolders = intTotFolders + 1
	  SubFolderName = SubFolder.Name
	   '//CAPTURE IMAGE FILE NAMES WITHIN THE SUBFOLDER//
		set imagesfolder=fso.GetFolder(galleryfolder & "/" & SubFolderName)
		Set filecollection = imagesfolder.Files
		intTotPics = 0
		For Each file in filecollection
      	intTotPics = intTotPics + 1
		Next
        Redim strPicArray(intTotPics)
        'STORE PICTURE FILE NAMES IN AN ARRAY
        x = 0
        For Each file in filecollection
        strPicArray(x) = SubFolderName & "/" & file.Name
        x = x + 1
        Next
        Redim strFolderArray(intTotFolders)
	    'WRITE THE JAVASCRIPT ARRAY FOR THE FILES IN THE SUBFOLDER
		intFolderNo = 0
		For s = 0 to UBound(strFolderArray)-2
		intFolderNo = intFolderNo + 1
		Next
        	intPicNo = 0
	    	For x = 0 to UBound(strPicArray)-1
        	Response.Write("slideshows[" & intFolderNo & "][" & intPicNo & "]='" & GalleryFolderPath & strPicArray(x) & "'" & vbCrLf)
           	intPicNo = intPicNo + 1
			Next
Next
%>
<!--THIS NEXT SECTION HAS NOT BEEN MODIFIED FOR fso FUNCTIONALITY YET-->
<!--Remove the below portion if "var linked" above is set to 0-->

var slidelinks=new Array(number_of_slideshows)
for (i=0; i <number_of_slideshows; i++)
slidelinks[i]=new Array()

//#5 SPECIFY urls of 1st slideshow
slidelinks[0][0]='[URL unfurl="true"]http://mysite.com/car1.htm'[/URL]
slidelinks[0][1]='[URL unfurl="true"]http://mysite.com/car2.htm'[/URL]
slidelinks[0][2]='[URL unfurl="true"]http://mysite.com/car3.htm'[/URL]


//SPECIFY urls of 2nd slideshow (remove if number_of_slides=1)
slidelinks[1][0]='[URL unfurl="true"]http://mysite.com/house1.htm'[/URL]
slidelinks[1][1]='[URL unfurl="true"]http://mysite.com/house2.htm'[/URL]
slidelinks[1][2]='[URL unfurl="true"]http://mysite.com/house3.htm'[/URL]


//SPECIFY urls of 3rd slideshow (remove if number_of_slides less than 3)
slidelinks[2][0]='[URL unfurl="true"]http://mysite.com/boat1.htm'[/URL]
slidelinks[2][1]='[URL unfurl="true"]http://mysite.com/boat2.htm'[/URL]
slidelinks[2][2]='[URL unfurl="true"]http://mysite.com/boat3.htm'[/URL]

function clickredir(){
window.location=slidelinks[maininc][subinc]
}

<!-- END removal ---------------------------------->
<!--THE PREVIOUS SECTION HAS NOT BEEN MODIFIED FOR fso FUNCTIONALITY YET-->

<!--Run the script-->
var maininc=0
var subinc=0

if (linked)
document.write('<a href="javascript:clickredir()"><img src="'+slideshows[0][0]+'" name="multislide" border=0></a>')
else
document.write('<img src="'+slideshows[0][0]+'" name="multislide">')

function slideit(){
subinc= (subinc<slideshows[maininc].length-1)? subinc+1: 0
document.images.multislide.src=slideshows[maininc][subinc]
}

function setslide(which){
clearInterval(runit)
maininc=which
subinc=0
runit=setInterval("slideit()",interval)
}

runit=setInterval("slideit()",interval)

    </script></td>
  </tr>
</table>

Thanks!
 
Upvote 0 Downvote
I would say that linking the "stop" link to run this JS code:

Code: 
<a href="javascript:clearTimeout(runit);">

the "start" link to run this JS code:

Code: 
<a href="javascript:runit=setInterval("slideit()",interval);">

that will sort you out for stopping and starting...

For the next and previous, you'd need to stop the slideshow, increment or decrement the "subinc" variable by one, test for it being < 0 or > number of images (as the "slideit" function currently does), and setting it to the other boundry, depending on which way you're flicking through the pictures).. That should sort you out WRT next and previous, too.

Hope this helps,
Dan

 
Upvote 0 Downvote
Thanks so much Dan!
I think I can handle that. If I run into problems I will continue the thread with questions.
Otherwise, I'll post the solution and let you know I was successful.
Regards,
Don
 
Upvote 0 Downvote
Hi Dan,
I've almost got this licked but I simply do not understand what this line of code is doing. I know it's testing for <0 or greater than the number of images, but I don't understand how.
Could you put it into "english" for me? I have javascript books out the wazoo but I can't seem to find anything that helps me make sense of the way this is coded.

Thanks!
Code: 
subinc= (subinc<slideshows[maininc].length-1)? subinc+1: 0
 
Upvote 0 Downvote
Hi Dan,
Disregard the previous post. After an hour of searching my library I find that the statement is written using the Conditional operator.

Pretty rare but very compact. I learn something every day :)

Thanks! On to the next hurdle in getting this to work.
Don
 
Upvote 0 Downvote
Hi Dan,
Here's the completed solution. Do you see anything I could do to make it more "correct" from a coding standpoint?
Thanks for your help!
Code: 
<table border="0" align="center" cellpadding="0" cellspacing="0" class="slideshow">
  <tr>
    <td rowspan="2" nowrap class="menu"><%
'//USE ASP FILE SYSTEM OBJECT TO POPULATE JAVASCRIPT VARIABLES WITH FOLDERS AND FILE NAMES.//
Dim strPicArray
Dim strFolderArray

'//URL path to GALLERY FOLDER//
galleryFolderPath = "[URL unfurl="true"]http://www.downtoearthsites.com/admin/assets/gallery/"[/URL]
'//PHYSICAL PATH TO GALLERY FOLDERS//
galleryPhysicalPath = "c:\Site_DownToEarthSites\admin\assets\gallery"
'//INSTATIATE THE FILE SYSTEM OBJECT
Set fso = CreateObject("Scripting.FileSystemObject")
'//GET INSTANCE OF THE GALLERYFOLDER
Set galleryfolder = fso.GetFolder(galleryPhysicalPath)
'//COLLECT ALL THE SUBFOLDERS IN THE GALLERYFOLDER
Set foldercollection = galleryfolder.SubFolders
intTotFolders = -1
For Each subfolder in foldercollection
	  intTotFolders = intTotFolders + 1
	  SubFolderName = SubFolder.Name
	  ReDim strFolderArray(intTotFolders)
		'WRITE THE JAVASCRIPT ARRAY FOR THE FOLDER SELECTION LINKS
		For s = intTotFolders to UBound(strFolderArray)
		Response.Write("<a href='javascript:setslide(" & intTotFolders & ")'>" & SubFolderName & "</a><br>")
        Next
Next      	
%>
    </td>
    <td class="navigation"><a href="javascript:previous();">Previous</a>&nbsp;&nbsp;<a href="javascript:start();">Start</a>&nbsp;&nbsp;<a href="javascript:stop();">Stop</a>&nbsp;&nbsp;<a href="javascript:next();">Next</a></td>
  </tr>
  <tr>
    <td class="imagewindow"><script language="JavaScript1.2">
/*Multi image slideshow script- by javascriptkit.com
Visit JavaScript Kit ([URL unfurl="true"]http://javascriptkit.com)[/URL] for script
Credit must stay intact for use*/

//#1 SPECIFY number of slideshows
var number_of_slideshows=10

//#2 SPECIFY interval between slide (2000=2 seconds)
var interval=2000

//#3 SHOULD each slide be linked to a unique URL?
var linked=0

var slideshows=new Array(number_of_slideshows)
for (i=0; i <number_of_slideshows; i++)
slideshows[i]=new Array()

<%
'//THIS ASP CODE WRITES THE JAVASCRIPT ARRAY OF THE SUBFOLDERS OF THE GALLERY AND THE IMAGES INSIDE THE
'//SUBFOLDERS.  THIS ALLOWS FOR SIMPLY UPLOADING THE IMAGES INTO THE APPROPRIATE FOLDER ON THE SERVER.
'//USE ASP FILESYSTEM OBJECT TO CAPTURE SUBFOLDER NAMES UNDER THE GALLERY FOLDER//
intTotFolders = 0
For Each subfolder in foldercollection
	  intTotFolders = intTotFolders + 1
	  SubFolderName = SubFolder.Name
	   '//CAPTURE IMAGE FILE NAMES WITHIN THE SUBFOLDER//
		set imagesfolder=fso.GetFolder(galleryfolder & "/" & SubFolderName)
		Set filecollection = imagesfolder.Files
		intTotPics = 0
		For Each file in filecollection
      	intTotPics = intTotPics + 1
		Next
        Redim strPicArray(intTotPics)
        'STORE PICTURE FILE NAMES IN AN ARRAY
        x = 0
        For Each file in filecollection
        strPicArray(x) = SubFolderName & "/" & file.Name
        x = x + 1
        Next
        Redim strFolderArray(intTotFolders)
	    'WRITE THE JAVASCRIPT ARRAY FOR THE FILES IN THE SUBFOLDER
		intFolderNo = 0
		For s = 0 to UBound(strFolderArray)-2
		intFolderNo = intFolderNo + 1
		Next
        	intPicNo = 0
	    	For x = 0 to UBound(strPicArray)-1
        	Response.Write("slideshows[" & intFolderNo & "][" & intPicNo & "]='" & GalleryFolderPath & strPicArray(x) & "'" & vbCrLf)
           	intPicNo = intPicNo + 1
			Next
Next
%>
<!--THIS NEXT SECTION HAS NOT BEEN MODIFIED FOR fso FUNCTIONALITY YET-->
<!--Remove the below portion if "var linked" above is set to 0-->

var slidelinks=new Array(number_of_slideshows)
for (i=0; i <number_of_slideshows; i++)
slidelinks[i]=new Array()

//#5 SPECIFY urls of 1st slideshow
slidelinks[0][0]='[URL unfurl="true"]http://mysite.com/car1.htm'[/URL]
slidelinks[0][1]='[URL unfurl="true"]http://mysite.com/car2.htm'[/URL]
slidelinks[0][2]='[URL unfurl="true"]http://mysite.com/car3.htm'[/URL]


//SPECIFY urls of 2nd slideshow (remove if number_of_slides=1)
slidelinks[1][0]='[URL unfurl="true"]http://mysite.com/house1.htm'[/URL]
slidelinks[1][1]='[URL unfurl="true"]http://mysite.com/house2.htm'[/URL]
slidelinks[1][2]='[URL unfurl="true"]http://mysite.com/house3.htm'[/URL]


//SPECIFY urls of 3rd slideshow (remove if number_of_slides less than 3)
slidelinks[2][0]='[URL unfurl="true"]http://mysite.com/boat1.htm'[/URL]
slidelinks[2][1]='[URL unfurl="true"]http://mysite.com/boat2.htm'[/URL]
slidelinks[2][2]='[URL unfurl="true"]http://mysite.com/boat3.htm'[/URL]

function clickredir(){
window.location=slidelinks[maininc][subinc]
}

<!-- END removal ---------------------------------->
<!--THE PREVIOUS SECTION HAS NOT BEEN MODIFIED FOR fso FUNCTIONALITY YET-->

<!--Run the script-->
var maininc=0
var subinc=0

if (linked)
document.write('<a href="javascript:clickredir()"><img src="'+slideshows[0][0]+'" name="multislide" border=0></a>')
else
document.write('<img src="'+slideshows[0][0]+'" name="multislide">')

function slideit(){
subinc= (subinc<slideshows[maininc].length-1)? subinc+1: 0
document.images.multislide.src=slideshows[maininc][subinc]
}

function setslide(which){
clearInterval(runit)
maininc=which
subinc=0
runit=setInterval("slideit()",interval)
}

function start(){
runit=setInterval("slideit()",interval)
}

function stop(){
clearTimeout(runit)
}

function next(){
stop()
subinc= (subinc<slideshows[maininc].length-1)? subinc+1: 0
document.images.multislide.src=slideshows[maininc][subinc]
}

function previous(){
stop()
subinc= (subinc>0)? subinc-1: slideshows[maininc].length-1
document.images.multislide.src=slideshows[maininc][subinc]
}

runit=setInterval("slideit()",interval)

    </script></td>
  </tr>
</table>
 
Upvote 0 Downvote
Dan,
One other problem exists.
I also need to preload the next image in the array when any given image is displayed.
REASONS:
1-In case the administrator uploads an updated image (with the same filename of course), I want the revised version to show in the browser on the next cycle.
2-The other being to speed the availability of the next image if it's the first visit someone made to the site.

I added the last two lines to the slideit function to hopefully facilitate this:
Code: 
function slideit(){
subinc= (subinc<slideshows[maininc].length-1)? subinc+1: 0
document.images.multislide.src=slideshows[maininc][subinc]
imgObject= new Image()
imgObject.src = slideshows[maininc][subinc + 1]
}

To test, I uploaded an updated image to the server, but it did not replace the cached image in the browser until I refreshed with F5. Obviously, my addition isn't functional or the browser requires a refresh even though the code works.

Can you advise me on this as you did with the previous problem?

Many thanks!
Don
 
Upvote 0 Downvote

I don't know of any way you can force a browser to replace an image in it's cache programatically.

I guess you could try the old trick of preloading it with a random number / timestamp after it.. so something like this:

Code: 
imgObject.src = slideshows[maininc][subinc + 1] + '?' + new Date().getTime().toString();

Not sure if it works or not - but worth a try ;o)

Dan
 
Upvote 0 Downvote
Hi Dan,
Thanks for the suggestion. It does attach the date stamp to the reloaded image but to no avail because the array is still calling old file name.

Would it be possible to have javascript update the array filename when each image is re-downloaded?

If so, can you advise how to do that by pointing me in the right direction?

Thanks!
Don
 
Upvote 0 Downvote

>> can you advise how to do that by pointing me in the right direction?

Sure... Add the code I gave you to add a timestamp to the imageObject to the end of the previous line instead (after setting the image src).

Dan
 
Upvote 0 Downvote
DOUBLE BINGO Dan!!
Works like a charm! I can't thank you enough for your help!
Don
 
Upvote 0 Downvote

Nice - I'll remember that trick works for images - I'm bound to need it in the future at some point, too ;o)

Dan
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
833
lexer
lexer
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
2K
Mike Lewis
Mike Lewis
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
416
Daniel K
Daniel K
Marclem
  • Locked
  • Question
javascript:navigator.registerProtocolHandler
Replies
1
Views
409
Marclem
Marclem
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
804
JScannell
JScannell

Part and Inventory Search

Sponsor

Back
Top