Lightbox

Nvu, Kompozer en Bluegriffon zijn open source (WYSIWYG) programma's waarmee je een website kunt maken en onderhouden (vergelijkbaar met FrontPage / Dreamweaver).
Miekmol
Berichten: 74
Lid geworden op: 15 november 2010, 21:18
    Windows 7 Internet Explorer 8

Lightbox

Bericht door Miekmol »

Hoi,

Ik heb dit artikel gevonden over Lightbox.
Ik ben niet zo'n held in websites maken maar wil er toch een mooie fotopagina in maken.
Kan iemand me zeggen of deze informatie heden ten dagen nog wel klopt want het artikel is uit 2004.

Je wilt je fotoalbum niet openen in een popup of andere pagina of je wilt gewoon een gelikte manier hebben om je foto's te laten zien? Met Lightbox maak je een fotoalbum dat er niet alleen geweldig uitziet, het is ook nog eens superfunctioneel.

Als je nu al een fotoalbum hebt, herken je waarschijnlijk het volgende: Je foto's zijn groter dan je contentvlak, dus heb je thumbnails gemaakt. Zodra je bezoekers erop klikken wordt in een popup of in een andere pagina de grote versie getoond. Dit werkt weliswaar goed, maar het blijft openen, terug, openen, sluiten... Minder praktisch dus.

Het mooie van Lightbox is dat je foto's over je website geplaatst worden, wat ervoor zorgt dat je een mooi geheel met je website creëert. Je website hoeft op deze manier ook niet verlaten te worden om grotere foto's te bekijken en dus worden je albums niet geblokkeerd door een pop-up blocker.

Wil je weten wat ik precies bedoel en hoe het eruit ziet? Klik dan hier voor een voorbeeld.

Dat wil ik ook!

Waarschijnlijk is dat je eerste reactie, dat was de mijne in ieder geval wel! ;-) Laten we dan ook maar meteen beginnen met het downloaden van de techniek achter Lightbox. Klik hier om Lightbox 2.0 te downloaden.

In het bestand vind je een Engelstalige uitleg, in dit artikel zal ik de Nederlandse vertaling plaatsen.

1. Javascripts
Lightbox 2.0 maakt gebruik van 'Prototype Framework' en 'Scriptaculous Effects Library'. Om hier gebruik van te maken moet je de volgende regels toevoegen tussen < head > en < /head > van de betreffende html-pagina.

<script type="text/javascript"
src="js/prototype.js"></script>
<script type="text/javascript"
src="js/scriptaculous.js?load=effects"></script>

De bestanden staan in het mapje 'js', zorg dat je ze ook zo uploadt naar je server.

2. Stylesheet
Voeg vervolgens de meegeleverde stylesheet toe door de volgende regel te plaatsen:

<link rel="stylesheet" href="css/lightbox.css" type="text/css"
media="screen" />

De stylesheet staat in het mapje 'css', upload deze map naar je server.

3. Afbeeldingen uploaden
In de map 'images' bevinden zich de afbeeldingen voor de visuele stijl van LightBox 2.0. Deze kun je eventueel bewerken, zorg ervoor dat je de namen ongewijzigd laat. Upload vervolgens de hele images-map naar je server.

4. Afbeelding activeren
We gaan nu je afbeeldingen laten werken met LightBox. Klik op een afbeelding, in het voorbeeld noemen we de geselecteerde afbeelding thumb-1.jpg. Dit wordt een link naar de grotere versie: image-1.jpg. Deze wordt geopend zodra je klikt op thumb-1.jpg.

Voeg het volgende toe aan je afbeelding:

<a href="images/image-1.jpg" rel="lightbox">

Plaats erachter:

</a>

Je krijgt dan dus:

<a href="images/image-1.jpg" rel="lightbox"><img
src="images/thumb-1.jpg"></a>

5. Album
Wil je meerdere afbeeldingen groeperen, zodat je 'volgende' en 'vorige' kunt kiezen, dan moet je bij rel="lightbox" de groepsnaam tussen rechte haakjes plaatsen: [groepsnaam]. De code wordt dan bijvoorbeeld:

<a href="images/image-1.jpg" rel="lightbox[groepsnaam]"><img
src="images/thumb-1.jpg"></a>
<a href="images/image-2.jpg" rel="lightbox[groepsnaam]"><img
src="images/thumb-2.jpg"></a>
<a href="images/image-3.jpg" rel="lightbox[groepsnaam]"><img
src="images/thumb-3.jpg"></a>

