Go Premium for a chance to win a PS4. Enter to Win

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

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

0
Daniish
Asked:
Daniish
  • 3
  • 2
1 Solution
 
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

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

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