Mediabox, un lightbox polyvalent gratuit

par Admin le vendredi 04 avril 2008 à 12:35

Utilisation de la librairie MooTools, vous permet d’ouvrir le , vidéo, et html contenu dans une variable “album” style fenêtre.

Vidéo
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=”[480 380]” title=”www.youtube.com”>play YouTube »</a>

<a href=”http://video.google.com/videoplay?docid=-8111235669135653751″ rel=”[640 290]” title=”video.google.com”>play GoogleVideo »</a>

<a href=”http://www.metacafe.com/watch/377633/transformers_2007/” rel=”[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=”[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=”[550 410]” title=”flash animation”>play 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 .js celui que vous souhaitez utiliser). Le lecteur 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 Mac.

<a href=”http://iaian7.com/media/2007/06/2007vfx.flv” rel=”[640 360]” title=”flash video”>play 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 (depuis la version 0.6.7).

<a href=”http://iaian7.com/media/2007/06/2007preview.mov” rel=”[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=”[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 , 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=”[800 600]”>open Yahoo Movies »</a>

Javascript
Une superposition peut également être ouvertes à l’aide de :

<a href=”javascript:.open(’http://iaian7.com/media/2007/06/2007vfx.flv’,' example’,'[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 . Cependant, le direct appel peut être très utile dans d’autres situations; 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’,'[width height]’)”>

Vous pouvez également fermer la superposition Mediabox à partir d’une ouverture en utilisant iFrame parent..close ();

Flash
Fichiers peuvent accéder superpositions en ainsi. Il est important de noter que les liens, bien que correctement mis en forme, ne fonctionnent pas si tiré à partir d’un fichier .

Javascript: Mediabox.open ( ‘url’, ‘titre’, ‘ [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 à reconnaître target = “parent”, et même alors, il est suspecte.

Cependant, vous pouvez envoyer un appel au parent cadre. Tant que le parent a le bon cadre javascripts liées, et en cours d’exécution (Mootools, , etc), il devrait fonctionner correctement.

Javascript: parent.Mediabox.open ( ‘url’, ‘titre’, ‘ [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
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 à la fois le style de scripts.

Une note sur le réglage de la CSS (et cela vaut pour les deux Slimbox et ), 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 (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 . (avec un thème noir).

<head> <head>
… …
<link rel=”stylesheet” href=”/css/mediabox.css” type=”text/css” media=”screen” /> href=”/css/.css” <link rel=”stylesheet” type=”text/” media=”screen” />
… …
<script src=”/js/mootools.v1.11.js” type=”text/javascript”></script> src=”/js/mootools.v1.11.js” <script type=”text/”> </ script>
<script src=”/js/swfobject.js” type=”text/javascript”></script> src=”/js/swfobject.js” <script type=”text/”> </ script>
<script src=”/js/mediabox.js” type=”text/javascript”></script> src=”/js/.js” <script type=”text/”> </ script>
… …
</head> </ Head>

Certains utilisateurs ont signalé des problèmes avec le 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 .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 de choix (que ce soit mediaplayer ou flvplayer). Chaque option a une courte description, et devrait être assez facile à mettre en place.

Le fichier 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=”[width height]” title=”caption text”> texte du lien </ a>

ps: merci à iaian7 pour son mediabox

Popularité : 40% [?]

Catégories: Ajax
Tags: , , , , , ,

Articles correspondants

    Pas d' articles correspondants

Laisser un commentaire

Vous pouvez utiliser ces balises XHTML tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

« Css Progress Bar Clone de Youtube Gratuit »