Image Thumbnail Viewer of Lightbox plugin?

Voor de Slickr Gallery, een AJAX Flickr plugin voor WordPress blogs, had ik een andere WordPress plugin nodig, namelijk Lightbox. Maar deze plugin lukt het ook aardig om van een thumbnail op een dynamische manier (DHTML) de grote foto te voorschijn te toveren op de webpagina.

Dit wordt hier bij Dynamic Drive DHTML Scripts’ Image Thumbnail Viewer geïllustreerd.

Wat HTML betreft: een snuifje CSS en Javascript in de header, plus een GIF voor de animatie terwijl de bezoeker op de foto wacht en last but not least een rel attribuut toevoegen in de HTML-code van de hyperlink.

De plugin installeren was een fluitje van een cent. Voor dit viewer script moet je toch hier en daar wat ingrijpen o.a. het pad naar de verschillende bestanden aanpassen. Je kunt er ook maar 1 foto meer tonen, niet een hele reeks foto’s zoals bij Lightbox wel het geval is. En sneltoetsen zoals bij Lightbox zijn er ook al niet.

Aptana IDE en YUI Javascript Library

Ik was al een tijdje op zoek naar een goeie open source IDE voor HTML, CSS en javascript. Toevallig vind ik vanavond Aptana, een IDE om gemakkelijk Ajax applicaties te ontwikkelen en te ontplooien.

Je vindt op de site alleszins heel wat screencasts om het werken met Aptana onder de knie te krijgen. Er is ook een screencast om te starten met een webproject gebaseerd op de YUI Javascript library.

Voor wie Flash en Javascript wil combineren om dynamische webapplicaties te maken, wordt er op de site ook verwezen naar AFLAX (Asynchronous Flash and XML).

CSS test

paragraph

second paragraph

this is a blockquote

third paragraph

1. ordered list
2. etc.

• unordered list
• etc.

H1 header

H2 header

H3 header

H4 header

a link to this weblog

this is code
second line
third line


paragraph class=small

GIF of a dog

abbr tag

This CSS

CSS voor HTML elementen

Met een CSS document kan men de HTML elementen opmaken, zich baserend op de HTML 4.01 specificatie. Bekijk dit voorbeeld [CSS document] eens.

Twee aanbevelingen overgenomen uit bovenstaand voorbeeld:

• De eenheid 1em is ongeveer gelijk aan 12px.
• Naast een font-size ook altijd een line-height specifiëren.

HTML menu met CSS en…

een klein javascript om ook IE gebruikers tevreden te stellen. Dat alles lees je in het artikel Drop-Down Menus, Horizontal Style. Een HTML lijst met de menu items, wat CSS eraan toevoegen en klaar is kees. Maak eventueel het geheel nog wat aantrekkelijker door een kleurtje toe te voegen wanneer de muis over een menu item komt. Het proberen waard !

CSS, liquid layout en andere tutorials

Gebruik CSS om websites op te maken. Max Design geeft enkele goeie voorbeelden van het gebruik van CSS: list, floating image, rules, selectors, het komt allemaal aan bod. Meer over web and graphic design vindt men op de website van Max Design.

Voor een overzicht: zie Three Column Layouts.

Schaduw met CSS

Geef aan een foto of ook aan een titel wat schaduw met de CSS-techniek die duidelijk beschreven en uitgelegd wordt in dit artikel van A List Apart.

In plaats van dit schaduweffect te realiseren met behulp van een fotobewerkingsprogramma, kan het eenvoudig met enkele CSS lijnen in het stijlblad en enkele kleine GIF-bestanden als achtergrond.

Schaduweffect voor titels

Samen- en uitvouwen met CSS

Het uitvouwen en samenvouwen van HTML-tekst (Expandable/Collapsible Content) wordt eenvoudig gerealiseerd met behulp van CSS.

CSS tip

CSS tip

Gebruik meerdere CSS classes voor 1 element
en bespaar enkele bytes. Zie Saving Bytes by Using Multiple CSS Classes on Elements. Van de hand van de auteur: een leuke DHTML demopagina op http://dhtmlnirvana.com/.

Stijlbladen (CSS)

CSS

CSS Pointers Group for practical use of CSS: met heel wat voorbeelden, FAQ’s, links en praktische toepassingen van stijlbladen.

HTML-opmaak zonder table tag

CSS Tableless Web Sites geeft een uitgebreide lijst van
voorbeeldsites waarin de opmaak gerealiseerd wordt met CSS
en niet met de HTML-tag <table>.

Human Kinetics

Via het tijdschrift Runner’s World kwam ik op de website
Human Kinetics, waar ik informatie zocht over een nieuw boek
Kinetics of Human Motion over biomechanica en de krachten die ten grondslag liggen aan de bewegingen van het lichaam.

Dit is het tweede deel van een basiswerk over biomechanica.

Coldplay

Vanavond pikken we een concert van Coldplay mee. Het concert vindt plaats in Vorst Nationaal.