Fade in slideshow using folder instead?

Printable View

02-12-2008, 10:02 PM
student101

Fade in slideshow using folder instead?

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

I have searched this forum for results but no luck.
I am using ASP and would like to know how to use a folder instead?

How to make this part only have the folder to list as many images as needed?

PHP Code:

var fadeimages=new Array() //SET IMAGE PATHS. Extend or contract array as needed fadeimages[0]=["photo1.jpg", "", ""] fadeimages[1]=["photo2.jpg", "", ""]

If it's not possible in ASP then how to do it in javascript?

Cheers
Cool script by the way.
02-12-2008, 10:51 PM
jscheuer1

If your page's extension is .asp and the server is enabled for asp, you should be able to replace:

Code:

var fadeimages=new Array() //SET IMAGE PATHS. Extend or contract array as needed fadeimages[0]=["photo1.jpg", "", ""] fadeimages[1]=["photo2.jpg", "", ""]

with (which could also be used as an external file* - comments begin with '):

Code:

<% ' 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 %>

It will grab all .jpg, .gif, and .png from the current folder. For a sub-folder, see the red highlighted part. Like for a folder off of the one that this page is in named images:

strPath = "./images/"

You would also need to add that path here:

fadeimages[counter]=["images/<%= objItem.Name %>", "", ""]

I've used similar code successfully. However, I don't know a great deal about asp, there could be a better way. The above is modeled loosely on and converted to asp from the 'getpics.php' used with this script:

http://www.dynamicdrive.com/dynamici...photoalbum.htm

*To use as an external file, you could just put it, without modifying the first path (the second one would still need to be modified), in the directory with the images, save it as getpics.asp. Then on your page with the slide show script, which could now be .htm or whatever, put this tag before the main slide show script on the page:

Code:

<script type="text/javascript" src="path/getpics.asp"></script>

Where path/ is the absolute or relative path to the folder with the images and this getpics.asp file in it.

And be sure to remove this:

Code:

var fadeimages=new Array() //SET IMAGE PATHS. Extend or contract array as needed fadeimages[0]=["photo1.jpg", "", ""] fadeimages[1]=["photo2.jpg", "", ""]

from the main slide show script.
02-13-2008, 05:34 AM
student101

Unbelievable!!!
I don't even know if it is right but this sh1t works!

I was thinking exactly the same thing that you did,
but wasn't sure where to place or what to do with the code.

Thank you.
02-13-2008, 06:40 AM
student101

Just to add a bit warning to this thread of amazement.

Do not remove this <body> tag if using it as an include on your page like so...

Code:

page data...  end page data...

So the script would work like this...
getpics.asp

Code:

<%the code%>

random.asp

Code:

<script type="text/javascript" src="getpics.asp"></script> page data... <body>  rest of script end page data...

Hope this makes sense.

Cheers
05-05-2008, 10:43 PM
formadmin

hey John, do you by chance have a php version of this somewhere? I really need to have a fade script that pulls images in random order from a folder, but I just can't find one, and unfortunately don't have the php foo to write one.

cheers,
Jordan
05-05-2008, 11:50 PM
jscheuer1

Quote:

Originally Posted by formadmin

hey John, do you by chance have a php version of this somewhere? I really need to have a fade script that pulls images in random order from a folder, but I just can't find one, and unfortunately don't have the php foo to write one.

cheers,
Jordan

There is a getpics.php file used with this script:

http://www.dynamicdrive.com/dynamici...photoalbum.htm

The code to which is here:

http://www.dynamicdrive.com/dynamici...etpics.php.txt

It would need to be modified slightly to output the desired array. The word galleryarray should be replaced by the word fadeimages in both places where it occurs. The entry in this line for filedate should be removed:

PHP Code:

echo 'galleryarray[' . $curimage .']=["' . $file . '", "'.$filedate.'"];' . "\n";

so that it looks like so (also includes one instance of the other change I mentioned, make sure you get both):

PHP Code:

echo 'fadeimages[' . $curimage .']=["' . $file . '", ""];' . "\n";

And some PHP servers also require one or both of two other tweaks. Let me know if you have problems.

The two tweaks are:

1 ) Opening the file with:

