Locked
torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

PHP code for browsing a folder

With this PHP snippet you can put all your images in a folder, and display them as thumbnails on your web page. This examples is given that you have some kind of thumbnail creation script (ref. Google).

Code: Select all

<?php
if ($handle = opendir('images')) {
   while (false !== ($file = readdir($handle))) {
       if ($file != "." && $file != "..") {
           echo "
           <a href='$file' onclick='return hs.expand(this)' class='highslide'>
                <img src='thumbnail-creation-script.php?src=$file' alt=''/>
           </a>
           ";
       }
   }
   closedir($handle);
}
?>
theswifter
Posts: 3
Joined: Tue Feb 13, 2007 8:38 pm

php code

I was successfully able to add the php script using phpThumb(). It works great but I am having trouble trying to add a container around each thumbnail. I was able to do it with on an html page using an id="", but I can't get it too work in the php script.

Sample of my failed code. . .. with thumbcontainer being the id for css.

<?php
if ($handle = opendir('test')) {
while (false !== ($file = readdir($handle))) {
if ($file != "." && $file != "..") {
echo "
<a id="thumbcontainer" href='../test/$file' onclick='return hs.expand(this)' class='highslide'>
<img src='../thumb/phpThumb.php?src=../test/$file&w=100' alt=''/>
</a>
";
}
}
closedir($handle);
}
?>
torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

1) You can't apply the same id to more than one element.
2) You probably want to add a wrapper div around the thumbnail and apply a CSS class to that.
theswifter
Posts: 3
Joined: Tue Feb 13, 2007 8:38 pm

PHP and captions

Thanks for the help. . .. I love your script. I got it to work and now I am using it on our school website. I am using the PHP script and phpThumb() and they work great together. Saves lots of time for a group of pics. Is there a way in the php script to automatically add the title(file name without .jpg) of the picture as a caption? Any help with this would be greatly appreciated. Thanks!
alakhnor
Posts: 160
Joined: Sat Mar 03, 2007 7:21 pm
Location: Lyon
Contact: Website

I guess you have to use pathinfo to get the name and then just add it in the caption text.

Code: Select all

$img = pathinfo('http://www.that_site.com/this_image.jpg');
then $img['filename'] = this_image
theswifter
Posts: 3
Joined: Tue Feb 13, 2007 8:38 pm

Auto Caption

Thanks for the help. . . but I am still new to this. Below is my code:

</script>
<link href="/pictures/highslidestyle.css" rel="stylesheet" type="text/css">
</head>

<body>
<table width="90%" cellpadding="0">
<tr>
<th scope="col">
<div id="highslide-container"><?php
if ($handle = opendir('pictures/old')) {
while (false !== ($file = readdir($handle))) {
if ($file != "." && $file != "..") {
echo "
<a id='thumb1' href='../dc/pictures/old/$file' onclick='return hs.expand(this)' class='highslide'>
<img src='../pictures/thumbphp/phpThumb.php?src=/dc/pictures/old/$file&w=100' alt=''/>
</a>
";
}
}
closedir($handle);
}
?>
</div>

<div id="controlbar" class="highslide-overlay controlbar">
<a href="javascript:void(0)" onClick="return hs.previous(this)" title="Previous (left arrow key)"></a>
<a href="javascript:void(0)" onClick="return hs.next(this)" title="Next (right arrow key)"></a>
<a href="javascript:void(0)" class="highslide-move" title="Click and drag to move"
style="margin-left: 10px"></a>
<a href="javascript:void(0)" onClick="hs.close(this)" title="Close"></a>

</div>
</div>


I am using php to import pics and I am trying to either have the same caption appear on every picture or preferebly have the file name be the caption. I confuse php, js, and html comments. Any help with adding code would be great. I tried to enter the caption scripting in the php, but it failed.

Thanks
Locked

Return to “Highslide JS Usage”