[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 880
  • Last Modified:

Accessing all images in a folder using PHP with the Javascript Highslide thumbnail viewer

Hello,

I'm using the Javascript image viewer, Highslide, on my site and i'd like to be able to use the built-in controlbar to cycle through all the images in a folder (the same folder as the original image). At present the only image on my site can be seen by clicking on the Norwich (SE England) pushpin marker > arrow marker > home icon marker.

I understand that Highslide runs on the client and can't read directly from a folder on the server, however, the following code (phpThumb) can be used to print Highlside markup: http://highslide.com/forum/viewtopic.php?t=118

I have added this code to my site but i'm not really sure how to tie it in properly with my site - please could someone help me with this?

Many thanks for your time - hopefully this supports what i'm trying to do!
0
Daniish
Asked:
Daniish
  • 5
  • 5
1 Solution
 
Vel EousResearch & Development ManagerCommented:
You can use PHP to populate a JavaScript array and pass the array and its contents to your highslide script:



<script language="javascript">
 
	var imageArray = new Array();	
		
	if ( $dir = opendir ( '.' ) )
	{
		while ( $file = readdir ( $dir ) )
		{
			if ( $file != '.' && $file != '..' )
			{
				$imgArray[] = $file;
			}
		}
	}
		
	closedir ( $dir );
		
	sort ( $imgArray );
		
	foreach ( $imgArray as $img )
	{
		echo ( "imageArray.push('$img');" );	
	}
		
	?>
 
</script>

Open in new window

0
 
DaniishAuthor Commented:
Thanks for replying, i can't wait to get this working.

I have a few queries though regarding your post:
Is the last line of your code '?>' a typo - looks like php?

Please can you tell me how i use the attached php snippet to populate this Javascript array - i understand most of it is replaced by the Javascript but presumably i still need this line:
<a id='thumb1' href='/travel_pics/$id/$file/' onclick='return hs.expand(this)' class='highslide'>

Also using your Javascript i tried to replace the 2nd line:
if ( $dir = opendir ( '.' ) )

for this:

if ( $dir = opendir ( 'travel_pics/'.$id.'/' ) )

..but Firebug reports:
missing name after . operator
http://www.globexposure.net/index.php
Line 313

 - so presumably this php method of adding variables to an address isn't valid in Javascript.
Maybe these are questions i need to post in a PHP forum but i thought i would ask for your advice first.

Many thanks for any further help
<?php
if ($handle = opendir('travel_pics/'.$id.'/')) {
while (false !== ($file = readdir($handle))) {
if ($file != "." && $file != "..") {
echo "
<a id='thumb1' href='/travel_pics/$id/$file/' onclick='return hs.expand(this)' class='highslide'>
<img src='../thumbphp/phpThumb.php?src=/travel_pics/$id/$file/&w=100' alt=''/>
</a>
";
}
}
closedir($handle);
}
?> 

Open in new window

0
 
Vel EousResearch & Development ManagerCommented:
>>  I have a few queries though regarding your post:
Is the last line of your code '?>' a typo - looks like php?

No Sorry, I made a typo at the start of the code:

<script language="javascript">
 
        /* create an empty JavaScript array */
        var imageArray = new Array();  
       
       /* begin PHP */
       <?PHP

        /* open the directory specified */
        if ( $dir = opendir ( '.' ) )
        {
                /* while there is a file in the directory */
                while ( $file = readdir ( $dir ) )
                {
                       /* if the file is not the current file or the *nix return file */
                        if ( $file != '.' && $file != '..' )
                        {
                                /* add the file to a PHP array */
                                $imgArray[] = $file;
                        }
                }
        }
       
        /* close the directory */  
        closedir ( $dir );
       
        /* sort the array alphabetically, although this is not essential */
        sort ( $imgArray );
       
        /* this is where the files from PHP server side array are added to the JavaScript client side array.
            basically it iterates through the PHP array accessing each element individually.
            as each element is accessed, an echo statement is used to produce the JavaScript code for adding
            an element to the JavaScript array.
            because the PHP is contained INSIDE <script></script> tags, the PHP gets output and processed as JavaScript, not as normal HTML
        foreach ( $imgArray as $img )
        {
                echo ( "imageArray.push('$img');" );    
        }
               
        ?>
 
</script>


>>   Please can you tell me how i use the attached php snippet to populate this Javascript array - i understand most of it is replaced by the Javascript but presumably i still need this line:
<a id='thumb1' href='/travel_pics/$id/$file/' onclick='return hs.expand(this)' class='highslide'>

$dir = opendir ( '.' )

^^ Is the location of the directory that you wish to read into the JavaScript array.   Therefore, if your images are stored in the directory http://domain.com/travel_pics, you would change that line to read:

$dir = opendir ( '/travel_pics/' )

Take a look at the comments I put into the example in this post.

>>  if ( $dir = opendir ( 'travel_pics/'.$id.'/' ) )

The reason that did not work is because there is no variable named $id in your code.  If you are collecting an id from the URL for example, you would need to access it via the PHP global $_GET method.

For example:

url = http://domain.com/travel_pics.php?id=5

<?php $id = $_GET['id']; ?>
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
DaniishAuthor Commented:
Thnakyou for explaining the structure so well, that's very helpful.

I'm trying to use the following line (thanks for the tip on the $id too):
if ( $dir = opendir ( '/travel_pics/'.$poi_id.'/' ) )

Firebug reports:
invalid flag after regular expression
http://www.globexposure.net/index.php
Line 318

- is this because the php can't see the $poi_id in the Javascript ?
0
 
Vel EousResearch & Development ManagerCommented:
Where is $poi_id coming from and how are you capturing it?

What is the code on line 318?
0
 
DaniishAuthor Commented:
As it would happen i have just had this little problem solved - it seems i needed to replace:
/travel_pics/'.$poi_id.'/'
for
./travel_pics/'.$poi_id.'/

Which is lucky for me because now i can ask you how i pass the array and its contents to the Highslide script?

0
 
Vel EousResearch & Development ManagerCommented:
>>  Which is lucky for me because now i can ask you how i pass the array and its contents to the Highslide script?

Well the highslide script works off a JS array, so you simply tell highslide to reference the JS array 'imageArray' from the example script.
0
 
DaniishAuthor Commented:
I realise that i'm at risk of sounding particularly stupid....but:

What is the JS array called that Highslide currently works off ?
(because i'm really not sure where to reference the new array that you created in your example script)


Thanks once again
0
 
DaniishAuthor Commented:
According to the Highslide author, there is no default image array and as such should i want to use one i would also need to write the code for pulling the data from it.

Here are his comments: http://highslide.com/forum/viewtopic.php?t=2532 

As a result i have decided to heed his advice and use the example he has provided.

At the very least your answer is a useful template for a Javascript array in PHP.
0
 
Vel EousResearch & Development ManagerCommented:
Sorry I couldn't have been more help.
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now