PHP or JS expert needed!

Garry79

Garry79

Suspended / Banned
Messages
1,270
Name
Garry Ure
Edit My Images
Yes
In the process of teaching myself website coding I decided to recode my website. This went well and I was pleased with the results. Rather than stop there, I decided to see if I could get to the stage where all I have to do to update the gallery is add images to a folder and the thumbs would be created and the images added. This took me into a new world (for me) of PHP. I'd already managed to create the thumbs using CSS and I am using Slimbox for the gallery interface so I just needed to use PHP code to dynamically add the images.

Using the code below I managed to get to the stage where all my images from a folder are added to the correct div in the html code.

Code: 
<div id="right">
<?php
$dirname = "./photos";
$images = scandir($dirname);
$ignore = Array(".", "..");
foreach($images as $curimg)**
if(!in_array($curimg,$ignore)) **
echo "<a href='$dirname/$curimg' title='' rel='lightbox-$dirname'><img class='thumb' src='$dirname/$curimg' alt=''/></a>
			";**
;**
?>
</div>

So far so good. My problem now is that Slimbox uses "title=" to caption each image and I'd like to be able to do this dynamically too. I was thinking of using IPTC tags or something similar but this is now getting beyond my abilities! :bonk:

I guess there's two options:

1) Do something clever with the PHP code
2) Do something clever with the Slimbox JS code

either way I'm stumped and could do with some help!

The problem page is http://www.garryure.co.uk/images.php
 
Garry79 said:
My problem now is that Slimbox uses "title=" to caption each image and I'd like to be able to do this dynamically too.
Click to expand...

What data do you want to appear in the title?
 
xil3 said:
What data do you want to appear in the title?
Click to expand...

In an ideal world I would want the 'Document title' (eg. "Flower") as the title, which would show up on hover and I'd configure the Slimbox JS to show the image 'Description' which would be my image caption (eg. "This is a photo of a Flower.").
 
I am not familiar with Slimbox JS but really what your trying to do might be best suited to a PHP and MySQL solution. Neither is particularly hard to learn if you have some time and it can save you a lot of time in the longrun.

You can use the strip_ext($filename) function to create a string of the filename by stipping the extension. (eg filename.jpg becomes filename).

Creating the thumbnails would also be better with PHP to save load time since the css is really just showing a stretched(smaller) full res image. My load time for you gallery was a bit slow in my opinion.

Good luck!

Alex
 
Hey Garry 79

I've never looked into slimbox so i'm not familiar with it at all but the code you have pasted above is just scanning a folder for and then displaying images from an array that has been set, it must be geting these varibles ($images, $dirname etc) from a database query in other code, either within this php file or elsewhere from your site so you should be able to carry the 'title' varible over with is to be displayed.

Try pasteing the full php page here and see if anyone can help.

gotta say though.... this type of code can be very well done and very hard to follow as the queries are often done in different files/pages or done as functions, it would probably be better to google a slimbox forum (i'm sure there are some) and ask there.

If all else fails, let me know and i could look into it for you.
 
Cheers guys. I'll keep working on it and let you know how I get on.

Thanks for the help.
 
why not alt='$curimg' and name your files accordingly
 
IE incorrectly uses alt= as the hover text for an image. I was using '$curimg' but I'd rather have title text that is used as hover text and caption text that is used for info about each image.
 
Hey Kipax

Using alt='$curimg' will give 'Flower.jpg' on mouseover where i thing he's asking for a prevoiusly entered discription of this image to show on mouseover eg. 'This is a photo of a Flower.'


if he just wants to display the file name on mouseover use this code..

Code: 
<div id="right">
<?php
$dirname = "./photos";
$images = scandir($dirname);
$ignore = Array(".", "..");
foreach($images as $curimg)**
if(!in_array($curimg,$ignore)) **
echo "<a href='$dirname/$curimg' title='' rel='lightbox-$dirname'><img class='thumb' src='$dirname/$curimg' alt='$curimg'/></a>
			";**
;**
?>
</div>
 
That's right Ian. That's what I had, but it's not quite what I want.
 
OK garry, i've just had a quick look at the slimbox website...
(http://www.digitalia.be/software/slimbox#demo)

It looks like what your after doing is already availble in means of text across the bottom of your pictures...take a look at the example pics that are on their website.

There must be an option to do this in a config/options/setup file that they have supplied?
 
Hi,

The easiest way to do it would be name your files as the title= you want, and then do this:
PHP: 
<?php
$dirname = "./photos";
$images = scandir($dirname);
$ignore = Array(".", "..");
foreach($images as $curimg)**
if(!in_array($curimg,$ignore)) **
$curimgPre = $strip_ext($curimg);
$curimgTitle = ereg_replace("_", " ", $curimgPre);
echo "<a href='$dirname/$curimg' title='".$curimgTitle."' rel='lightbox-$dirname'><img class='thumb' src='$dirname/$curimg' alt=''/></a>
			";**
;**
?>
Not tested, but it should work. Probably a terrible way of doing it, but it should do what you want!
 
Cheers mate. Get's me part of the way there. I'd still like Slimbox to show a description rather than the title.
 
Can you elaborate on the description part please? How does slimbox get the description?
 
Slimbox is the same as Lightbox a Javascript image viewer. It uses the title="" attribute as the description but this is configurable so I could have it use another attribute like alt="" or something. I need some way of adding a caption/description to an image and then be able to pull this out and use it in the <img> tag to give it to Slimbox.
 
What's wrong with just doing that through the image name?

This_is_a_picture_of_a_sunset_over_the_city.jpg.

Or do you need longer descriptions?
 
It's a bit clunky and that will also show up as the hover text.
 
Remove the alt tag then? Or set the alt tag to be the same as the title.
 
Just to say I got it sorted!! Now using a mysql db to save descriptions, titles etc. and pass them into the page.

Cheers for all the advice.
 
If anyone was interested or has the same problem here's the solution. You can use two 'title' tags; the one in the <a></a> is used by slimbox as the caption text while the one in the <img></img> is used as the hover text.


Code: 
<a href="Thumb URL" [B]title="This is used as caption"[/B] rel="lightbox group name"><img src="Image URL" alt="alt name of image" [B]title="this is used as hover text"[/B]/></a>
 
You must log in or register to reply here.
Back
Top