Custom attributen

Wat zijn het?
Een custom attribuut is een attribuut met een naam die je zelf verzint. Standaard-attributen van een <a> tag zijn bijvoorbeeld 'href', of 'target'. Wij verzinnen nu twee custom attributen: 'popup_w' en 'popup_h'. Een hyperlink komt er dan bijvoorbeeld zo uit te zien:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<a href="plaatje.jpg" popup_w="400" popup_h="300"><img src="plaatje_tn.jpg"></a>

Voor het gemak laat ik nog steeds even de alt en de titles weg. Die komen er later bij.

Waarom is dat handig?
Glad you asked! Het plan is als volgt: met JavaScript gaan we op het onclick event van de hyperlink actie ondernemen. We onderbreken het standaardgedrag van de hyperlink met een return false; in de code en we gaan met window.open een popup genereren met de juiste breedte en hoogte. En die kunnen we ophalen via onze custom-attributen. Nu kan het natuurlijk zijn dat we meer dan één thumbnail op onze pagina hebben, dus we maken een class 'popup' aan voor alle hyperlinks op onze pagina die een popup moeten worden. Het voordeel hiervan is dat we met JavaScript de hele pagina door kunnen lopen en alle <a> tags met de class 'popup' kunnen ophalen.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<a class="popup" href="plaatje.jpg" popup_w="400" popup_h="300"><img src="plaatje_tn.jpg"></a>


Unobtrusive JavaScript
Net zoals je inhoud (HTML) en opmaak (CSS) gescheiden hoort te houden, hoor je inhoud en gedrag (bijv. JavaScript) ook gescheiden te houden. Het komt de overzichtelijkheid en de onderhoudbaarheid van je pagina's ten goede. We maken dus een apart JS bestand aan en includen dat in de <head> sectie van onze pagina. Het is een goede gewoonte om dat te doen vóór de CSS includes. Je ondervangt daarmee namelijk meteen een bug in Internet Explorer die FOUC heet. Noem je bestand bijvoorbeeld image_popup.js en voeg het op de volgende manier toe:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<script type="text/javascript" src="image_popup.js"></script>

« Lees de omschrijving en reacties

Inhoudsopgave

  1. PIP - Inleiding
  2. Custom attributen
  3. image_popups.js
  4. open_picture_win
  5. PHP to the rescue

PHP tutorial opties

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.