[groepsnaam] mag een willekeurige naam zijn, houd het overzichtelijk. Zorg ervoor dat de groepsnaam tussen de aanhalingstekens staat. Dus niet rel="lightbox"[groepsnaam] maar rel="lightbox[groepsnaam]"

6. Beschrijving
Wil je ook een beschrijving onder elke foto tonen, voeg dan aan je link het volgende stukje code toe:

title="de beschrijving van je foto"

Je krijgt dan dus:

<a href="images/image-1.jpg" rel="lightbox[groepsnaam]" title=" de
beschrijving van je foto"><img
src="images/thumb-1.jpg"></a>

Als je nu het html-bestand uploadt en online op de afbeeldingen klikt, zul je LightBox in werking zien op je eigen website.

Veel succes!

P.S. Je kunt ook kiezen voor een uitvoering die iets eenvoudiger is, maar die daardoor wel minder mogelijkheden heeft. Klik hier om naar deze versie te gaan.

groetjes Mieke
Gebruikersavatar
nirwana
Beheerder
Berichten: 11423
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: Lightbox

Bericht door nirwana »

Mieke,

Je had natuurlijk ook gewoon een linkje kunnen plaatsen naar de informatie: http://www.websitesupporters.com/plaats ... htbox.html

Het voorbeeld werkt in elk geval nog, dus dan zal het wel goed zijn.
Maar ik raad je dan aan om voor de nieuwere versie van dit lightbox-script gaan.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
Miekmol
Berichten: 74
Lid geworden op: 15 november 2010, 21:18
    Windows 7 Internet Explorer 8

Re: Lightbox

Bericht door Miekmol »

Hallo Martijn,

Zoals je al had kunnen raden kom ik er niet uit met Lightbox.
Ik weet doodsimpel niet waar ik de codes neer moet zetten. Heb het al diverse malen geprobeerd en dan krijg ik een foutmelding.
Ik zou graag als dat mogelijk is een stuk of 4 foto's zichtbaar op de website hebben willen staan met daarboven bijv. de eerste foto, die groot is.
Maar dan staan er geen 4 foto's op maar wel 25 of meer, die je in de eerste instantie niet ziet.
Als je daar dan overheen gaat met de muis, of je klikt ze aan worden ze in een nieuw bovenstaand venster geopend, horizontaal of verticaal. De andere foto's blijven er in het klein onder staan.
Dan wil ik ook nog graag dat dit geplaatst kan worden in een fotopagina met dezelfde layout als de andere pagina's. Dus geen foto's over heel het scherm, maar netjes binnen de rode lijntjes.

Ik weet niet of dit mogelijk is.
Ik zou je willen vragen of ik mijn website mag inpakken en evt. naar je mag opsturen, of dat je me kunt uitleggen hoe ik het precies moet maken. Mijn Engels is niet zo denderend om alles te begrijpen helaas.

groetjes Mieke
Gebruikersavatar
nirwana
Beheerder
Berichten: 11423
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: Lightbox

Bericht door nirwana »

Wat mij betreft zet je wat je nu hebt gemaakt ergens op een server als een test-pagina (bijvoorbeeld in een nieuwe map) en plaats je hier op het forum een linkje. Mocht dat niet lukken dan kun je hem zippen en opsturen.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
Gebruikersavatar
nirwana
Beheerder
Berichten: 11423
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: Lightbox

Bericht door nirwana »

Mieke,

Inmiddels heb je me de website-bestanden opgestuurd.
Deze heb ik bekeken en hieraan heb ik de foto's toegevoegd. Hier zie je het voorlopige resultaat: www.mozbrowser.nl/web/bigwilly/fotosite.html

Overigens heb ik hiervoor wel alle foto's geresizet naar een kleiner formaat.
Hiervoor wilde ik rechtstreeks ImageMagick gebruiken, maar uiteindelijk kwam ik uit bij Calmar's Picture Resizer, een Python-frontend voor ImageMagick. Daarmee heb ik op basis van de originele foto's 2 mapjes gevuld: thumbs + large. De bestanden die dat opleverde heb ik in het HTML-bestand aangeduid:

Code: Selecteer alles

