PDA

View Full Version : Ultimate Fade-in slideshow (v1.5) Request



csdealer
08-29-2006, 05:28 PM
1) Script Title: Ultimate Fade-in slideshow (v1.5)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem:

Hi,

I'm new here, I hope you can help. I love this script.

Is there a way to have the JS select all of the photos from a folder and display them in the slideshow without having to type in each of the paths.

I have a large folder of images that continually are updated and changing (adding some each month, deleting others, etc). I do not want to have to modify the script every time I update my photos. I would prefer to have the js take all of the images and just loop thru the entire sequence. I do not need to add links to any of the photos but I do need to control the output size of the photos.

I would greatly appreciate a reply.

Thank you.

jscheuer1
08-29-2006, 06:19 PM
Yes but, the images and the linked pages (if any) would need to be represented by names in a numbered sequence.

Say you had a directory called 'images' with ten images in it numbered 0.jpg to 9.jpg, you could do this:


var fadeimages=new Array();
for (var i_tem = 0; i_tem < 10; i_tem++)
fadeimages[i_tem]=["images/"+i_tem+".jpg", "", ""] //plain image syntax

Beyond that, you would need to have a server side language. Currently (as far as I know) only PHP and asp/VBscript methods have been worked out for this (pulling a list of images and/or files from a directory). For this slide show script, some modifications would need to be done to one of these server side scripts and using links with the images in the slide show (if desired) would make things more complicated.