PHP Code:

<?php

instead of just <? as it is now, and:

2 ) Adding a slash (red) here:

Code:

function returnimages($dirname="./") {

But these last two changes are rarely needed, at least as far as I know. And when they are needed, it's because the server is following a stricter syntax than PHP usually ships with.
05-06-2008, 06:24 AM
student101

Quote:

Originally Posted by formadmin

hey John, do you by chance have a php version of this somewhere? I really need to have a fade script that pulls images in random order from a folder, but I just can't find one, and unfortunately don't have the php foo to write one.cheers, Jordan

Go here, you'll find what you need: Link removed as requested.
There is a PHP and ASP version for it.

Cheers
05-06-2008, 06:58 AM
jscheuer1

Quote:

Originally Posted by student101

Go here, you'll find what you need: Link removed as requested by OP
There is a PHP and ASP version for it.

Cheers

That's very close to the same code. But it doesn't output the correctly formated array for this script. It may also have some problems when served as javascript, no mime type declaration. And its $dirname variable may also suffer (on stricter servers) from the same issue I mentioned in #2 of my previous post in this thread.
05-06-2008, 07:17 AM
student101

I don't think I understand?
It works, I can't complain.

Cheers
05-06-2008, 03:16 PM
jscheuer1

Quote:

Originally Posted by student101

I don't think I understand?

Apparently not -

I imagine it would work in many cases, the PHP or the asp code that is. It will make an array of images, one entry deep. Without modification though, it will not power the script properly, as the script requires a multidimensional array. However, the script will work, just not quite as intended*. And, as I said, on some servers the PHP code will not work or will not be served properly (see mention of this in my two previous posts).

*The script expects a mutidimensional array, with each entry in the form of:

Code:

['image_filename', 'link']

if the second entry is missing entirely, instead of simply being blank or having a url in it, the image will link to the page itself (like an href="#" link). So either the script or the asp/PHP code could be modified to accommodate this fact. Or you could use the PHP code or the asp code already laid out in this thread, which already output the array in the expected format.
05-06-2008, 10:23 PM
formadmin

I really appreciate your help on this, John...unfortunately, the scripts don't really work...I get a blank box where the images should be :(

I've looked at the array that is output from my getpics.php script, and it is always the same, not random. The array IS getting built, but it's always in the same order, and no images are getting to the movie rotation script.

Here's my getpics.php file:

Code:

<?php Header("content-type: application/x-javascript"); function returnimages($dirname="./") { $pattern="\.(jpg|jpeg|png|gif|bmp)$"; $files = array(); $curimage=0; if($handle = opendir($dirname)) { while(false !== ($file = readdir($handle))){ if(eregi($pattern, $file)){ $filedate=date ("M d, Y H:i:s", filemtime($file)); echo 'fadeimages[' . $curimage .']=["' . $file . '", ""];' . "\n"; $curimage++; } } closedir($handle); } return($files); } echo "var fadeimages=new Array();" . "\n"; returnimages(); ?>

I have double-checked the way everything is setup, and it seems right, so my thoughts are that the array is not being passed correctly to the rotation script. Any thoughts here?
05-07-2008, 12:04 AM
formadmin

Hi again, John :rolleyes:

Sooo, after playing around, I got the scripts to pull from a folder and correctly fade, but the images are not random. That's the last piece of this little puzzle. Here's what I have so far:

I'm using this getpics.php script:

Code:

<? Header("content-type: application/x-javascript"); function returnimages($dirname="./") { $pattern="\.(jpg|jpeg|png|gif|bmp)$"; $files = array(); $curimage=0; if($handle = opendir($dirname)) { while(false !== ($file = readdir($handle))){ if(eregi($pattern, $file)){ $filedate=date ("M d, Y H:i:s", filemtime($file)); echo 'fadeimages[' . $curimage .']=["' . $file . '", ""];' . "\n"; $curimage++; } } closedir($handle); } return($files); } echo "var fadeimages=new Array();" . "\n"; returnimages(); ?>

and this is the rotation script in my HTML:

Code:

<script type="text/javascript"> var slideshow_width='515px' //SET IMAGE WIDTH var slideshow_height='230px' //SET IMAGE HEIGHT var pause=3500 //SET PAUSE BETWEEN SLIDE (3000=3 seconds) ////NO need to edit beyond here///////////// var preloadedimages=new Array() for (p=0;p<fadeimages.length;p++){ preloadedimages[p]=new Image() preloadedimages[p].src=fadeimages[p][0] } var ie4=document.all var dom=document.getElementById if (ie4||dom) document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10;visibility: hidden"></div></div>') else document.write('<img name="defaultslide" src="'+fadeimages[0][0]+'">') var curpos=10 var degree=10 var curcanvas="canvas0" var curimageindex=0 var nextimageindex=1 function fadepic(){ if (curpos<100){ curpos+=10 if (tempobj.filters) tempobj.filters.alpha.opacity=curpos else if (tempobj.style.MozOpacity) tempobj.style.MozOpacity=curpos/101 } else{ clearInterval(dropslide) nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1" tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas) tempobj.innerHTML=insertimage(nextimageindex) nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0 var tempobj2=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas) tempobj2.style.visibility="hidden" setTimeout("rotateimage()",pause) } } function insertimage(i){ var tempcontainer=fadeimages[i][1]!=""? '<a href="'+fadeimages[i][1]+'" target="'+fadeimages[i][2]+'">' : "" tempcontainer+='<img src="'+fadeimages[i][0]+'" border="0">' tempcontainer=fadeimages[i][1]!=""? tempcontainer+'</a>' : tempcontainer return tempcontainer } function rotateimage(){ if (ie4||dom){ resetit(curcanvas) var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas) crossobj.style.zIndex++ tempobj.style.visibility="visible" var temp='setInterval("fadepic()",50)' dropslide=eval(temp) curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0" } else document.images.defaultslide.src=fadeimages[curimageindex][0] curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0 } function resetit(what){ curpos=10 var crossobj=ie4? eval("document.all."+what) : document.getElementById(what) if (crossobj.filters) crossobj.filters.alpha.opacity=curpos else if (crossobj.style.MozOpacity) crossobj.style.MozOpacity=curpos/101 } function startit(){ var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas) crossobj.innerHTML=insertimage(curimageindex) rotateimage() } if (ie4||dom) window.onload=startit else setInterval("rotateimage()",pause); </script>

How can I use this PHP function to randomize the array created by getpics.php?:

Code:

[array_rand()]

For example, here is a script I use on one of my homepages that creates an array and randomly selects one file to display.

Code:

<? $the_array = Array(); $handle = opendir('home_content/'); // << name of target directory while (false !== ($file = readdir($handle))) { if ($file != "." && $file != ".." && $file != ".svn") { $the_array[] = $file; } } closedir($handle); //this is the random filename picker: $randomInsertItem = $the_array[array_rand($the_array)]; ?>

How can I incorporate the random array function into the getpics.php script? I mean, that getpics.php script is a combination of php and javascript and it is a little greek to me. any thoughts or suggestions would really help :D
05-07-2008, 12:14 AM
jscheuer1

I don't think that fade script has random images. Try the latest version:

http://www.dynamicdrive.com/dynamici...nslideshow.htm

Or, add to the older code you have:

Code:

<script type="text/javascript"> var slideshow_width='515px' //SET IMAGE WIDTH var slideshow_height='230px' //SET IMAGE HEIGHT var pause=3500 //SET PAUSE BETWEEN SLIDE (3000=3 seconds) ////NO need to edit beyond here///////////// fadeimages.sort(function() {return 0.5 - Math.random();}); var preloadedimages=new Array() for (p=0;p<fadeimages.length;p++){ preloadedimages[p]=new Image() preloadedimages[p].src=fadeimages[p][

However, the newer code works in more browsers and has more features. This script is even more advanced in some respects:

http://www.dynamicdrive.com/dynamici...army/index.htm
05-07-2008, 01:02 AM
formadmin

Oh cool! I didn't see the random part in the Notes when I looked at it the first time (doh!). Actually I didn't even really go through the newer version of the script because the old version worked so well. -Time to upgrade methinks ;)

