Skip to content

Multibox pop-up positionering

Multibox javascript voor mooie pop-up vensters

Voor verscheiden cliënten gebruikt Doede.net tegenwoordig het multibox javascript voor het creëren van een pop-up venster met een uitvergrote versie van een afbeelding, video opname of website. Het is een schitterende methode om op dynamische wijze een pop-up venster met een uitvergrote afbeeldingen aan de bezoeker te tonen. Er kan tevens een beschrijving aan de afbeelding toegevoegd worden.

Opzet Multibox

Documentatie over het opzetten van dit script is echter schaars. Op de website van Phatfusion is de uitleg erg beperkt. Ik heb maar een wesbsite kunnen vinden voor de basis opzet van het script. Dit was op de website van Wooworks. Daar wordt uitgelegd hoe het sccript opgezet moet worden en hoe de html aangepast moet worden om het javascript in werking te zetten.

Ten eerste moet je ervoor zorgen dat twee javascripts op je website staan en worden geladen op de pagina waar je de pop-up wil hebben:

<script language="javascript" type="text/javascript" src="../../../multibox/mootools.js">
</script>
<script language="javascript" type="text/javascript" src="../../../multibox/multibox.js"> 
</script>

Ten tweede moet je de afbeelding die je uitvergroot wil hebben bij aanklikken binnen een link zitten naar die vergrote afbeelding met de juiste CSS class en id.

<a id="mb1" class="mb" .....

Ook moet er een description box met de juiste class aangemaakt worden:

multiBoxDesc mb1

Positie aanpassen

Wil je zoals ik dat wilde, de positie van de pop-up aanpassen, dan zul je ervoor moeten zorgen dat je de laatste versie van de css en js van Phatfusion op je site heb staan. En dan moet je multibox aanpassen om de pop-up positie aan te passen. Op lijn 31 en 32 van dat bestand vind je:

offset: {x:110, y:0},
            fixedTop: 520,

In jouw bestand zal x:0 zijn en fixedTop:false. Maak fixedTop: vast met een waarde van >0 en pas de x-as aan zoals je wil.

Et voila!

Als het goed is heb je Multibox aan de praat gekregen met de box waar je hem wil hebben.

Veel plezier!

Gepubliceerd door Doede op dinsdag 2 juni 2009

Van → Webdesign

Nog geen reacties

Laat een reactie achter

NB: XHTML is toegstaan. Je email adres wordt niet gepubliceerd.

Abonneer je op de reacties op dit artikel via RSS

*