[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

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

Posted on 2008-10-10
10
Medium Priority
?
879 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
10 Comments
 
LVL 14

Expert Comment

by:Vel Eous
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:
Vel Eous earned 2000 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

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:Vel Eous
ID: 22699167
Where is $poi_id coming from and how are you capturing it?

What is the code on line 318?
0
 

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:Vel Eous
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:Vel Eous
ID: 22707386
Sorry I couldn't have been more help.
0

Featured Post

Technology Partners: 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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Suggested Courses

649 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