PDA

View Full Version : Fade in slideshow using folder instead?



student101
02-12-2008, 10:02 PM
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm (Fade in slideshow)

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?

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.

jscheuer1
02-12-2008, 10:51 PM
If your page's extension is .asp and the server is enabled for asp, you should be able to replace:


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 '):


<%
' 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/dynamicindex4/php-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:


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


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.

student101
02-13-2008, 05:34 AM
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.

student101
02-13-2008, 06:40 AM
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...


page data...
<!--#include file="filename.asp" -->
end page data...
So the script would work like this...
getpics.asp


<%the code%>

random.asp

<script type="text/javascript" src="getpics.asp"></script>
page data...
<body> <!--do not remove this part, other html you can remove-->
rest of script
end page data...
Hope this makes sense.

Cheers

formadmin
05-05-2008, 10:43 PM
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

jscheuer1
05-05-2008, 11:50 PM
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/dynamicindex4/php-photoalbum.htm

The code to which is here:

http://www.dynamicdrive.com/dynamicindex4/phpgallery/getpics.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:


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):


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

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

2 ) Adding a slash (red) here:


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.

student101
05-06-2008, 06:24 AM
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

jscheuer1
05-06-2008, 06:58 AM
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.

student101
05-06-2008, 07:17 AM
I don't think I understand?
It works, I can't complain.

Cheers

jscheuer1
05-06-2008, 03:16 PM
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:


['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.

formadmin
05-06-2008, 10:23 PM
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:


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

formadmin
05-07-2008, 12:04 AM
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:


<?
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:



<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?:


[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.



<?
$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

jscheuer1
05-07-2008, 12:14 AM
I don't think that fade script has random images. Try the latest version:

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

Or, add to the older code you have:


<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/dynamicindex14/swissarmy/index.htm

formadmin
05-07-2008, 01:02 AM
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!

formadmin
05-07-2008, 11:52 PM
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:



<?
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:

jscheuer1
05-08-2008, 04:19 AM
I would try:


<?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:


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:


$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:


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:


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
}

formadmin
05-08-2008, 05:44 PM
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!

jscheuer1
05-08-2008, 06:31 PM
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):


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:


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.

formadmin
05-08-2008, 09:13 PM
cool, thanks John!

so, this is the final version I went with:



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

szeremeta
09-16-2009, 03:49 PM
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:


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

student101
09-16-2009, 07:35 PM
I found this thread both very helpful and immensly annoying!! (WHY DELETE THE LINKS!?!?!)
Web sites change.

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.