<a href="foto's/large/1.jpg" rel="lightbox[willy]"><img src="foto's/thumbs/1.jpg" ></a>
<a href="foto's/large/2.jpg" rel="lightbox[willy]"><img src="foto's/thumbs/2.jpg" ></a>
<a href="foto's/large/3.jpg" rel="lightbox[willy]"><img src="foto's/thumbs/3.jpg" ></a>
<a href="foto's/large/4.jpg" rel="lightbox[willy]"><img src="foto's/thumbs/4.jpg" ></a>
<a href="foto's/large/5.jpg" rel="lightbox[willy]"><img src="foto's/thumbs/5.jpg" ></a>
<a href="foto's/large/6.jpg" rel="lightbox[willy]"><img src="foto's/thumbs/6.jpg" ></a>
<a href="foto's/large/7.jpg" rel="lightbox[willy]"><img src="foto's/thumbs/7.jpg" ></a>
<a href="foto's/large/8.jpg" rel="lightbox[willy]"><img src="foto's/thumbs/8.jpg" ></a>
<a href="foto's/large/9.jpg" rel="lightbox[willy]"><img src="foto's/thumbs/9.jpg" ></a>
<a href="foto's/large/10.jpg" rel="lightbox[willy]"><img src="foto's/thumbs/10.jpg" ></a>
<a href="foto's/large/11.jpg" rel="lightbox[willy]"><img src="foto's/thumbs/11.jpg" ></a>
<a href="foto's/large/12.jpg" rel="lightbox[willy]"><img src="foto's/thumbs/12.jpg" ></a>
<a href="foto's/large/13.jpg" rel="lightbox[willy]"><img src="foto's/thumbs/13.jpg" ></a>
<a href="foto's/large/14.jpg" rel="lightbox[willy]"><img src="foto's/thumbs/14.jpg" ></a>
<a href="foto's/large/15.jpg" rel="lightbox[willy]"><img src="foto's/thumbs/15.jpg" ></a>
<a href="foto's/large/16.jpg" rel="lightbox[willy]"><img src="foto's/thumbs/16.jpg" ></a>
<a href="foto's/large/17.jpg" rel="lightbox[willy]"><img src="foto's/thumbs/17.jpg" ></a>
<a href="foto's/large/18.jpg" rel="lightbox[willy]"><img src="foto's/thumbs/18.jpg" ></a>
<a href="foto's/large/19.jpg" rel="lightbox[willy]"><img src="foto's/thumbs/19.jpg" ></a>
<a href="foto's/large/20.jpg" rel="lightbox[willy]"><img src="foto's/thumbs/20.jpg" ></a>
<a href="foto's/large/21.jpg" rel="lightbox[willy]"><img src="foto's/thumbs/21.jpg" ></a>
<a href="foto's/large/22.jpg" rel="lightbox[willy]"><img src="foto's/thumbs/22.jpg" ></a>
<a href="foto's/large/23.jpg" rel="lightbox[willy]"><img src="foto's/thumbs/23.jpg" ></a>
<a href="foto's/large/24.jpg" rel="lightbox[willy]"><img src="foto's/thumbs/24.jpg" ></a>
<a href="foto's/large/25.jpg" rel="lightbox[willy]"><img src="foto's/thumbs/25.jpg" ></a>
<a href="foto's/large/26.jpg" rel="lightbox[willy]"><img src="foto's/thumbs/26.jpg" ></a>
<a href="foto's/large/27.jpg" rel="lightbox[willy]"><img src="foto's/thumbs/27.jpg" ></a>
Verder heb ik in de <head> van de pagina deze regels toegevoegd:

Code: Selecteer alles

	<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
	<link href="templatemo_style.css" rel="stylesheet" type="text/css" />

	<script src="js/prototype.js" type="text/javascript"></script>
	<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
	<script src="js/lightbox.js" type="text/javascript"></script>
En zo is de aanroep van de Lightbox-code een feit.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
Gebruikersavatar
nirwana
Beheerder
Berichten: 11423
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: Lightbox

Bericht door nirwana »

Mieke,

Op http://www.mozbrowser.nl/web/bigwilly/fotosite_2.html heb ik een voorbeeld geplaatst van de Visual Lightbox die je zelf hebt aangedragen.

Dit programma maakt het HTML-bestand zelf aan. Wel heb ik daarna de code van dit gegenereerde bestand in de bestaande fotosite.html geplaatst. Dit programma kan namelijk geen rekening houden met de layout van jouw eigen website en genereert alleen de lightbox zelf. Wel zijn de onderdelen die je daaruit moet overnemen netjes gemarkeerd met Start en End-commentaren, zoals <!-- Start VisualLightBox.com HEAD section --> en <!-- Start VisualLightBox.com BODY section id=1 -->. Daaraan kun je zien in welk gedeelte je wat dient over te nemen.

Een ander nadeel van Visual Lightbox is dat onderaan de lightbox een linkje naar de VisualLightbox-website wordt getoond. Als je daarmee kunt leven dan is dat geen enkel probleem.

