Simple Controls Gallery now reads entire directory for slideshow, adds info to paypal

**dabilldoya** · 08-18-2009, 02:06 AM

1) CODE TITLE: Reads entire directory into the Simple Control Gallery for slideshow and add paypal options to include file info - no more hand coding...

2) AUTHOR NAME/NOTES: Dynamic Drive and DAB 'ill DO Ya' Creations

3) DESCRIPTION: This addition to the Simple Controls Gallery will now take the user input directory and read all images from it and display the entire slideshow of every photo in that directory. As an addition the same format is used to populate a Select Button for PayPal.

4) URL TO CODE:
http://tcstills.com/temp/new-slideshow-master.php and/or
http://tcstills.com/test.php
This page will be here for a few weeks at least... Then it will be incorporated into the whole site

Working sample... just copy and paste and be sure your pointing to the right js locations... Also need to point to directory to read pictures from too

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<script type="text/javascript" src="../slideviewer/jquery-1.2.6.pack.js"></script>

<style type="text/css">

/*Make sure your page contains a valid doctype at the top*/
#simplegallery1{ //CSS for Simple Gallery Example 1
position: relative; /*keep this intact*/
visibility: hidden; /*keep this intact*/
}
#simplegallery1 .gallerydesctext{ //CSS for description DIV of Example 1 (if defined)
text-align: center;
font-size:12px;
padding: 2px 5px;
}
</style>


