Fancybox

Een zeer veelzijdige media extensie

Met deze extensie wordt het mogelijk zaken te laten "pop-uppen" als er op een tekstlink of afbeeldingslink geklikt wordt.

Deze extensie wordt mee geïnstalleerd bij een Remark Webdesign standaard weblay-out.

Indien deze installatie apart moet worden uitgevoerd dan zijn de kosten gelijk aan 1 uur. Deze installatie is dan inclusief de benodigde uitleg voor het gebruik.

Merk op dat alle afbeeldingen op deze pagina automatisch een keten vormen; als een afbeeldingspop-up aangeklikt is kan d.m.v. het muiswiel gebladerd worden door de afbeeldingen of door het klikken op de pijltjes. Er kunnen ook met een kleine wijziging aparte groepjes gemaakt worden.
De afbeeldingvoorstelling kan worden afgebroken door naast de getoonde afbeelding te klikken.

Een basisvoorbeeld is de afbeeldingspop-up zoals deze aangemaakt wordt via de editor:
als tekstlink of als mini-afbeelding (thumbnail) Sneeuw!.

Met een simpele wijziging kan de breedte en de hoogte van de mini-afbeelding beïnvloed worden (100x50):
Sneeuw! of zonder titel: .

Een aparte parameter kan ervoor zorgen dat dit rijtje afbeeldingen met verschillende dimensies:
300x200 rij 1 200x300 rij 1 300x300 rij 1

verandert in dit rijtje:
300x200 rij 2 200x300 rij 2 300x300 rij 2


Het is mogelijk om in de pop-up een Youtube filmpje af te spelen. Indien het filmpje bij Youtube geplaatst is inclusief mini-image dan wordt deze getoond (de grootte daarvan is niet te beïnvloeden).
Een dergelijk filmpje kan zowel middels zijn movid als met de link in de vorm die Youtube wenst aangeduid worden.

Rammstein - Ohne dich (official video) Dit is een filmpje met movid LIPc1cfS-oQ. De getoonde titel onder de pop-up is 1 van de opgegeven variabelen.
Over het algemeen past het filmpje goed in de standaard Fancybox pop-up.

De maten van het getoonde pop-up formaat kan voor dit type aangepast worden, het filmpje wordt daar dan zo goed mogelijk ingepast. Het achterhalen van de hoogte en breedte van een willekeurig filmpje is lastig. Het gewone formaat is meestal 4:3 (480x360 of 320x240) en het breedbeeld 16:9 (640x360).
Hieronder wordt achtereenvolgens 480x360, alleen breedte 800, alleen hoogte 100 en 640x360 toegepast.

Rammstein - Ohne dich (official video)

Rammstein - Ohne dich (official video)

Rammstein - Ohne dich (official video)

Rammstein - Ohne dich (official video)

Zoals gezegd kan ook een Youtube link gebruikt worden. Hier bestaan nogal wat vormen in en Fancybox kan er met velen overweg.
Hieronder staan voorbeelden van de short link (youtu.be), watch link (watch?v=), long link en embed link.

Epica - Feint (official video)

Epica - Feint (official video)

Epica - Feint (official video)

Epica - Feint (official video)

Zelfs een link met starttijd kan verwerkt worden (http://www.youtube.com/watch?v=J3BCshj_fqk&t=2m51s) -- zie hieronder.

Epica - Feint (official video)


Ook voor Vimeo filmpjes is Fancybox ingericht. Wederom kan zowel het movid als de link gebruikt worden. Indien een mini-image aanwezig is wordt deze getoond. De maten van de getoonde pop-up kunnen aangepast worden. Helaas tonen de meeste mobiele browsers dit formaat niet of niet correct.

Look at me!

Insert coin

Sonar


Zelf Tekst kan in een Fancybox pop-up getoond worden. De maten van de pop-up kunnen weer aangepast worden. De te tonen tekst kan los ingegeven worden of in een apart bestand gezet worden. Deze methode is niet bedoeld voor tekst met HTML, daarvoor kan methode Iframe gebruikt worden (zie verderop). De tekst kan voorzien worden van een eigen kleur en achtergrondkleur alsmede een css class.

Een losse tekst

Een bestandstekst in andere kleuren


Met type Iframe kunnen andere websites of eigen HTML getoond worden in een pop-up. De maten van de pop-up zijn hier vast.

Een website

Eigen HTML


Tot slot geeft Fancybox de mogelijkheid om Flash in een pop-up te tonen. De maten van de pop-up zijn vast. Helaas tonen de meeste mobiele browsers dit formaat niet of niet correct.

SWF in een pop-up


Types Tekst, Iframe en Flash kunnen ook voorzien worden van een eigen mini-image:

freeimagesuk/irredecentcd2475.jpg

Gebruikte Tags: extensie fancybox

Advertentie

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Add to favorites
  • email
  • Facebook
  • LinkedIn
  • Twitter
  • EN
QR
Volg Remark Webdesign!

 

Advertentie

Copyright 2012-2019 © Remark Webdesign
https://www.remark-webdesign.nl/pivxbase/page/fancybox/remarkwebdesign