Maar goed, een groot voordeel is dat je als je foto's toevoegt eenvoudig weer de HTML-code kunt aanmaken (en de thumbnails erbij).
Verder kun je daar een leuk thema bij uitkiezen. Ik heb in dit voorbeeld voor Sticky Notes gekozen en voor de lightbox zelf heb ik voor Noir gekozen. Ook kun je het formaat van de thumbnails zelf bepalen.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
Miekmol
Berichten: 74
Lid geworden op: 15 november 2010, 21:18
    Windows 7 Internet Explorer 8

Re: Lightbox

Bericht door Miekmol »

Hallo Martijn

De website heb ik klaar..... tenminste als Willy hem goed vindt.
Je wilt het vast niet geloven... er was een fout bij Kompozer.
Alles wat ik gisteren en vanmiddag had gedaan, was vanavond verdwenen en kon ik weer opnieuw beginnen.
Dit was onder andere het gastenboek. Ik merkte gisteravond al dat ik niet meer kon werken in de gastenboekpagina.
Omdat ik weer een ander gastenboek moest maken voor de Engelse versie en niet dezelfde layout kon krijgen heb ik alle knoppen aangepast aan gastenboek/guestbook en guestbook/gastenboek en alles gekoppeld aan het Nederlandse gastenboek.
De Width heb ik op "550"gezet en Height op "1000". Berichten heb ik ingesteld op 5 per pagina en zo krijg ik geen scrollbalkje wat ik mooier vind.
Ik heb alles naar de server geupload en kom nu op 6 MB. Dit omdat ik nog 2 x Thumbnails en 2 x Images heb. Ik weet niet welke mappen ik daarvan weg moet gooien, welke gebruikt zijn op de fotopagina zoals die er nu staat. Ach maakt ook niet uit, zo groot is 6 MB niet, toch?

Ik vind wel dat de website langzaam inlaadt......

Als je een kijkje wilt nemen kan dat hier... http://www.dse.nl/~mvesters/

Ik hoor graag jullie commentaar!

groetjes Mieke
Gebruikersavatar
nirwana
Beheerder
Berichten: 11423
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: Lightbox

Bericht door nirwana »

Mieke,

6MB is inderdaad niet erg groot. Beter dan de 12 MB die je eerst had.
www.dse.nl/~mvesters/fotosite.html gebruikt de mappen images1 en thumbnails1.
Dus dan weet je welke mappen je niet nodig hebt.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
Gebruikersavatar
nirwana
Beheerder
Berichten: 11423
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: Lightbox

Bericht door nirwana »

Overigens heb ik wel een idee waarom de website wat traag inlaadt:
www.dse.nl/~mvesters/images/royrobison.jpg
www.dse.nl/~mvesters/images/jimreeves.jpg
www.dse.nl/~mvesters/images/countrymusic.jpg

Dat kan vast wel wat kleiner en daar profiteert elke pagina van jouw website van.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
Miekmol
Berichten: 74
Lid geworden op: 15 november 2010, 21:18
    Windows 7 Internet Explorer 8

Re: Lightbox

Bericht door Miekmol »

Hoi Martijn,

Ik heb andere plaatjes kleiner gemaakt, o.a. het country-logo, en natuurlijk ook countrymusic en het plaatje op de homepages etc. waar Willy aan het zingen is. Deze zijn nu van 104 KB naar 32 KB gegaan.
Roy Orbison 32 KB en Jim Reeves 26 KB zijn al zo klein dat het daar bijna niet aan kan liggen.

Na de veranderingen zie ik nog niet dat het sneller wordt ingeladen.
Het moet ergens anders aan liggen... misschien de server???... of de fotopagina of de gastenboekpagina?

Mijn website bestaat nu uit 3,3 MB... netjes toch?
http://www.dse.nl/~mvesters/


groetjes Mieke
Gebruikersavatar
nirwana
Beheerder
Berichten: 11423
Lid geworden op: 19 september 2003, 5:09
    Linux Firefox

Re: Lightbox

Bericht door nirwana »

Mieke,

Laten we het eens vragen aan Google's Page Speed Online:

The following images are resized in HTML or CSS. Serving scaled images could save 86.6KiB (82% reduction).

