| Creatief foto's weergeven op uw internet site. |
© 2006 Hein Pragt
Wanneer u foto's op het web wilt presenteren zijn daar meerdere
oplossingen voor in de vorm van web album generators. Deze genereren
alle html bestanden en de foto directories die u dan kunt uploaden
naar uw website. Wanneer u zelf een beetje creatief bent kunt u de
foto's ook op een wat creatievere wijze op een internet pagina zetten.
In dit geval ga ik er even van uit dat de foto's niet te groot worden
weergegeven om de pagina wel een beetje snel te maken.
Om de foto's geschikt te maken voor het web dient u ze eerst te
verkleinen. Dit kunt u doen met bijvoorbeeld Photoshop maar ook
PragtFotoManager (te downloaden op deze site) kan dit snel en gemakkelijk
voor u doen. Wanneer u de foto's in een apart mapje verkleint heeft kunt
u ze hernoemen zodat ze in de pagina op een vaste plaats staan. Een
suggestie voor dit script is pict1.jpg tot en met pict9.jpg. U kunt
de plaatjes in dezelfde directory zetten als het album. Download de
album html code vanaf deze pagina en zet dit in dezelfde directory.
Wanneer u dan deze pagina opent ziet u het album al staan. U kunt
dan zelf tekst toevoegen en de kleuren en layout aanpassen aan de
rest van uw site en uw album is gereed.
Ik heb twee varianten gemaakt, u kunt met dezelfde code ook nog andere
varianten bedenken. Het principe werk zo dat aan elke foto een mousover
event gekoppeld is die de foto kopieert in het object van de grote foto.
Een klein stukje javascript voert dit uit. Het verkleinen van de foto
gebeurd door de stylesheet. Ik ga hier uit van foto's met het
formaat 320 x 240 wat voor het web nog een acceptabel resultaat geeft.
De foto's worden bij het laden van de pagina al van de webserver gehaald
en door met de muis over een thumbnail te gaan zal de grote foto worden
weergegeven in het grote venster. Op deze wijze is het mogelijk snel een
set foto's te bekijken zonder teveel klikken en wachten op het laden van de foto.
De hier voorgestelde code werkt zowel in Internet Explorer als in Mozilla browsers.
Voorbeeld 1
Download een zip bestand met de broncode en een voorbeeld pagina.
Voorbeeld 2
Download een zip bestand met de broncode en een voorbeeld pagina.
Uitleg
De truc is vrij eenvoudig, door middel van een aantal css2 regels
kunt u de vormgeving van het album instellen en tevens de grootte van
de thumbnails en de foto.
<style type="text/css">
<!--
table.galery {
border: none;
background-color: #ffffff;
}
table.galery td {
border: 1px solid black;
}
table.galery img {
width: 100px;
height: 75px;
vertical-align: middle;
padding: 1px;
margin: 1px;
}
table.galery img.big {
border-color: #000000;
width: 320px;
height: 240px;
}
-->
</style>
Aan elke foto koppelen we via een mouseover event een stukje javascript
die de foto gaat kopiëren naar de grote afbeelding.
<img src="images/pict3.jpg" onmouseover="javascript:ShowImage(this);"/>
Het stukje javascript is vrij eenvoudig, het argument is het object
dat het event veroorzaakte en dit is in ons geval het img element. Thumb
zal dus een referentie naar het img object zijn. Via dom zoeken we het
object van het grote plaatje, waarna we het src attribuut kopiëren van
de thumb naar de grote foto. Via CSS2 zal dezelfde foto nu groot
weergegeven worden in het venster.
<script type="text/javascript">
// --------------------------------------
// Expand and show a image © H.M. Pragt 2006
// --------------------------------------
function ShowImage(Thumb)
{
var BigImage = document.getElementById('gallery_big');
BigImage.src = Thumb.src;
}
</script>
Veel succes met uw eigen pagina, Hein Pragt.
Last update: 03-07-2011
|