So you're doing the randomization after the php script creates the array...I was thinking that I could randomize it in PHP, before it gets handed off, but I think your way makes more sense.

Maybe for future versions you'll have a JS function that selects from a specified folder? Seems like it'd be cleaner to do this all in JS instead of relying on a separate PHP script.

hey, thanks again John. YATFM!
05-07-2008, 11:52 PM
formadmin

Hi again, John :D

I DO have another important bit though; when I put the getpics.php file in the same folder as the images, and place the html page that's showing the images in that very same folder, everything is fine, but when I move the html page out of the /images/movie_images/ directory, and change the $dirname variable to match, then the images stop showing. -The scripts are running, but the getpics.php script is only passing the names of the images in the array, not the path to them.

Sooo, I tried this:

Code:

<? Header("content-type: application/x-javascript"); $dirname = "/images/movie_images"; function returnimages($dirname) { $pattern="\.(jpg|jpeg|png|gif|bmp)$"; $files = array(); $curimage=0; if($handle = opendir($dirname)) { while(false !== ($file = readdir($handle))){ if(eregi($pattern, $file)){ $filedate=date ("M d, Y H:i:s", filemtime($file)); echo 'fadeimages[' . $curimage .']=["' . $file . '", ""];' . "\n"; $curimage++; } } closedir($handle); } return $files; } echo "var fadeimages=new Array();" . "\n"; returnimages(); ?>