blm126
08-29-2006, 06:23 PM
Well, this script (http://www.dynamicdrive.com/forums/showthread.php?t=12520) manages it without a server side language. It relies on XMLHTTPRequest though. It may be able to be used as a base.

jscheuer1
08-29-2006, 06:36 PM
Well, this script (http://www.dynamicdrive.com/forums/showthread.php?t=12520) manages it without a server side language. It relies on XMLHTTPRequest though. It may be able to be used as a base.

Totally dysfunctional in Opera and probably others. The problem (from the thread you mention) about load times would be lessened by using smaller images and (if possible) preloading.

csdealer
08-29-2006, 11:29 PM
Hello,
Sorry, I have away from my computer this afternoon. Thank you for your reply's. I have found this vbs script (attached) and have made it work except that I do not know how to make it.

Can you help?

Thank you again!

csdealer
08-29-2006, 11:30 PM
sorry, make it loop?

csdealer
08-29-2006, 11:34 PM
If you can't tell, I'm a newbee. Here's the vbs script...

Option Explicit

' slideshow delay in milliseconds
Const lngDelay = 5000

' valid file extensions for slides
Const strValid = ".jpg.jpeg.gif.png"

' output file name
Const strFileName = "slideshow.htm"

' ******************** DO NOT MODIFY BELOW THIS LINE ********************

' Define variables.
Dim objFSO
Dim objOutput
Dim strImage
Dim strExt
Dim strFirst
Dim lngCount
Dim objFolder
Dim objFile

' Create the output file.
Set objFSO = CreateObject("Scripting.FileSystemObject")
Set objOutput = objFSO.CreateTextFile(strFileName)

' Output the page header and beginning of slideshow script.
objOutput.WriteLine "<html>" & vbCrLf & "<head>"
objOutput.WriteLine "<script language=""javascript"">" & vbCrLf & "<!--"
objOutput.WriteLine "function PreloadImage(tmpSImage)"
objOutput.WriteLine "{"
objOutput.WriteLine vbTab & "var tmpOImage=new Image();"
objOutput.WriteLine vbTab & "tmpOImage.src=tmpSImage;"
objOutput.WriteLine vbTab & "return tmpOImage;"
objOutput.WriteLine "}"
objOutput.WriteLine "var strImage = new Array("

' Get a folder object from the current to parse for files.
Set objFolder = objFSO.GetFolder(".")

' Loop through the files in the folder.
For Each objFile In objFolder.Files
' Does the file have an extension?
If InStr(objFile.Name,".") Then
strImage = objFile.Name
' Get the file name extension.
strExt = LCase(Mid(strImage,InStrRev(strImage,".")))
' Is the extension a valid extension?
If InStr(strValid,strExt) Then
' Output the code to load the image.
objOutput.Write "'" & strImage & "',"
If Len(strFirst) = 0 Then strFirst = strImage
lngCount = lngCount + 1
End If
End If
Next
objOutput.WriteLine "''" & vbCrLf & ");"

' Output the rest of the slideshow script.
With objOutput
.WriteLine "var objImage = new Array(strImage.length-2);"
.WriteLine "var lngCount = strImage.length - 1;"
.WriteLine "function LoadImages()"
.WriteLine "{"
.WriteLine vbTab & "if (lngCount >= 0)"
.WriteLine vbTab & "{"
.WriteLine vbTab & vbTab & "document.all['theSPN'].innerHTML=lngCount;"
.WriteLine vbTab & vbTab & "objImage[lngCount] = PreloadImage(strImage[lngCount]);"
.WriteLine vbTab & vbTab & "lngCount--;"
.WriteLine vbTab & vbTab & "setTimeout('LoadImages()', 50);"
.WriteLine vbTab & "}"
.WriteLine vbTab & "else"
.WriteLine vbTab & "{"
.WriteLine vbTab & vbTab & "lngCount = 0;"
.WriteLine vbTab & vbTab & "document.all['theDIV'].innerHTML='<img src=""" & strFirst & """ id=""theIMG"">';"
.WriteLine vbTab & vbTab & "setTimeout('SwapImage()'," & lngDelay & ");"
.WriteLine vbTab & "}"
.WriteLine "}"
.WriteLine "function SwapImage()"
.WriteLine "{"
.WriteLine vbTab & "++lngCount;"
.WriteLine vbTab & "if (lngCount<strImage.length-1)"
.WriteLine vbTab & "{"
.WriteLine vbTab & vbTab & "document.all['theIMG'].src=objImage[lngCount].src;"
.WriteLine vbTab & vbTab & "setTimeout('SwapImage()'," & lngDelay & ");"
.WriteLine vbTab & "}"
.WriteLine "}"
.WriteLine "//-->" & vbCrLf & "</script>"
.WriteLine "</head>" & vbCrLf & "<body onLoad=""setTimeout('LoadImages()'," & lngDelay / 1000 & ");"">"
.WriteLine "<div align=""left"" id=""theDIV"" style=""width: 250px; width: 250px; text-align:center; border:solid 2px #000;""><p>Please wait...<br>"
.WriteLine "Loading " & lngCount & " images...<br>(<span id=""theSPN"">0</span>)</p></div>"
.WriteLine "</body>" & vbCrLf & "</html>"
End With

' Close the output file.
objOutput.Close

csdealer
08-29-2006, 11:37 PM
Here's the html & js that the vbs produces...

<html>
<head>
<script language="javascript">
<!--
function PreloadImage(tmpSImage)
{
var tmpOImage=new Image();
tmpOImage.src=tmpSImage;
return tmpOImage;
}
var strImage = new Array(
'amethyst checkerboard trill- 14mm- 7.jpg','aquamarine gem trill- 13mm- 7.jpg','burma ruby 5mm trill pair- 1.jpg','cambodian blue zircon oval- 12.jpg','ceylon cushion blue sapphire- 5.jpg','color change burma spinel- 2.jpg','emerald 9mm trill- 1.jpg','gem 10x12mm oval peridot- 4.jpg','german cut fancy citrine- 11.jpg','imperial topaz 9mm trill- 2.jpg','multi-color tahitian strand- 9-12mm framed.jpg','nigerian blue-green 9mm tourmaline- 2.jpg','pink tourmaline trill pair- 5811- 1.jpg','princess ceylon blue sapphire- 4.jpg','sri lankan rhodolite garnet-10x12mm- 5.jpg','tanzanite 10.jpg','trill ceylon blue sapphire- 4mm pair- .jpg',''
);
var objImage = new Array(strImage.length-2);
var lngCount = strImage.length - 1;
function LoadImages()
{
if (lngCount >= 0)
{
document.all['theSPN'].innerHTML=lngCount;
objImage[lngCount] = PreloadImage(strImage[lngCount]);
lngCount--;
setTimeout('LoadImages()', 50);
}
else
{
lngCount = 0;
document.all['theDIV'].innerHTML='<img src="amethyst checkerboard trill- 14mm- 7.jpg" id="theIMG">';
setTimeout('SwapImage()',5000);
}
}
function SwapImage()
{
++lngCount;
if (lngCount<strImage.length-1)
{
document.all['theIMG'].src=objImage[lngCount].src;
setTimeout('SwapImage()',5000);
}
}
//-->
</script>
</head>
<body onLoad="setTimeout('LoadImages()',5);">
<div align="left" id="theDIV" style="width: 250px; width: 250px; text-align:center; border:solid 2px #000;"><p>Please wait...<br>
Loading 17 images...<br>(<span id="theSPN">0</span>)</p></div>
</body>
</html>

csdealer
08-29-2006, 11:39 PM
Can something like this be used with your js so that the images will also fade.

blm126
08-29-2006, 11:54 PM
Yes, but I don't think anyone here knows ASP(That is what the file you posted is). If you can also use PHP, I would be able to help.

csdealer
08-29-2006, 11:57 PM
Hi blm126,

If php will work I can probably use it. I just want to have these photos continue to loop.

csdealer
08-29-2006, 11:58 PM
Actually, if you could just tell me how to loop the javascript, I can add it to the vbs.

blm126
08-30-2006, 12:16 AM
Sorry, not quite sure what your last post meant.

csdealer
08-30-2006, 12:23 AM
I posted an entire html page and the javascript that I am testing right after the vbs script. If you know js and can make that script loop ... I can add it to the vbs script myself and make this work. The vbs script finds all of the photos in my folder and simply adds it to the js. This works fine except that the slide show only loops through once (17 photos) and then stops.

blm126
08-30-2006, 12:29 AM
Sorry, I can't as a matter of principle. The script you posted only works in Internet Explorer.

csdealer
08-30-2006, 12:35 AM
It works great for me in firefox... ?

jscheuer1
08-30-2006, 06:41 AM
I could be wrong but, I think blm126 is confusing server side asp/VBscript with client side VBscript. The former, if supported by a given server, will work for any browser that can parse its output code - just like PHP. Client side VBscript can only be parsed by IE as far as I know.

All you really need to run Ultimate Fade-in slideshow (v1.5) from a directory of images on a server with asp support is an asp file that will create the fadeimages array(s) you require. All of the rest of the script can run 'as is' on the page that is displaying it. I made up an asp/VBscript file to get images from a directory, it is for a slightly different script but, could be fairly easily modified for Ultimate Fade-in slideshow (v1.5). It would only get tricky if you want the images displayed to have links, and even that should be able to be worked out if need be. See this thread for the file I am referring to:

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

Particularly this post:

http://www.dynamicdrive.com/forums/showpost.php?p=40710&postcount=11

blm126
08-30-2006, 07:38 PM
I could be wrong but, I think blm126 is confusing server side asp/VBscript with client side VBscript.
No, I'm referring to the use of document.all.


<html>
<head>
<script language="javascript">
<!--
function PreloadImage(tmpSImage)
{
var tmpOImage=new Image();
tmpOImage.src=tmpSImage;
return tmpOImage;
}
var strImage = new Array(
'amethyst checkerboard trill- 14mm- 7.jpg','aquamarine gem trill- 13mm- 7.jpg','burma ruby 5mm trill pair- 1.jpg','cambodian blue zircon oval- 12.jpg','ceylon cushion blue sapphire- 5.jpg','color change burma spinel- 2.jpg','emerald 9mm trill- 1.jpg','gem 10x12mm oval peridot- 4.jpg','german cut fancy citrine- 11.jpg','imperial topaz 9mm trill- 2.jpg','multi-color tahitian strand- 9-12mm framed.jpg','nigerian blue-green 9mm tourmaline- 2.jpg','pink tourmaline trill pair- 5811- 1.jpg','princess ceylon blue sapphire- 4.jpg','sri lankan rhodolite garnet-10x12mm- 5.jpg','tanzanite 10.jpg','trill ceylon blue sapphire- 4mm pair- .jpg',''
);
var objImage = new Array(strImage.length-2);
var lngCount = strImage.length - 1;
function LoadImages()
{
if (lngCount >= 0)
{
document.all['theSPN'].innerHTML=lngCount;
objImage[lngCount] = PreloadImage(strImage[lngCount]);
lngCount--;
setTimeout('LoadImages()', 50);
}
else
{
lngCount = 0;
document.all['theDIV'].innerHTML='<img src="amethyst checkerboard trill- 14mm- 7.jpg" id="theIMG">';
setTimeout('SwapImage()',5000);
}
}
function SwapImage()
{
++lngCount;
if (lngCount<strImage.length-1)
{
document.all['theIMG'].src=objImage[lngCount].src;
setTimeout('SwapImage()',5000);
}
}
//-->
</script>
</head>
<body onLoad="setTimeout('LoadImages()',5);">
<div align="left" id="theDIV" style="width: 250px; width: 250px; text-align:center; border:solid 2px #000;"><p>Please wait...<br>
Loading 17 images...<br>(<span id="theSPN">0</span>)</p></div>
</body>
</html>

jscheuer1
08-30-2006, 08:20 PM
No, I'm referring to the use of document.all.

Well, that is easy enough to fix (switch to document.getElementById). However, FF often will support it (depending upon how it is used), albeit with protest (warning) in the javascript console. Opera does support it. Still, for widest compatibility and forward compatibility, document.getElementById is by far preferred. You can branch it with document.all for backward compatibility, if desired.

csdealer
08-30-2006, 10:06 PM
OK folks... All corrections have been made and we are up to snuff & we are working correctly with the correct elements. Thank you.

Now if you would... Please just help me add to the js so that my customized slideshow will loop continuously.

Here is the corrected html page that works in IE6 & firefox...

<html>
<head>
<style type="text/css">
<!--
body {margin: 0; padding: 0;}
p {padding: 33% 0 0 0; font-size: 12px;}
-->
</style>
<script language="javascript">
<!--
function PreloadImage(tmpSImage)
{
var tmpOImage=new Image();
tmpOImage.src=tmpSImage;
return tmpOImage;
}
var strImage = new Array(
'amethyst checkerboard trill- 14mm- 7.jpg','aquamarine gem trill- 13mm- 7.jpg','burma ruby 5mm trill pair- 1.jpg','cambodian blue zircon oval- 12.jpg','ceylon cushion blue sapphire- 5.jpg','color change burma spinel- 2.jpg','emerald 9mm trill- 1.jpg','gem 10x12mm oval peridot- 4.jpg','german cut fancy citrine- 11.jpg','imperial topaz 9mm trill- 2.jpg','multi-color tahitian strand- 9-12mm framed.jpg','nigerian blue-green 9mm tourmaline- 2.jpg','pink tourmaline trill pair- 5811- 1.jpg','princess ceylon blue sapphire- 4.jpg','sri lankan rhodolite garnet-10x12mm- 5.jpg','tanzanite 10.jpg','trill ceylon blue sapphire- 4mm pair- .jpg',''
);
var objImage = new Array(strImage.length-2);
var lngCount = strImage.length - 1;
function LoadImages()
{
if (lngCount >= 0)
{
document.getElementById('theSPN').innerHTML=lngCount;
objImage[lngCount] = PreloadImage(strImage[lngCount]);
lngCount--;
setTimeout('LoadImages()', 50);
}
else
{
lngCount = 0;
document.getElementById('theDIV').innerHTML='<img src="amethyst checkerboard trill- 14mm- 7.jpg" id="theIMG">';
setTimeout('SwapImage()',8000);
}
}
function SwapImage()
{
++lngCount;
if (lngCount<strImage.length-1)
{
document.getElementById('theIMG').src=objImage[lngCount].src;
setTimeout('SwapImage()',8000);
}
}
//-->
</script>
</head>
<body onLoad="setTimeout('LoadImages()',1);">
<div align="left" id="theDIV" style="position: absolute; top: 0px; left: 0px; width: 272px; height: 242px; text-align:center; border:solid 2px #000;"><p>Please wait...<br>
Loading 17 images...<br>(<span id="theSPN">0</span>)</p></div>
</body>
</html>

Thank you again in advance.

NOTE: I tried to use your getPictures script but was not able to make it work.

blm126
08-31-2006, 01:30 AM
Please try and make use of the code tags. Here try this.


<html>
<head>
<style type="text/css">
body {margin: 0; padding: 0;}
p {padding: 33% 0 0 0; font-size: 12px;}
</style>
<script language="javascript">
function PreloadImage(tmpSImage){
var tmpOImage=new Image();
tmpOImage.src=tmpSImage;
return tmpOImage;
}
var strImage = new Array(
'amethyst checkerboard trill- 14mm- 7.jpg','aquamarine gem trill- 13mm- 7.jpg','burma ruby 5mm trill pair- 1.jpg','cambodian blue zircon oval- 12.jpg','ceylon cushion blue sapphire- 5.jpg','color change burma spinel- 2.jpg','emerald 9mm trill- 1.jpg','gem 10x12mm oval peridot- 4.jpg','german cut fancy citrine- 11.jpg','imperial topaz 9mm trill- 2.jpg','multi-color tahitian strand- 9-12mm framed.jpg','nigerian blue-green 9mm tourmaline- 2.jpg','pink tourmaline trill pair- 5811- 1.jpg','princess ceylon blue sapphire- 4.jpg','sri lankan rhodolite garnet-10x12mm- 5.jpg','tanzanite 10.jpg','trill ceylon blue sapphire- 4mm pair- .jpg',''
);
var objImage = new Array();
var lngCount = strImage.length - 1;
function LoadImages(){
if (lngCount >= 0){
document.getElementById('theSPN').innerHTML=lngCount;
objImage[lngCount] = PreloadImage(strImage[lngCount]);
lngCount--;
setTimeout('LoadImages()', 50);
}
else{
lngCount = 0;
document.getElementById('theDIV').innerHTML='<img src="amethyst checkerboard trill- 14mm- 7.jpg" id="theIMG">';
setTimeout('SwapImage()',8000);
}
}
function SwapImage(){
++lngCount;
if (lngCount<strImage.length-1){
document.getElementById('theIMG').src=objImage[lngCount].src;
setTimeout('SwapImage()',8000);
}
else{
lngCount = 0;
SwapImage();
}
}
</script>
</head>
<body onLoad="setTimeout('LoadImages()',1);">
<div align="left" id="theDIV" style="position: absolute; top: 0px; left: 0px; width: 272px; height: 242px; text-align:center; border:solid 2px #000;"><p>Please wait...<br>
Loading 17 images...<br>(<span id="theSPN">0</span>)</p></div>
</body>
</html>

csdealer
08-31-2006, 01:49 AM
Thanks blm126,

But I get NO pictures at all. Just a broken link where the photo should be.

Sorry.

blm126
08-31-2006, 01:53 AM
<html>
<head>
<style type="text/css">
body {margin: 0; padding: 0;}
p {padding: 33% 0 0 0; font-size: 12px;}
</style>
<script language="javascript">
function PreloadImage(tmpSImage){
var tmpOImage=new Image();
tmpOImage.src=tmpSImage;
return tmpOImage;
}
var strImage = new Array(
'amethyst checkerboard trill- 14mm- 7.jpg','aquamarine gem trill- 13mm- 7.jpg','burma ruby 5mm trill pair- 1.jpg','cambodian blue zircon oval- 12.jpg','ceylon cushion blue sapphire- 5.jpg','color change burma spinel- 2.jpg','emerald 9mm trill- 1.jpg','gem 10x12mm oval peridot- 4.jpg','german cut fancy citrine- 11.jpg','imperial topaz 9mm trill- 2.jpg','multi-color tahitian strand- 9-12mm framed.jpg','nigerian blue-green 9mm tourmaline- 2.jpg','pink tourmaline trill pair- 5811- 1.jpg','princess ceylon blue sapphire- 4.jpg','sri lankan rhodolite garnet-10x12mm- 5.jpg','tanzanite 10.jpg','trill ceylon blue sapphire- 4mm pair- .jpg',''
);
var objImage = new Array(strImage.length-2);
var lngCount = strImage.length - 1;
function LoadImages(){
if (lngCount >= 0){
document.getElementById('theSPN').innerHTML=lngCount;
objImage[lngCount] = PreloadImage(strImage[lngCount]);
lngCount--;
setTimeout('LoadImages()', 50);
}
else{
lngCount = 0;
document.getElementById('theDIV').innerHTML='<img src="amethyst checkerboard trill- 14mm- 7.jpg" id="theIMG">';
setTimeout('SwapImage()',8000);
}
}
function SwapImage(){
++lngCount;
if (lngCount<strImage.length-1){
document.getElementById('theIMG').src=objImage[lngCount].src;
setTimeout('SwapImage()',8000);
}
else{
lngCount = 0;
SwapImage();
}
}
</script>
</head>
<body onLoad="setTimeout('LoadImages()',1);">
<div align="left" id="theDIV" style="position: absolute; top: 0px; left: 0px; width: 272px; height: 242px; text-align:center; border:solid 2px #000;"><p>Please wait...<br>
Loading 17 images...<br>(<span id="theSPN">0</span>)</p></div>
</body>
</html>

csdealer
08-31-2006, 01:57 AM
It seams to load the pictures ( it counts down the pre-load) but still no photos.

sorry again

jscheuer1
08-31-2006, 03:16 AM
NOTE: I tried to use your getPictures script but was not able to make it work.

When I get some time, which looks like soon. I will work up a demo of it with Ultimate Fade-in slideshow (v1.5). It really is a proven method, just needs a little tweaking. To save me time going over the details of what you are trying to do again -

Are the images in the slideshow linked to anything or not?

jscheuer1
08-31-2006, 03:50 AM
OK, here is a demo:

http://loisimages.com/directory_1_horses/horse_ufade_safari.htm

You will see that the getpics.asp file is in the directory which contains the images (tbn in this case). Here is the updated (for Ultimate Fade-in slideshow (v1.5)) getpics.asp:


<%
' The Runtime code:
' Create some asp variables for
Dim strPath 'Path of directory
Dim objFSO 'FileSystemObject variable
Dim objFolder 'Folder variable
Dim objItem 'Variable used to loop through the contents of the folder

' You could just as easily read this from some sort of input
' NOTE: As currently implemented, this needs to end with the /
strPath = "./"

' Create our FSO
Set objFSO = Server.CreateObject("Scripting.FileSystemObject")

' Get a handle on our folder
Set objFolder = objFSO.GetFolder(Server.MapPath(strPath))

'Create some javascript variables
%>
var counter=0
var fadeimages=new Array()
<%

'Selecting only images
Set RegExObj = New RegExp
With RegExObj
.Pattern = "gif|jpg|png"
.IgnoreCase = True
End With
For Each objItem In objFolder.Files
If RegExObj.Test(Right(objItem.Name, 3)) Then
'Add each one to the array using javascript
%>
fadeimages[counter]=["<%= objItem.Name %>", "", ""]
counter++
<%
End If
Next 'objItem

' All done! Kill off our asp object variables.
Set objItem = Nothing
Set objFolder = Nothing
Set objFSO = Nothing
Set RegExObj = Nothing
%>

Here are the essential changes to Ultimate Fade-in slideshow (v1.5):


<script type="text/javascript" src="tbn/getpics.asp"></script>
<script type="text/javascript">
/***********************************************
* Ultimate Fade-In Slideshow (v1.5): Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
* Updated for better Safari and Opera 9+ Compliance
* by jscheuer1 in http://www.dynamicdrive.com/forums
***********************************************/

for (var i_tem = 0; i_tem < fadeimages.length; i_tem++)
fadeimages[i_tem][0]="tbn/"+fadeimages[i_tem][0];

var fadebgcolor="white"

////NO need to edit beyond here/////////////

You will see that the array which is usually present in the Ultimate Fade-In Slideshow has been replaced by the script call to getpics.asp and the for loop. The for loop simply prepends the appropriate directory name to where the images are. If the images and getpics are in the same directory as the page using them, the for loop would not be required.

Notes: For this demo I have used my own mod of Ultimate Fade-In Slideshow which also fades in for Safari and Opera 9+.

csdealer
08-31-2006, 04:05 AM
Hi John,

Thank you. The images are currently not linked to anything. I have a folder of photos that changes often (ie: things sell, new items, etc). I double click the following vbs script (below) which is in the same folder as the photos. It collects the names of the photos from the folder, and produces an html page with the photos automatically inserted into the js code (NO ENTRY of file names of images required). The correct javascript for the slideshow and the css for the page is also inserted into the html page automatically (via the "objOutput.WriteLine" commands in the vbs). I am then I-framing this completed page (3-slideshome.htm) page into my index page. Simple to update whenever I need to.

Everything works great EXCEPT that the slideshow script will only loop one time thru the photos. I want the slideshow to run continuously.

I originally wanted to use your fade-in slideshow but I do NOT want to have to enter all of the addresses of the images each time I update the folder. This other vbs script (which I have modified to fit my pages) is really great. Your script would be EVEN BETTER if it could automatically add the photos from a folder without having to type in image tags all the time.

Have I lost you yet?

NOTE: You can try this very easily by putting a few photos into a folder along with the vbs file, double-click the vbs file and see what happens. You will get an almost instant html page and you will see what I mean.

Here are the exact codes of the vbs file & the html page that it produces...

.................... 1-slideshowhome.vbs ................

Option Explicit

' slideshow delay in milliseconds
Const lngDelay = 8000

' valid file extensions for slides
Const strValid = ".jpg.jpeg.gif.png"

' output file name
Const strFileName = "3-slideshome.htm"

' ******************** DO NOT MODIFY BELOW THIS LINE ********************

' Define variables.
Dim objFSO
Dim objOutput
Dim strImage
Dim strExt
Dim strFirst
Dim lngCount
Dim objFolder
Dim objFile

' Create the output file.
Set objFSO = CreateObject("Scripting.FileSystemObject")
Set objOutput = objFSO.CreateTextFile(strFileName)

' Output the page header and beginning of slideshow script.
objOutput.WriteLine "<html>" & vbCrLf & "<head>"
objOutput.WriteLine "<style type=""text/css"">" & vbCrLf & "<!--"
objOutput.WriteLine "body {margin: 0; padding: 0;}"
objOutput.WriteLine "p {padding: 33% 0 0 0; font-size: 12px;}"
objOutput.WriteLine "-->" & vbCrLf & "</style>"
objOutput.WriteLine "<script language=""javascript"">" & vbCrLf & "<!--"
objOutput.WriteLine "function PreloadImage(tmpSImage)"
objOutput.WriteLine "{"
objOutput.WriteLine vbTab & "var tmpOImage=new Image();"
objOutput.WriteLine vbTab & "tmpOImage.src=tmpSImage;"
objOutput.WriteLine vbTab & "return tmpOImage;"
objOutput.WriteLine "}"
objOutput.WriteLine "var strImage = new Array("

' Get a folder object from the current to parse for files.
Set objFolder = objFSO.GetFolder(".")

' Loop through the files in the folder.
For Each objFile In objFolder.Files
' Does the file have an extension?
If InStr(objFile.Name,".") Then
strImage = objFile.Name
' Get the file name extension.
strExt = LCase(Mid(strImage,InStrRev(strImage,".")))
' Is the extension a valid extension?
If InStr(strValid,strExt) Then
' Output the code to load the image.
objOutput.Write "'" & strImage & "',"
If Len(strFirst) = 0 Then strFirst = strImage
lngCount = lngCount + 1
End If
End If
Next
objOutput.WriteLine "''" & vbCrLf & ");"

' Output the rest of the slideshow script.
With objOutput
.WriteLine "var objImage = new Array(strImage.length-2);"
.WriteLine "var lngCount = strImage.length - 1;"
.WriteLine "function LoadImages()"
.WriteLine "{"
.WriteLine vbTab & "if (lngCount >= 0)"
.WriteLine vbTab & "{"
.WriteLine vbTab & vbTab & "document.getElementById('theSPN').innerHTML=lngCount;"
.WriteLine vbTab & vbTab & "objImage[lngCount] = PreloadImage(strImage[lngCount]);"
.WriteLine vbTab & vbTab & "lngCount--;"
.WriteLine vbTab & vbTab & "setTimeout('LoadImages()', 50);"
.WriteLine vbTab & "}"
.WriteLine vbTab & "else"
.WriteLine vbTab & "{"
.WriteLine vbTab & vbTab & "lngCount = 0;"
.WriteLine vbTab & vbTab & "document.getElementById('theDIV').innerHTML='<img src=""" & strFirst & """ id=""theIMG"">';"
.WriteLine vbTab & vbTab & "setTimeout('SwapImage()'," & lngDelay & ");"
.WriteLine vbTab & "}"
.WriteLine "}"
.WriteLine "function SwapImage()"
.WriteLine "{"
.WriteLine vbTab & "++lngCount;"
.WriteLine vbTab & "if (lngCount<strImage.length-1)"
.WriteLine vbTab & "{"
.WriteLine vbTab & vbTab & "document.getElementById('theIMG').src=objImage[lngCount].src;"
.WriteLine vbTab & vbTab & "setTimeout('SwapImage()'," & lngDelay & ");"
.WriteLine vbTab & "}"
.WriteLine "}"
.WriteLine "//-->" & vbCrLf & "</script>"
.WriteLine "</head>" & vbCrLf & "<body onLoad=""setTimeout('LoadImages()'," & lngDelay / lngDelay & ");"">"
.WriteLine "<div align=""left"" id=""theDIV"" style=""position: absolute; top: 0px; left: 0px; width: 272px; height: 242px; text-align:center; border:solid 2px #000;""><p>Please wait...<br>"
.WriteLine "Loading " & lngCount & " images...<br>(<span id=""theSPN"">0</span>)</p></div>"
.WriteLine "</body>" & vbCrLf & "</html>"
End With

' Close the output file.
objOutput.Close


....................... 3-slideshome.htm ....................

<html>
<head>
<style type="text/css">
<!--
body {margin: 0; padding: 0;}
p {padding: 33% 0 0 0; font-size: 12px;}
-->
</style>
<script language="javascript">
<!--
if(!document.getElementById){
if(document.all)
document.getElementById=function(){
if(typeof document.all[arguments[0]]!="undefined")
return document.all[arguments[0]]
else
return null
}
else if(document.layers)
document.getElementById=function(){
if(typeof document[arguments[0]]!="undefined")
return document[arguments[0]]
else
return null
}
}

function PreloadImage(tmpSImage)
{
var tmpOImage=new Image();
tmpOImage.src=tmpSImage;
return tmpOImage;
}
var strImage = new Array(
'amethyst checkerboard trill- 14mm- 7.jpg','aquamarine gem trill- 13mm- 7.jpg','burma ruby 5mm trill pair- 1.jpg','cambodian blue zircon oval- 12.jpg','ceylon cushion blue sapphire- 5.jpg','color change burma spinel- 2.jpg','emerald 9mm trill- 1.jpg','gem 10x12mm oval peridot- 4.jpg','german cut fancy citrine- 11.jpg','imperial topaz 9mm trill- 2.jpg','multi-color tahitian strand- 9-12mm framed.jpg','nigerian blue-green 9mm tourmaline- 2.jpg','pink tourmaline trill pair- 5811- 1.jpg','princess ceylon blue sapphire- 4.jpg','sri lankan rhodolite garnet-10x12mm- 5.jpg','tanzanite 10.jpg','trill ceylon blue sapphire- 4mm pair- .jpg',''
);
var objImage = new Array(strImage.length-2);
var lngCount = strImage.length - 1;
function LoadImages()
{
if (lngCount >= 0)
{
document.getElementById('theSPN').innerHTML=lngCount;
objImage[lngCount] = PreloadImage(strImage[lngCount]);
lngCount--;
setTimeout('LoadImages()', 50);
}
else
{
lngCount = 0;
document.getElementById('theDIV').innerHTML='<img src="amethyst checkerboard trill- 14mm- 7.jpg" id="theIMG">';
setTimeout('SwapImage()',8000);
}
}
function SwapImage()
{
++lngCount;
if (lngCount<strImage.length-1)
{
document.getElementById('theIMG').src=objImage[lngCount].src;
setTimeout('SwapImage()',8000);
}
}
//-->
</script>
</head>
<body onLoad="setTimeout('LoadImages()',1);">
<div align="left" id="theDIV" style="position: absolute; top: 0px; left: 0px; width: 272px; height: 242px; text-align:center; border:solid 2px #000;"><p>Please wait...<br>
Loading 17 images...<br>(<span id="theSPN">0</span>)</p></div>
</body>
</html>

......................................................................

If you need anything additional let me know and thank you again.

Brent (csDealer)

csdealer
08-31-2006, 04:08 AM
I'll check out you post. Sorry to send such a long post.

csdealer
08-31-2006, 06:39 PM
Thank you blm126!

Your js code now makes the photos run continuously. I have also been trying to get John's (jscheuer1) fade in script to work. Actually, I am trying to use the getpics.asp file but I need to use this function off line. I am using my presentation as a stand alone exe.

Any suggestions?

Brent (csDealer)

jscheuer1
08-31-2006, 09:43 PM
I am trying to use the getpics.asp file but I need to use this function off line. I am using my presentation as a stand alone exe.

Any suggestions?

If you can run MS .NET framework on your machine (it is only available for certain of the Windows OS's and only certain sub groupings of those), that would allow you to run Active Server Pages (.asp) locally. I'm not sure if that could translate to your .exe or not though, there probably is a way if you can first get the .NET framework.

csdealer
08-31-2006, 09:59 PM
Could the getpics.php work?

jscheuer1
09-01-2006, 01:39 AM
Could the getpics.php work?

In theory, yes. I think it is XP server, professional and media - NT server and perhaps a few others that support the .NET framework. Any asp should work with it. But, and here is the big BUT - I've never run .NET and although I take MS's word for it working, I have no idea if it would work with an executable file like what you are talking about. This is especially because I have no idea exactly what you mean by an executable file. I'm just not sure how the particular sort of executable file that you have in mind would work with .NET framework.

Now, if you want this to be able to run locally on a variety of machines, .NET is out as, it would have to be installed on the machine running your presentation.

Properly written, most AJAX (AJAX only, for local - no PHP or asp) routines (at least in my somewhat limited experience) will work on most Windows machines running IE. So, if this can be integrated into your presentational .exe, it would be the way to go.

If you want to run your image file grabbing routine with Ultimate Fade-in slideshow (v1.5), it should be easy enough to do. All Ultimate Fade-in slideshow (v1.5) needs is an array of images. The rest of the code can just run normally.

Finally though, what you seem to be talking about sounds to me like it might best be done using Power Point - something I am even less familiar with, but which is made for local presentations.

csdealer
09-01-2006, 02:12 AM
Thanks again John,

I know that I CAN run Ajax on my exe. I've tested it before. So if we can do that do you have to convert your asp to Ajax? Probably the best way to go if possible.

Brent (csDealer)

jscheuer1
09-01-2006, 03:18 AM
Even easier to run in an executable should be a batch file, call it - make_js.bat - put this in it:


@echo off
echo fadeimages=[ > test_it.js
for %%p in (*.jpg) do echo '%%p', >>test_it.js
for %%p in (*.gif) do echo '%%p', >>test_it.js
for %%p in (*.png) do echo '%%p', >>test_it.js
echo 'end'] >>test_it.js

It will create a file in the current directory (this can be used from any directory if the path to the files is included), example:


@echo off
echo fadeimages=[ > test_it.js
for %%p in (*.jpg) do echo 'file://localhost/C:/presentation/images/%%p', >>test_it.js
for %%p in (*.gif) do echo 'file://localhost/C:/presentation/images/%%p', >>test_it.js
for %%p in (*.png) do echo 'file://localhost/C:/presentation/images/%%p', >>test_it.js
echo 'end'] >>test_it.js

Now, we can run that file in the:

C:\presentation\images>

directory, it will create a file named test_it.js that will look something like so:


fadeimages=[
'file://localhost/C:/presentation/images/11_side.jpg',
'file://localhost/C:/presentation/images/12_side.jpg',
'file://localhost/C:/presentation/images/16_side.jpg',
'file://localhost/C:/presentation/images/1_side.jpg',
'file://localhost/C:/presentation/images/2_side.jpg',
'file://localhost/C:/presentation/images/3_side.jpg',
'file://localhost/C:/presentation/images/5_side.jpg',
'file://localhost/C:/presentation/images/8_side.jpg',
'file://localhost/C:/presentation/images/photo1.jpg',
'file://localhost/C:/presentation/images/photo10.jpg',
'file://localhost/C:/presentation/images/photo1_thumb.jpg',
'file://localhost/C:/presentation/images/photo2.jpg',
'file://localhost/C:/presentation/images/photo2_thumb.jpg',
'file://localhost/C:/presentation/images/photo3.jpg',
'file://localhost/C:/presentation/images/photo3_thumb.jpg',
'file://localhost/C:/presentation/images/photo4.jpg',
'file://localhost/C:/presentation/images/photo4_thumb.jpg',
'file://localhost/C:/presentation/images/photo5.jpg',
'file://localhost/C:/presentation/images/photo5_thumb.jpg',
'file://localhost/C:/presentation/images/photo6.jpg',
'file://localhost/C:/presentation/images/photo6_thumb.jpg',
'file://localhost/C:/presentation/images/photo7.jpg',
'file://localhost/C:/presentation/images/photo7_thumb.jpg',
'file://localhost/C:/presentation/images/photo8.jpg',
'file://localhost/C:/presentation/images/photo8_thumb.jpg',
'file://localhost/C:/presentation/images/photo9.jpg',
'file://localhost/C:/presentation/images/photo9_thumb.jpg',
'file://localhost/C:/presentation/images/thumb1.jpg',
'file://localhost/C:/presentation/images/thumb2.jpg',
'file://localhost/C:/presentation/images/thumb3.jpg',
'file://localhost/C:/presentation/images/35.gif',
'file://localhost/C:/presentation/images/36.gif',
'end']


We now have our array of images and can do this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="file://localhost/C:/presentation/images/test_it.js"></script>
<script type="text/javascript">

/***********************************************
* Ultimate Fade-In Slideshow (v1.5): Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
* Updated for better Safari and Opera 9+ Compliance
* by jscheuer1 in http://www.dynamicdrive.com/forums
***********************************************/

fadeimages.length--;
for (var i_tem = 0; i_tem < fadeimages.length; i_tem++)
fadeimages[i_tem]=[fadeimages[i_tem], '', ''];

var fadebgcolor="white"

////NO need to edit beyond here/////////////

var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers

var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all

function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}

var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2

if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:10;-moz-opacity:10;-khtml-opacity:10;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:10;-moz-opacity:10;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')

if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}

fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}


fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}

fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}


fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}

</script>
</head>
<body>
<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 140, 225, 0, 3000, 0)

</script>
</body>
</html>

With the rest of the file being the normal code for Ultimate Fade-in slideshow (v1.5) (my Safari/Opera modifications included here).

csdealer
09-01-2006, 03:26 AM
I'll give it a try!

TY

Ralze34
08-24-2007, 06:10 PM
I'm looking for something along the same lines but am not really sure how to use what you have here.

We are a going to be a recreational city site. I would like that the user can simply upload images into a folder for events and it automatically gets added to the slideshow. Then I would hope the slideshow would continue endlessly.

I have seen all the different methods posted, but am not really sure which to use or how to configure them correctly.

I was hoping for a simple way to execute this using php and javascript only. I would appreciate any help you can offer.

jscheuer1
08-25-2007, 06:08 AM
We are a going to be a recreational city site. I would like that the user can simply upload images into a folder for events and it automatically gets added to the slideshow. Then I would hope the slideshow would continue endlessly.

Well, PHP servers can have individual quirks, as to how they interpret server side code, but the code I'm using has been tested on one server, so it should be good for most PHP enabled servers. I like the Swiss Army slide show for this because of its incremental preload and centering of various sized images. As a bonus, it can (if configured to) be made to do a lot of things that the Ultimate Fade-in slideshow cannot. Here I just have it setup to look like Ultimate Fade-in slideshow with a simple php front end to make the array. Put the below attached file anywhere on your site, call it anything, but give it the .php extension. Make a folder off of its folder named images. Put the images in there.

1192