http://www.dse.nl/~mvesters/images/royrobison.jpg is resized in HTML or CSS from 446x600 to 120x162. Serving a scaled image could save 29.8KiB (92% reduction).
http://www.dse.nl/~mvesters/images/countrymusic2.jpg is resized in HTML or CSS from 354x212 to 191x114. Serving a scaled image could save 23.6KiB (70% reduction).
http://www.dse.nl/~mvesters/images/jimreeves.jpg is resized in HTML or CSS from 400x544 to 118x161. Serving a scaled image could save 23.3KiB (91% reduction).
http://www.dse.nl/~mvesters/images/slimwhitman.jpg is resized in HTML or CSS from 265x368 to 119x167. Serving a scaled image could save 9.4KiB (79% reduction).
http://www.dse.nl/~mvesters/images/gbvlag.jpg is resized in HTML or CSS from 80x47 to 71x42. Serving a scaled image could save 465B (20% reduction).

Dat zijn toch nog leuke reducties.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
Gebruikersavatar
nirwana
Beheerder
Berichten: 11423
Lid geworden op: 19 september 2003, 5:09
    Linux Firefox

Re: Lightbox

Bericht door nirwana »

Dan gooien we YSlow + Firebug er nog eens overheen:

Het voornaamste wat daaruit komt is een afbeelding die wel ergens wordt aangegeven, maar niet gevonden kan worden:
http://www.dse.nl/~mvesters/images/temp ... enu_bg.jpg

Het beste wat je kunt doen is de afbeelding die ik hierboven heb aangegeven te verkleinen naar het formaat dat de website nodig heeft. Wat dat betreft zou het helemaal niet nodig moeten zijn om een width en een height aan de afbeelding mee te geven (al is dat op zich wel een goede gewoonte). De afbeeldingen moeten gewoon al de juiste afmetingen hebben, zodat een browser deze niet alsnog hoeft te verkleinen.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
Miekmol
Berichten: 74
Lid geworden op: 15 november 2010, 21:18
    Windows 7 Internet Explorer 8

Re: Lightbox

Bericht door Miekmol »

Hoi Martijn,

Heel leuk allemaal, maar echt ik begrijp er niets meer van.
Waar kan ik die afbeeldingen die verkleind zijn vinden, opslaan om in mijn website te zetten?
Als ik hier op klik zie ik de foto nog net zo groot als ik ze nu heb staan in mijn website.

Ook deze kan ik niet vinden en weet ik absoluut niet wat je bedoelt... http://www.dse.nl/~mvesters/images/temp ... enu_bg.jpg
Als ik op deze link klik krijg ik pagina niet gevonden.

Kun je me dit alles uitleggen?

groetjes Mieke
Gebruikersavatar
nirwana
Beheerder
Berichten: 11423
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: Lightbox

Bericht door nirwana »

Mieke,

De afbeeldingen zijn nog niet verkleind. Dat zul je zelf nog moeten doen.
Google geeft vooralsnog alleen aan wat het resultaat zou zijn als je de afbeelding naar het juiste formaat verkleind.

Ik neem aan dat die achtergrond-afbeelding ergens in een CSS-bestand vermeld staat.
Eens kijken: in http://www.dse.nl/~mvesters/templatemo_style.css staat het volgende:

Code: Selecteer alles

#templatemo_menu {
  padding: 0 10px;
  background: transparent url(images/templatemo_menu_bg.jpg) no-repeat scroll 0%;
  float: right;
  width: 600px;
}
Dan heb je 2 opties:
1) zorg ervoor dat die afbeelding daar weer komt te staan
2) haal die verwijzing uit het CSS-bestand

Maar ik neem aan dat het verkleinen van de afbeeldingen nog wel het meeste gaat schelen. Als je dat gedaan hebt dan weet je of het nog aan de website kan liggen of dat het aan de snelheid van de webserver van DSE ligt.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
Miekmol
Berichten: 74
Lid geworden op: 15 november 2010, 21:18
    Windows 7 Internet Explorer 8

Re: Lightbox

Bericht door Miekmol »

Hoi Martijn,

Ik word gek!
Vanavond kwam ik tot de ontdekking dat de button Performance met een s erachter moet.
Dus een nieuwe button gemaakt met Adobe Illustrator, ik sla hem op bij mijn images.
Ik zet op elke Engelse pagina de button er weer in en koppel deze aan Performance html.
Daarna sla ik elke pagina opnieuw op.

Weet je dat de buttonknop wegblijft.
Ik heb het al 5 keer gecontroleerd...
wat doe ik nu fout?
Ik zie het niet meer......

Ik heb alles al wel 5 keer bij de server overschreven.

Martijn wil je aub eens kijken... ik heb je alle inlogcodes gegeven, of heb je die niet meer?

groetjes Mieke