PHP to the rescue
Automatiseren met PHP
Op zich hebben we nu een werkende situatie. Het enige vervelende is dat we met de hand de breedte en de hoogte moeten invullen voor het grote plaatje waar de hyperlink naar verwijst. Het zou ideaal zijn als ook dit niet nodig was. Gelukkig kunnen we met behulp van PHP de afmetingen van plaatjes opvragen.
Hiervoor gebruiken we de volgende functie:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<?php
function set_thumb ($thumbfile, $alt_tekst = 'Klik op het plaatje voor een vergroting') {
$bigpic = str_replace ('_tn.jpg', '.jpg', $thumbfile);
list ($width, $height) = getimagesize ($bigpic);
list ($width_tn, $height_tn) = getimagesize ($thumbfile);
echo "\n";
echo '<a class="popup" href="' . $bigpic . '" popup_w="' . $width . '" popup_h="' . $height . '">';
echo '<img src="' . $thumbfile . '" width="' . $width_tn . '" height="' . $height_tn . '" class="thumb" alt="' . $alt_tekst . '" title="' . $alt_tekst . '">';
echo '</a>';
}
?>
function set_thumb ($thumbfile, $alt_tekst = 'Klik op het plaatje voor een vergroting') {
$bigpic = str_replace ('_tn.jpg', '.jpg', $thumbfile);
list ($width, $height) = getimagesize ($bigpic);
list ($width_tn, $height_tn) = getimagesize ($thumbfile);
echo "\n";
echo '<a class="popup" href="' . $bigpic . '" popup_w="' . $width . '" popup_h="' . $height . '">';
echo '<img src="' . $thumbfile . '" width="' . $width_tn . '" height="' . $height_tn . '" class="thumb" alt="' . $alt_tekst . '" title="' . $alt_tekst . '">';
echo '</a>';
}
?>
We vervangen '_tn.jpg' door '.jpg' waarmee we de bestandsnaam van het grote plaatje verkrijgen. Daarna vragen we de breedte en de hoogte van het grote en het kleine plaatje op met getimagesize. Dan kunnen we de hyperlink echoeën met alle juiste waarden erin. We roepen de functie als volgt aan (eventueel kun je een tweede argument opgeven voor de alt/title tekst):
Code (php)
1
2
3
4
5
2
3
4
5
<?php
set_thumb ('plaatje1_tn.jpg');
set_thumb ('plaatje2_tn.jpg');
set_thumb ('plaatje3_tn.jpg', 'Click for the bigger pic!');
?>
set_thumb ('plaatje1_tn.jpg');
set_thumb ('plaatje2_tn.jpg');
set_thumb ('plaatje3_tn.jpg', 'Click for the bigger pic!');
?>
Het mooie van deze opzet is, dat we een hele directory zouden kunnen uitlezen. Elk JPG bestand met de string '_tn.jpg' pikken we er dan uit, zodat we een hele reeks thumbs automatisch op een pagina kunnen plaatsen. Een andere uitbreiding op deze tut zou zijn, dat het popupvenster scrollbalken krijgt zodra het plaatje te groot wordt. Voorlopig laat ik het hierbij. Ik hoop dat je er iets aan hebt en als er vragen zijn, hoor ik het graag.
Deze tutorial is getest in Internet Explorer 6, FF 1.5 en Opera 9.01 voor Windows, en in Safari, FireFox 1.5.0.6 en Opera 9.0 voor de Mac.
Deze tutorial staat ook op mijn eigen site met op de laatste pagina een link naar het hele script en een werkend voorbeeld.
p.s. Custom-attributen hebben één (groot) nadeel; ze valideren niet. De enige oplossing die ik daar voor weet, is je eigen DTD (doctype declaration) schrijven. Kijk op de site van Peter Paul Koch voor een artikel over custom attributen