Solved

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

Posted on 2008-10-10
10
862 Views
Last Modified: 2012-05-05
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
Comment
Question by:Daniish
  • 5
  • 5
10 Comments
 
LVL 14

Expert Comment

by:Tchuki
ID: 22691790
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
 

Author Comment

by:Daniish
ID: 22697269
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
 
LVL 14

Accepted Solution

by:
Tchuki earned 500 total points
ID: 22698250
>>  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
 

Author Comment

by:Daniish
ID: 22698358
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
 
LVL 14

Expert Comment

by:Tchuki
ID: 22699167
Where is $poi_id coming from and how are you capturing it?

What is the code on line 318?
0
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 

Author Comment

by:Daniish
ID: 22699189
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
 
LVL 14

Expert Comment

by:Tchuki
ID: 22701657
>>  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
 

Author Comment

by:Daniish
ID: 22703315
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
 

Author Closing Comment

by:Daniish
ID: 31504939
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
 
LVL 14

Expert Comment

by:Tchuki
ID: 22707386
Sorry I couldn't have been more help.
0

Featured Post

Easy Project Management (No User Manual Required)

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now