How do i get all images on my site to load using the Javascript thumbnail viewer 'HighslideJS' ?

Hello,

I have added an image to my 'Norwich' (SE England) marker infowindow (to see this - please click the pushpin marker followed by the green arrow marker and then the round marker).

I want to use HighslideJS (http://highslide.com/) to open the image, which i have included in my site.

I understand from the online help that images need to be marked up with the attached code snipet, where: 'samples/full3.jpg' should be replaced by the relevant image filename.

Since i will be adding many hundreds of photos, how can this be automatically applied to all images on my website?

Many thanks
<div class="thumbwrapper">
	<a href="samples/full3.jpg" class="highslide" onclick="return hs.expand(this, {wrapperClassName :
             'highslide-white', spaceForCaption: 30, outlineType: 'rounded-white', captionId: 'caption3'})">
	<img style="margin-top: 15px" id="thumb3" width="120" height="90" src="samples/thumb3.jpg" 
                alt="Highslide JS" title="Click to enlarge" /></a>
	
    <div id="controlbar" class="highslide-overlay controlbar">
 	<a href="#" class="previous" onclick="return hs.previous(this)" title="Previous (left arrow key)"></a>
	<a href="#" class="next" onclick="return hs.next(this)" title="Next (right arrow key)"></a>
    	<a href="#" class="highslide-move" onclick="return false" title="Click and drag to move"></a>
    	<a href="#" class="close" onclick="return hs.close(this)" title="Close"></a>
    </div>
 
</div>

Open in new window

DaniishAsked:
Who is Participating?
 
bansidharCommented:
try this,
Here you have to keep your thumbs in the thumbs folder with the same name as the image file name.
<?php
//your real image folder name as in your server's hard disk
$real_image_folder='/home/of/my/web/server/images/samples/';
//your image url as seen by browser
$image_url = 'samples/';
$thumb_url = 'thumbs/';
$i=0;
if (is_dir($real_image_folder)) {
   if ($dh = opendir($real_image_folder)) {
      while (($file = readdir($dh)) !== false) {
        if (!($file == '.' || $file == '..' || isdir($file))){  // you have to add additional condition here if you have other that image files in this folder
?>
<div class="thumbwrapper">
        <a href="<?php echo "$image_url$file"; ?>" class="highslide" onclick="return hs.expand(this, {wrapperClassName : 'highslide-white', spaceForCaption: 30, outlineType: 'rounded-white', captionId: 'caption3'})">
        <img style="margin-top: 15px" id="thumb3" width="120" height="90" src="<?php echo "$thumb_url$file"; ?>" alt="Highslide JS" title="Click to enlarge" /></a>
        
    <div id="controlbar<?php echo $i; ?>" class="highslide-overlay controlbar">
        <a href="#" class="previous" onclick="return hs.previous(this)" title="Previous (left arrow key)"></a>
        <a href="#" class="next" onclick="return hs.next(this)" title="Next (right arrow key)"></a>
        <a href="#" class="highslide-move" onclick="return false" title="Click and drag to move"></a>
        <a href="#" class="close" onclick="return hs.close(this)" title="Close"></a>
    </div>
 
</div>
<?php
      $i++;
      }
    }
  }
}
?>

Open in new window

0
 
DaniishAuthor Commented:
Hi Bansidhar,

The only problem is that my photos are divided into sub-folders which are named by marker 'id'. For example photos that belong to marker 59:

/public_html/travel_pics/59/

Any chance your code can be modified to work like this?


Thanks again
0
 
DaniishAuthor Commented:
The Highslide author had this to say...

http://highslide.com/forum/viewtopic.php?p=11428#11428 
0
 
DaniishAuthor Commented:
I have devised a work around to make this problem simpler to solve and implement and have therefore accepted your answer. I will ask a new question related to this one - please respond if you can.

Thanks again
0
 
bansidharCommented:
hi,
sry for not responding to you fast, I am in different time zone.

can you explain a bit more like you have to index only the images in /public_html/travel_pics/59 only or all folders in /public_html/travel_pics/

in both cases you can do a small modification and make the code work.

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.