Loading ...Mediabox, un lightbox polyvalent gratuit
Utilisation de la librairie javascript MooTools, Mediabox vous permet d’ouvrir le flash, vidéo, et html contenu dans une variable « album » style fenêtre.
Vidéo
Mediabox liront normale Youtube, Google Video, Metacafe et liens automatiquement par leur traduction en code d’intégration et l’insertion de la vidéo dans le style de l’album.
<a href= »http://www.youtube.com/watch?v=l9MdgSUpG5U » rel= »mediabox[480 380] » title= »www.youtube.com »>play YouTube »</a>
<a href= »http://video.google.com/videoplay?docid=-8111235669135653751″ rel= »mediabox[640 290] » title= »video.google.com »>play GoogleVideo »</a>
<a href= »http://www.metacafe.com/watch/377633/transformers_2007/ » rel= »mediabox[400 350] » title= »www.metacafe.com »> jouer MetaCafe »</ a>
Pour insérer un DailyMotion la vidéo, vous devez utiliser le lien donné dans le code d’intégration:
<a href= »http://www.dailymotion.com/swf/1zR7vSr9sneRWgUqL » rel= »mediabox[640 486] » title= »www.dailymotion.com »>play DailyMotion video »</a>
SWF
Si le lien est spécifique à un. Swf et n’est pas de l’un de ces sites de partage de vidéos, il est incorporé directement (le fichier ci-dessous est de HomestarRunner.com).
<a href= »http://www.homestarrunner.com/tgs10.swf » rel= »mediabox[550 410] » title= »flash animation »>play flash animation »</a>
FLV
Si le média est un être inséré. Flv (flash vidéo) fichier, il sera inclus en utilisant Jeroen Wiering’s Mediaplayer ou FLVplayer (vous pouvez définir dans les options qui mediabox.js celui que vous souhaitez utiliser). Le lecteur flash contrôles sont cachés jusqu’au souris de l’utilisateur sur le contenu. Cela donne non seulement un aspect plus propre et plus dramatique pour la présentation de la vidéo étant intégrées, mais corrige des erreurs d’affichage dans Firefox Mac.
<a href= »http://iaian7.com/media/2007/06/2007vfx.flv » rel= »mediabox[640 360] » title= »flash video »>play flash video »</a>
Quicktime
Quicktime contenu joue maintenant correctement dans la plupart des navigateurs, y compris Safari 1.5/2.0 (qui exigeait de codage supplémentaire pour arrêter la lecture lors de la fermeture de la couche). La hauteur du contrôleur (16 pixels) est automatiquement ajouté à la hauteur des médias si le contrôleur option est mise à true dans le javascript (depuis la version 0.6.7).
<a href= »http://iaian7.com/media/2007/06/2007preview.mov » rel= »mediabox[480 270] » title= »play »>play quicktime movie»</a>
Windows Media Video
Les fichiers WMV sont que partiellement pris en charge pour le moment. Ne fonctionne pas bien sous Windows, et pas du tout dans Safari ou Opera 9 pour Windows 3.
<a href= »http://iaian7.com/media/Puppet.wmv » rel= »mediabox[480 270] » title= »play »> jouer wmv »</ a>
Contenu Web
Si le lien passés au script ne correspond pas à l’un de ces types de médias, il sera ouvert dans une zone de contenu iFrame. Tout iFrame utilisation n’est pas aussi flashy comme AJAX, il vous permet d’intégrer des formulaires, des pages, des sites, etc et sans conflits de scripts ou de style.
<a href= »http://movies.yahoo.com » rel= »mediabox[800 600]« >open Yahoo Movies »</a>
Javascript
Une Mediabox superposition peut également être ouvertes à l’aide de javascript:
<a href= »javascript:Mediabox.open(‘http://iaian7.com/media/2007/06/2007vfx.flv’,'javascript example’,'mediabox[640 360]‘) »> Cliquez ici </ A>
Gardez à l’esprit que l’aide <a href= »# » onclick= »… »> provoquera la page pour sauter vers le haut, tout en laissant la fenêtre Mediabox derrière au clic d’origine, en raison de la nature des liens d’ancrage. Il est déconseillé d’utiliser javascript appels d’un simple lien de toute façon, car cette fonctionnalité est intégrée Mediabox. Cependant, le direct appel javascript peut être très utile dans d’autres situations; Mediabox de charger une fenêtre de la page de chargement, vous pouvez utiliser la fonction onload = »… » dans votre balise <body>.
<body Onload= »Mediabox.open(‘url’,'title’,'mediabox[width height]‘) »>
Vous pouvez également fermer la superposition Mediabox à partir d’une ouverture en utilisant iFrame parent.Mediabox.close ();
Flash
Fichiers Flash peuvent accéder Mediabox superpositions en javascript ainsi. Il est important de noter que les liens, bien que correctement mis en forme, ne fonctionnent pas si tiré à partir d’un fichier XML.
Javascript: Mediabox.open ( ‘url’, ‘titre’, ‘mediabox [largeur hauteur]‘);
Frames
Lorsque le site est destinée à des cadres, des liens ouvre automatiquement la fenêtre de leur Mediabox intérieur du cadre dans lequel le lien est cliqué. Il n’existe aucun moyen de savoir de faire ce travail avec les liens détecté automatiquement, sauf si je devais réécrire Mediabox à reconnaître target = « parent », et même alors, il est suspecte.
Cependant, vous pouvez envoyer un appel javascript au parent cadre. Tant que le parent a le bon cadre javascripts liées, et en cours d’exécution (Mootools, Mediabox, etc), il devrait fonctionner correctement.
Javascript: parent.Mediabox.open ( ‘url’, ‘titre’, ‘mediabox [largeur hauteur]‘);
Télécharger
mediabox68.js version 0.6.8 Beta (about 14kb)
mediabox.cssCSS
mediaboxImages.zip
Mootools
SWFobject
JW Mediaplayer ou JW FLVplayer
Facultatif
Mediabox est conçu pour travailler aux côtés de Slimbox, un album d’images et de script pour des groupes d’images. Non seulement le lien formats sont très similaires, mais le formatage CSS est exactement le même, vous permettant d’utiliser un seul fichier CSS à la fois le style de scripts.
Une note sur le réglage de la CSS (et cela vaut pour les deux Slimbox et Mediabox), si d’autres éléments sur la page utiliser z-index paramètres, ils apparaîtront en haut de la superposition et la boîte de contenu. Cela peut être corrigé en ajoutant z-index: 50; d’# lbOverlay, et z-index: 51; à lbCenter #, # lbBottomeContainer dans le fichier CSS (vous pouvez utiliser n’importe quelle des valeurs qui sont plus grands que les autres éléments sur la page) .
Installation
Mediabox.js, mediabox.css, mootools.js et swfobject.js devrions tous être chargé dans la page. Si vous êtes également Slimbox l’installation, vous n’avez besoin que d’une copie du code CSS, soit slimbox.css (avec le style par défaut de blanc et de gris) ou mediabox.css (avec un thème noir).
<head> <head>
… …
<link rel= »stylesheet » href= »/css/mediabox.css » type= »text/css » media= »screen » /> href= »/css/mediabox.css » <link rel= »stylesheet » type= »text/css » media= »screen » />
… …
<script src= »/js/mootools.v1.11.js » type= »text/javascript »></script> src= »/js/mootools.v1.11.js » <script type= »text/javascript »> </ script>
<script src= »/js/swfobject.js » type= »text/javascript »></script> src= »/js/swfobject.js » <script type= »text/javascript »> </ script>
<script src= »/js/mediabox.js » type= »text/javascript »></script> src= »/js/mediabox.js » <script type= »text/javascript »> </ script>
… …
</head> </ Head>
Certains utilisateurs ont signalé des problèmes avec le CSS si la page ne comporte pas de DOCTYPE. Allez voir sur w3.org pour de plus amples informations sur les diverses options, personnellement j’utilise <! DOCTYPE html PUBLIC « - / / W3C / / DTD XHTML 1,0 Transitional / / EN » « http://www.w3.org/TR/xhtml1 / DTD/xhtml1-transitional.dtd « > parce que c’est la valeur par défaut de CMS Textpattern préférence.
Ouvrez mediabox.js dans un éditeur de texte ou de code pour définir les préférences, la plupart peuvent être laissées à leur valeur par défaut, mais vous avez à mettre le chemin vers le lecteur vidéo flash de choix (que ce soit mediaplayer ou flvplayer). Chaque option a une courte description, et devrait être assez facile à mettre en place.
Le fichier CSS doit aussi être modifiés avec la Correction des liens vers les images.
Pour essayer:
<a href= »link » rel= »mediabox[width height] » title= »caption text » >link text</a> <a href= »link » rel= »mediabox[width height] » title= »caption text »> texte du lien </ a>
ps: merci à iaian7 pour son mediabox
Très bel outil et très simple à utiliser.
J’ai quand meme une question : Est-il possible par une astuce de lancé automatiquematiquement la Mediabox?
Par exemple j’arrive sur la page et cela fait une sorte d’intro…
Merci d’avance
C’est possible en rajoutant un onload dans la balise body :
Voilou
bonjour,
Est il possible d’etendre la light box sur toutes les frames ?
merci
bonjour
mon probleme est le suivant je veux utiliser le mediabox
je l’ai installé comme indiqué mais lorsque je clique sur l’image
il me propose de télécharger le fichier flv
je pense qu’il y a un conflit de script dans ma page html
avez vous une idee
merci d’avance