Solved

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

Posted on 2008-10-06
5
318 Views
Last Modified: 2012-05-05
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
Comment
Question by:Daniish
  • 3
  • 2
5 Comments
 
LVL 11

Accepted Solution

by:
bansidhar earned 500 total points
ID: 22651638
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
 

Author Comment

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

Author Comment

by:Daniish
ID: 22660985
The Highslide author had this to say...

http://highslide.com/forum/viewtopic.php?p=11428#11428
0
 

Author Closing Comment

by:Daniish
ID: 31503345
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
 
LVL 11

Expert Comment

by:bansidhar
ID: 22666305
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

I imagine that there are some, like me, who require a way of getting currency exchange rates for implementation in web project from time to time, so I thought I would share a solution that I have developed for this purpose. It turns out that Yaho…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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)

758 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

18 Experts available now in Live!

Get 1:1 Help Now