daniish
Posts: 42
Joined: Sat Jan 27, 2007 3:30 pm

Highslide mini-gallery not working in Google Maps

Hello,

I have been following the mini-gallery template in which images are placed in a hidden div container and are then accessed by clicking on a single thumbnail: http://highslide.com/example-mini-gallery.html

The problem i'm having is that Highslide isn't picking up my images from the hidden <div> container.

When i click on the image on my site (www.globexposure.net/index.php) - click on the Norwich (SE England) pushpin > arrow > airplane icon...
...it doesn't give you the option to scroll Previous/Next through the additional images that are present in my hidden div. What do you think is wrong?

If it helps, i have included, below, what is contained in my database, for this image thumbnail:

Code: Select all

<div><a id="thumb1" href="/includes/travel_pics/163/Toby Texas Chainsaw Massacre.jpg" class="highslide" onclick="return hs.expand(this)">
<img style="float: left; margin: 0px 10px 8px 0px;" src="/includes/travel_pics/163/Toby Texas Chainsaw Massacre.jpg" width="100" height="100" alt="Highslide JS" title="Click to enlarge"/></a>
My family moved here, from College Road, when I was aged 12, after I spotted the house was for sale when we visited another further down the Close. We couldn't believe our luck when it was in our budget and this is where my folks have been based since 1992...and I dare say for a fair few years to come.
<div class="hidden-container">
<?php include ('includes/travel_pic_thumbnails.php?poi_id=163'); ?>
</div>
</div>

Any help and suggestions greatly appreciated.
torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

This is what your server sends to the client, so you'll have to debug your PHP application:

Code: Select all

<div class="hidden-container">  </div> 
daniish
Posts: 42
Joined: Sat Jan 27, 2007 3:30 pm

The problem, is that the php script evaluates correctly:

http://www.globexposure.net/includes/tr ... poi_id=163

When this is run in the browser it displays 3 images as it should - so why doesn't it do it in the hidden-div ?

Does the hidden-div not support PHP Includes?

I have posted the php script on Experts Exchange and they have found no problem with it, so i suspect the problem must be elsewhere.
mx3design
Posts: 85
Joined: Mon Aug 04, 2008 6:41 am

There's a lot of code to sift through here. Can you create a test page with just the highslide function working correctly with the three images please? Don't worry about parsing the XML for now.
daniish
Posts: 42
Joined: Sat Jan 27, 2007 3:30 pm

If you visit my site (www.globexposure.net/index.php) and visit Norwich (this is in the SE of England) - click on the pink pushpin marker, followed by the green arrow marker - you will see two icons.

The airplane icon - is the one i'm trying to get working using the PHP Include.

The house icon - is where i have set up Highslide to use 3 hardcoded images - have a look at this.


Does that answer your question or are you requesting that i set up a page with highslide totally seperate from Google Maps ?
mx3design
Posts: 85
Joined: Mon Aug 04, 2008 6:41 am

Does that answer your question or are you requesting that i set up a page with highslide totally seperate from Google Maps ?
Yes please, we need to evaluate each stage of the build to isolate the issue.
daniish
Posts: 42
Joined: Sat Jan 27, 2007 3:30 pm

Sorry about the delay - is this what your looking for?

http://www.globexposure.net/example-mini-gallery.php
mx3design
Posts: 85
Joined: Mon Aug 04, 2008 6:41 am

Yes, that's good.

1. For peace of mind can we alter the names of the images? Can you remove all spaces in the names and keep all extensions lowercase? Use an underscore in place of each space. When php, xml and javascript combine the smallest thing can cause an issue. (or just rename them 1,2 & 3.jpg for simplicity).

..
daniish
Posts: 42
Joined: Sat Jan 27, 2007 3:30 pm

OK i have now renamed the images :)
mx3design
Posts: 85
Joined: Mon Aug 04, 2008 6:41 am

can you pull them into the test page using php include?
http://www.globexposure.net/example-mini-gallery.php

Use the same method you're going to use to pull them into the read.php page
daniish
Posts: 42
Joined: Sat Jan 27, 2007 3:30 pm

OK i have set it up to use the PHP include - but this is the aspect that doesn't work!

However, if the included php script is run in the browser it seems to function properly. http://www.globexposure.net/includes/tr ... poi_id=163
mx3design
Posts: 85
Joined: Mon Aug 04, 2008 6:41 am

Good, we have a problem isolated. Can you post the php source please?
daniish
Posts: 42
Joined: Sat Jan 27, 2007 3:30 pm

Code: Select all

<?php
error_reporting(E_ALL);
 
// GET THE ID FROM THE URL
$poi_id = $_GET["poi_id"];
 
var_dump($_GET);
 
// MAKE THE DIRECTORY ID
$directory_name = getcwd();
$directory_name .= '/travel_pics';
$directory_name .= '/' . $poi_id;
 
// TRY THE OPENDIR
if (!$handle = opendir($directory_name)) {
   die("Cannot Open Directory $directory_name");
}
else {
   while (false !== ($file = readdir($handle))) {
       if ($file != "." && $file != "..") {
           echo "<a href=\"$file\" onclick=\"return hs.expand(this, { thumbnailId: 'thumb1' })\" class=\"highslide\"><img src=\"/thumbphp/phpThumb.php?src=/includes/travel_pics/$poi_id/$file\" alt=\"\" /></a>\n";
       }
   }
   closedir($handle);
}
?>
mx3design
Posts: 85
Joined: Mon Aug 04, 2008 6:41 am

probably the easiest way of resolving this is to:

1. strip the head and body tags from travel_pic_thumbnails.php and everything everything in between so that the page only outputs the image tags

2. then add this to the example page <?php include ("http://www.globexposure.net/includes/tr ... poi_id=163"); ?>

Yous should get something like this: http://www.mx3design.co.uk/dev/dev.1.php (this page is pulling all the data from your site including poi_id, it won't load the hidden images as they have relative paths but you can see that it will function).

Let me know when you've done that
daniish
Posts: 42
Joined: Sat Jan 27, 2007 3:30 pm

I'm sorry i don't quite follow you.

If i run:
http://www.globexposure.net/includes/tr ... poi_id=163

and view source, there are no head and body tags, so i'm not quite sure what i need to do - please can you explain.


Many thanks for your help

p.s. incidentally, the result that you get with:
http://www.mx3design.co.uk/dev/dev.1.php
is as far as i got on my site, as i alluded to in my 3rd posting.
Last edited by daniish on Wed Oct 22, 2008 11:15 pm, edited 2 times in total.

Return to “Highslide JS Usage”