...but that didn't work and only resulted in an empty array.

What's a solid way to either automagically find the path to the location of the getpics.php file itself, OR assign a path in the code and add it in front of the file name in the array?

hope those questions make sense :confused:
05-08-2008, 04:19 AM
jscheuer1

I would try:

PHP Code:

<?php Header("content-type: application/x-javascript"); function returnimages($dirname = "/images/movie_images/") { $pattern="\.(jpg|jpeg|png|gif|bmp)$"; $files = array(); $curimage=0; if($handle = opendir($dirname)) { while(false !== ($file = readdir($handle))){ if(eregi($pattern, $file)){ $filedate=date ("M d, Y H:i:s", filemtime($file)); echo 'fadeimages[' . $curimage .']=["' . $dirname . $file . '", ""];' . "\n"; $curimage++; } } closedir($handle); } return $files; } echo "var fadeimages=new Array();" . "\n"; returnimages(); ?>

Notice that the $dirname declaration is in the function's parenthetical arguments area and has the trailing slash, and that it's value is passed on the line:

Code:

echo 'fadeimages[' . $curimage .']=["' . $dirname . $file . '", ""];' . "\n";

that makes up each array entry. The one thing that I'm not all that sure about is the use of the network path:

Code:

$dirname = "/images/movie_images/"

which indicates you want the PHP script to start from the root of the domain. I've only ever seen this done with relative paths. But, from what you said:

Quote:

when I move the html page out of the /images/movie_images/ directory, and change the $dirname variable to match, then the images stop showing. -The scripts are running, but the getpics.php script is only passing the names of the images

This leads me to believe that it will work out.

An alternative to what I suggested (PHP code block in this post) would be to use what got you what you mention in the above quote, and then enter the path to the images in the script here:

Code:

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="/images/movie_images/'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">' if (this.theimages[picindex][1]!="") //if associated link exists for image slideHTML+='</a>' picobj.innerHTML=slideHTML }
05-08-2008, 05:44 PM
formadmin

omg, that's what I thought. So there are really 2 discrete paths in this scenario; the one that the PHP script is using in order to get the file names, and the other is the path handed to the JS rotation script so the browser can find the image files themselves (the 2 paths are the same in this instance, but that's only because the getpics.php file is IN the same dir as the images).

Now I can run the movie on my homepage (index.php), and have that index.php file, the getpics.php file, the rotation.js file and the images all in different dirs and it'll all work correctly. nice!
05-08-2008, 06:31 PM
jscheuer1

Well, yes. And I just realized that if you use the javascript solution I mentioned, the path should really go here in the script instead of where I originally placed it (the added var declaration is just to fix a typo in the original code, and should be added anyway):

Code:

for (var p=0;p<theimages.length;p++){ this.postimages[p]=new Image() this.postimages[p].src='/images/movie_images/'+theimages[p][0] }

That way the preloading will still work.

Getting back to the PHP code for a moment, the key to the construction of the array is the line:

PHP Code:

echo 'fadeimages[' . $curimage .']=["' . $file . '", ""];' . "\n";

However that is coded governs how each individual array entry will come out. You can concatenate into it any literal or variable information available to the returnimages function, in any order that you desire. But it must end up producing an array like the one that the script is expecting.
05-08-2008, 09:13 PM
formadmin

cool, thanks John!

so, this is the final version I went with:

Code:

<? Header("content-type: application/x-javascript"); function returnimages($dirname=".") { $pattern="\.(jpg|jpeg|png|gif|bmp)$"; $files = array(); $filelocation = "/images/movie_images/"; $curimage=0; if($handle = opendir($dirname)) { while(false !== ($file = readdir($handle))){ if(eregi($pattern, $file)){ $filedate=date ("M d, Y H:i:s", filemtime($file)); echo 'fadeimages[' . $curimage .']=["' . $filelocation . $file . '", ""];' . "\n"; $curimage++; } } closedir($handle); } return $files; } echo "var fadeimages=new Array();" . "\n"; returnimages(); ?>

(and yes, you need the beginning and trailing slashes in the $filelocation declaration)

it works great! thanks for all the help :D
09-16-2009, 03:49 PM
szeremeta

I found this thread both very helpful and immensly annoying!! (WHY DELETE THE LINKS!?!?!)

here is how I got the slideshwo to read in a directory of images using ASP. Thanks to John for the pointers.

Use this chunk of script instead of the manually written array, this will read in the DIR of images:

Code:

<script type="text/javascript"> var mygallery=new fadeSlideShow({ wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow dimensions: [760, 200], //width/height of gallery in pixels. Should reflect dimensions of largest image imagearray: [ <% ' 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 = "./banner/" ' 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 imagearray=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 %> ["banner/<%= objItem.Name %>", "", "", ""], <% End If Next 'objItem ' All done! Kill off our asp object variables. Set objItem = Nothing Set objFolder = Nothing Set objFSO = Nothing Set RegExObj = Nothing %> ], displaymode: {type:'auto', pause:5000, cycles:0, wraparound:false}, persist: true, //remember last viewed slide and recall within same session? fadeduration: 1000, //transition duration (milliseconds) descreveal: "ondemand", togglerid: "" }) </script>
09-16-2009, 07:35 PM
student101

Quote:

Originally Posted by szeremeta

I found this thread both very helpful and immensly annoying!! (WHY DELETE THE LINKS!?!?!)

Web sites change.

Quote:

Originally Posted by szeremeta

here is how I got the slideshwo to read in a directory of images using ASP. Thanks to John for the pointers.

Good one, at least you can code what you need - thanks for sharing.