<script type="text/javascript" src="../slideviewer/simplegallery.js">
/***********************************************
* Simple Controls Gallery- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
<?php
	$string="";
	$fileCount=0;
	$filePath=$PATH.'images/'; # Specify the path you want to look in. 
	$dir = opendir($filePath); 
	while ($file = readdir($dir))
		{
			if (eregi("\.jpg",$file))
				{
					$string .= "[\"$filePath/$file\",\"\",\"\",\"$filePath$file\"],\n";
					$fileCount++;
				}
		}
?>	
	
var mygallery=new simpleGallery({
	wrapperid: "simplegallery1", //ID of main gallery container,
dimensions: [600, 600], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
//in the image array below, first is the picture, then link then target if needed
//Currently shows a first image for aestetics only.  Following line is the entire slideshow from the 
//directory read above and the last image MUST be there so that the trailing comma ending the show is ommitted.
imagearray: [
["assets/1st.jpg","","","Introduction to Slideshow - Words in JPG to describe start-pause-left-right"],
<?php echo $string ; ?>
["assets/last.jpg","","","Declares show over and about to repeat...  Note no comma at end..."]
],
	autoplay: [true, 6000, 2],
	persist: false,
	fadeduration: 3000,
	oninit:function(){
	},
	onslide:function(curslide, i){
	}
})

</script>
</head>

<body>
<div id="simplegallery1"></div>
	<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
			<input type="hidden" name="cmd" value="_s-xclick" />
			<input type="hidden" name="hosted_button_id" value="XXXXXXX" />
				<table><tr><td>
					<input type="hidden" name="on0" value="Qty - Photo Sizes Available">Sample Purpose Only
					</td></tr><tr><td>
<select name="os0">
<option value="1">Fill
<option value="2">More Fill
<option value="3">Still More Fill
</select></td></tr><tr><td>
<input type="hidden" name="on1" value="Select Image Number Here">Select Image Number Below</td></tr>
<tr><td>

<?php
	$paypalImgNum="";
	$fileCounter1=0;
	$filePath1=$PATH.'images/'; # Specify the path you want to look in. 
	$dir1 = opendir($filePath1); 
	while ($file1 = readdir($dir1))
		{
			if (eregi("\.jpg",$file1))
				{
					$paypalImgNum .= "<option value=\"$filePath1$file1\">$filePath1$file1" ;
					$fileCounter1++;
				}
		}
?>	
						<select name="os1">
<option>Select Your Image Here
<?php echo "<br />$paypalImgNum" ;?>
						</select>
					</td></tr>
				</table>
			<input type="hidden" name="currency_code" value="USD">
			<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
			<img align="middle" alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
		</form>
</body>
</html>

**azoomer** · 10-17-2009, 08:08 PM

Thanks for sharing this. It works very well.

**taagangel** · 03-29-2010, 04:40 PM

I needed to allow my client the ability to upload photos for the gallery and did NOT want to have to specify an ending image (in order to have the array without a trailing comma).

In code which reads and counts the directory images and turns them into strings.

After this code:

while ($file = readdir($dir))

		{

			if (eregi("\.jpg",$file))

				{

					$string .= "[\"$filePath/$file\",\"\",\"\",\"\"],\n";

					 

					$fileCount++;

				}

		}

Add this line of code:

$newstring = substr($string, 0, -2);

Then, where the image array is called you can comment out the beginning and final images and change the echo from $string to $newstring like so:

imagearray: [

//["1st.jpg","","","Introduction to Slideshow - Words in JPG to describe start-pause-left-right"],

<?php echo $newstring ; ?>

//["last.jpg","","","Declares show over and about to repeat...  Note no comma at end..."]

**dabilldoya** · 05-16-2010, 01:40 PM

That is excellent when you do not want to "announce" the beginning or end.

Of those that I have spoken to that viewed my code in action they like knowing about the beginning and the end. It's mostly sports related pictures they are viewing and after a while they all look alike.

But I do see where there is an important use for not having those "announcements". Thanks for making a good thing even better.

**dabilldoya** · 05-16-2010, 02:04 PM

What's happened here is I've just compressed everything into the head of the page and produced a drop down box to select which slideshow you want to watch. Very useful when you want to break a football game into quarters, or something similar.

Now all that's needed in the page is to add the "Select box", the "simplegallery" div and the prepopulated paypal

With all the controls at the beginning I find it easier for me to set up pages.

Here is the script in the head.......
<?php
$dir = "start/" ; # This sets the default directory if the post option has not been set
if (isset($_POST['option']))
{
$whatdir = $_POST['option'] ; #This is where you specify the directory you want to populate the array from
}
else
{
$whatdir = $dir ; # Default directory assignment if post is not set above
}
$firstImg = "assets/1st.jpg" ; # Complete path to the first image in the slideshow
$firstImgCm = "In this area you will find the Image Number your viewing. Below are the slideshow controls"; # Enter your comments
$lastImg = "assets/last.jpg" ; # Last image of the slideshow before it repeats
$lastImgCm = "The slideshow has ended for this cycle" ; # Enter your comments
$boxWide = 600 ; #Width of Slideshow box
$boxHigh = 600 ; #Height of Slideshow box
$numOfCycles = 2 ; # Number of times the slideshow cycles through
$displayTime = 6000 ; # How long each slide is displayed before next image (4000 = 4 seconds)
$displayFade = 1000 ; # How long the fade from one image to the next image lasts (1000 = 1 second)
?>
<script type="text/javascript" src="../assets/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="../assets/simplegallery.js">
/***********************************************
* Simple Controls Gallery- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
<?
$list=array();
$dir_handle = @opendir($whatdir) or die("Oops... Call the Webmaster - He needs to fix the path ---> $whatdir");
$i=0;
while($file = readdir($dir_handle))
{
if(is_dir($file))
{ continue;
}
else if($file != '.' && $file != '..')
{ $list[$i]=$file;
$i++;
}
}
sort($list);
for($i=0; $i<sizeof($list); $i++)
{ $slideshow .= "[\"$whatdir$list[$i]\",\"\",\"\",\"$whatdir$list[$i]\"],\n";
$paypalImgNum .= "<option value=\"$whatdir$list[$i]\">$whatdir$list[$i]" ; # populates the reqBox field
}
?>
var mygallery=new simpleGallery({
wrapperid: "simplegallery1", //ID of main gallery container,
dimensions: [<?php echo $boxWide ; ?>, <?php echo $boxHigh ; ?>],
//in the image array below, first is the picture, then link then target if needed
//Currently shows a first image for aestetics only. Following line is the entire slideshow from the array
//populated by the directory read above and the last image MUST be there so that the trailing comma ending the show is ommitted.
imagearray: [
["<?php echo $firstImg ; ?>","","","<?php echo $firstImgCm ; ?>"],
<?php echo $slideshow ; ?>
["<?php echo $lastImg ; ?>","","","<?php echo $lastImgCm ; ?>"]
],
autoplay: [true, <?php echo $displayTime ; ?>, <?php echo $numOfCycles ; ?>],
persist: false,
fadeduration: <?php echo $displayFade ; ?>,
oninit:function(){
},
onslide:function(curslide, i){
}
})

</script>

And here is how I use it in a page........

<FORM action="index.php" method="post">
<h3 align="center"> Choose from list below...<br />
<SELECT name="option" class="inputform">
<OPTION value="<?php echo $whatdir ; ?>">Now Playing is -> <?php echo trim($whatdir, "/") ; ?></OPTION>
<OPTION value="cocktailhour/">Cocktail Hour</OPTION>
<OPTION value="auction/">Auction</OPTION>
<OPTION value="evening/">After Dinner</OPTION>
<OPTION value="posed/">Posed Portraits</OPTION>
</SELECT>
<INPUT type="submit" class="inputform" value="Click here to start the slideshow"></h3>
<?php
$whatdir = $_POST['option'];
?>
</FORM>
<div align="center" id="simplegallery1"></div>

<table align="center"><tr><td>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="XXXXXXXXXXXXXXXX">
<table align="center">
<tr><td><input type="hidden" name="on0" value="Qty - Photo Sizes Available (per image)">Qty - Photo Sizes Available (per image)</td></tr><tr><td><select name="os0">
<option value="1 - Standard 8 X 10 print">1 - Standard 8 X 10 print $15.00</option>
<option value="2 - Standard 8 X 10 (same image)">2 - Standard 8 X 10 (same image) $25.00</option>
<option value="2 - Small 5 X 7 (same image)">2 - Small 5 X 7 (same image) $15.00</option>
</select> </td></tr>
<tr><td><input type="hidden" name="on1" value="Select Image Number Here">Select Image Number Here</td></tr>
<tr><td><select name="os1" class="inputform">
<option>Click here to select <?php echo "<br />$paypalImgNum" ;?> </option>
</select>
</td></tr>
</table>
<input type="hidden" name="currency_code" value="USD">
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

I hope that others may be able to use this to help them sell photos too!!!

Thread: Simple Controls Gallery now reads entire directory for slideshow, adds info to paypal

Thread Tools

Search Thread

Simple Controls Gallery now reads entire directory for slideshow, adds info to paypal

The Following User Says Thank You to dabilldoya For This Useful Post:

If you modify the code you can eliminate being forced to hard code the final image.

Added even more versatility to the script

Bookmarks

Bookmarks

Posting Permissions