logo maximenuck 64Maximenu CK

Maximenu CK is a Joomla megamenu dropdown with mootools.

logo slideshowck 64Slideshow CK

Slideshow CK, nice effect with this slideshow responsive design.

logo accordeonmenuck joomlaAccordeon Menu CK

Accordeon menu CK is a joomla accordion menu with mootools effects.

logo template creator joomlaTemplate Creator CK

Template Creator CK is a tool to create your own Joomla! templates.

Mediabox CK - A multimedia lightbox

Mediabox, lightbox pour joomla

Mediabox CK is a Joomla plugin which can be used to show images, videos, flash animations, medias from Facebook, Twitter, Youtube, Daylymotion or some PHP pages in a lightbox window. You can add some title and description, and create some albums. The scipt is based on mediaboxadvanced from John Einselen .

 

How to use Mediabox CK

To create a popup you must add a link using the butotn 'Add a link' in your editor. In the tab  'Advanced', set the line 'Relationship Contenu - Target' with the value 'Lightbox' :

 

editeur_lightbox

Pour créer un album ou ajouter des paramètres personnalisés, il faut basculer l'éditeur en mode HTML et insérer le code manuellement en ajoutant 'rel="lightbox[album1]" ' par exemple sur un lien <a> .

Video tutorial (with the JCE editor) :

 

Options of the plugin Mediabox CK

capture_mediabox_params_fr

Download the plugin Mediabox CK for Joomla 3.x

Download the plugin Mediabox CK for Joomla 2.5

Download the plugin Mediabox CK for Joomla 1.5

Download the Documentation Mediabox CK

Vote on the JED to help Mediabox CK

 

Plugin Mediaboxtag CK

Si vous avez du mal à ajouter l'attribut rel="lightbox" sur les liens qui mènent à vos médias, vous pouvez choisir d'utiliser Mediaboxtag_CK qui permet d'insérer les liens grâce au tag {mediabox} dans vos articles.

Il faut installer et publier le plugin, il faut également installer et utiliser le plugin Mediabox_CK pour que ça fonctionne.

Dans vos articles vous pouvez donc insérer une médiabox de la manière suivante :

Lien simple :

{mediabox src=http://www.google.fr}Le lien vers le popup ici{/mediabox}

Lien vers une image :

{mediabox src=images/joomla_logo_black.jpg}Le lien vers une image{/mediabox}

Lien avec image cliquable :

{mediabox src=images/joomla_logo_black.jpg}powered_by{/mediabox}

Lien avec paramètres personnalisés :

{mediabox src=http://www.google.fr|w=800|h=550|alb=album1|t=Mon titre::Ma description}Le lien vers le popup ici{/mediabox}

Liste des paramètres :

src= : lien vers le média à afficher dans la lightbox

w= : largeur de la lightbox en px

h= : hauteur de la lightbox en px

alb= : nom de l'album pour grouper les médias et activer la navigation

t= : titre et description affichés sous le média, séparer le titre et la description par deux double points ::

Pour donner des dimensions à la lightbox, il faut donner une largeur ET une hauteur, un seul attribut n'aura pas d'effet.

Télécharger le plugin Mediaboxtag CK pour Joomla 2.5

Télécharger le plugin Mediaboxtag CK pour Joomla 1.5

Discuter de Mediabox CK sur le forum joomla.fr

 

Démo de Mediabox_CK

Image simple

1_1219372692394

Code à insérer dans l'article, il faut ajouter l'attribut 'rel=lightbox' sur le lien qui pointe sur la grande image) :

<a rel="lightbox" href="images/stories/images/1_1219372692394.jpg"><img alt="1_1219372692394" src="images/stories/images/1_1219372692394.jpg" height="150" width="200" /></a>

 

Image avec titre (on peut inclure du html dans le titre)

major-league-android

Code à mettre dans le titre du lien

Baseball::Wallpaper from  <a href="http://g1wallz.com/" title="Wallpapers android" target="_blank">G1Wallz.com</a>

 

Galerie d'images

1_1219372692394 major-league-android on-top-of-earth

Code à insérer dans l'aricle, il faut définir un nom d'album à ajouter à toutes les images qui en font partie

 

<a title="Flying tree::Image 1 of 3 in the album1" rel="lightbox[album1]" href="images/stories/images/1_1219372692394.jpg"><img alt="1_1219372692394" src="images/stories/images/1_1219372692394.jpg" height="150" width="200" /></a>

 

Média twitter

On peut insérer des sons, des vidéos et images hébergés sur des sites sociaux liés à twitter (démos de John Einselen, groupées dans un album [twitter] ) :

Twitcam »

 

<a href="http://twitcam.com/118d" rel="lightbox[twitter]" title="Twitcam">Twitcam »</a>

 

TweetMic»

 

<a href="http://tweetmic.com/p/otcfg1uo6ed" rel="lightbox[twitter]" title="TweetMic long url">TweetMic»</a>

 

Tmic.FM »

 

<a href="http://tmic.fm/otcfg1uo6ed" rel="lightbox[twitter]" title="TweetMic short url">Tmic.FM »</a>

 

 

TwitPic »

 

<a href="http://twitpic.com/8fc41" rel="lightbox[twitter]" title="TwitPic">TwitPic »</a>

 

Twiturm »

 

<a href="http://twiturm.com/ocicc" rel="lightbox[twitter]" title="Twiturm">Twiturm »</a>

 

TwitVid »

 

<a href="http://www.twitvid.com/5N35X" rel="lightbox[twitter]" title="TwitVid">TwitVid »</a>

 

Yfrog image »

 

<a href="http://yfrog.com/4et9zpj" rel="lightbox[twitter]" title="Yfrog image::Photo by John Einselen">Yfrog image »</a>

 

Yfrog video »

 

<a href="http://yfrog.us/0ia9mcz" rel="lightbox[twitter]" title="Yfrog video">Yfrog video »</a>

 

 

Vidéos des réseaux sociaux

On peut afficher des vidéos de nombreux réseaux sociaux (démos de John Einselen, , groupées dans un album [social] ) :

Facebook »

 

<a href="http://www.facebook.com/video/video.php?v=543650258685" rel="lightbox[social 756 424]" title="facebook.com">Facebook »</a>

 

Flickr video »

 

<a href="http://www.flickr.com/photos/bhl1/2402027765/in/pool-video" rel="lightbox[social 400 300]" title="flickr.com">Flickr video »</a>

 

GameTrailers.com player »

 

<a href="http://www.gametrailers.com/player/49936.html" rel="lightbox[social]" title="gametrailers.com/player/">GameTrailers.com player »</a>

 

GameTrailers.com video »

 

<a href="http://www.gametrailers.com/video/e3-09-assassins-creed/50139" rel="lightbox[social]" title="gametrailers.com/video/">GameTrailers.com video »</a>

 

Google video »

 

<a href="http://video.google.com/videoplay?docid=-8111235669135653751" rel="lightbox[social 640 290]" title="video.google.com">Google video »</a>

 

Megavideo »

 

<a href="http://megavideo.com/?v=WD28NSRM" rel="lightbox[social]" title="megavideo.com">Megavideo »</a>

 

MetaCafe »

 

<a href="http://www.metacafe.com/watch/2185365/spot_electrabel_gdf_suez_happy_new_year_2009/" rel="lightbox[social 400 350]" title="www.metacafe.com">MetaCafe »</a>

 

 

Quietube + Youtube »

 

<a href="http://quietube.com/v.php/http://www.youtube.com/watch?v=b5Ff2X_3P_4" rel="lightbox[social 480 392]" title="youtube via quietube.com">Quietube + Youtube »</a>

 

 

Quietube + Vimeo »

 

<a href="http://quietube.com/v.php/http://vimeo.com/2295261" rel="lightbox[social 480 392]" title="quietube.com">Quietube + Vimeo »</a>

 

 

Revver »

 

<a href="http://www.revver.com/video/758469/see-whats-possible-challenge/" rel="lightbox[social 480 392]" title="www.revver.com">Revver »</a>

 

 

RuTube »

 

<a href="http://rutube.ru/tracks/732179.html?v=31d844c852720c85a74d55474dd3f65a" rel="lightbox[social]" title="www.RuTube.ru">RuTube »</a>

 

 

Seesmic »

 

<a href="http://seesmic.com/app?#/video/GtXGiBXzWb/watch" rel="lightbox[social 425 353]" title="www.seesmic.com">Seesmic »</a>

 

 

YouKu »

 

<a href="http://v.youku.com/v_show/id_XNDI1MDkyMDQ" rel="lightbox[social 480 400]" title="www.youku.com">YouKu »</a>

 

YouTube »

 

<a href="http://www.youtube.com/watch?v=MrqcK5arPPk" rel="lightbox[social]" title="www.youtube.com">YouTube »</a>

 

YouTube Playlist »

 

<a href="http://www.youtube.com/view_play_list?p=63F0C78739B09958" rel="lightbox[social]" title="www.youtube.com playlist::hover over the window to see everything in the play queue">YouTube Playlist »</a>

 

YouTube HQ »

 

<a href="http://www.youtube.com/watch?v= 2_HXUhShhmY" rel="lightbox[social 640 385]" title="www.youtube.com">YouTube HQ »</a>

 

YouTube HD »

 

<a href="http://www.youtube.com/watch?v=L5Nu8bo2d-o&fmt=22" rel="lightbox[social 960 565]" title="www.youtube.com">YouTube HD »</a>

 

Veoh »

 

<a href="http://www.veoh.com/browse/videos/category/scifi_and_fantasy/watch/v20072707NWacjBq6" rel="lightbox[social 540 438]" title="www.veoh.com">Veoh »</a>

 

Viddyou »

 

<a href="http://www.viddyou.com/viddstream?videoid=49456" rel="lightbox[social]" title="viddyou.com">Viddyou »</a>

 

Vimeo »

 

<a href="http://vimeo.com/877053" rel="lightbox[social]" title="vimeo.com">Vimeo »</a>

 

12seconds.tv »

 

<a href="http://12seconds.tv/channel/Iaian7/81432" rel="lightbox[social]" title="12seconds.tv">12seconds.tv »</a>

 

Blip.tv »

 

<a href="http://blip.tv/play/Ae2bN420ZA" rel="lightbox[social 640 390]" title="blip.tv::John Einselen - 2008 demo reel preview">Blip.tv »</a>

 

Break.com »

 

<a href="http://www.break.com/usercontent/2009/4/The-Wonderful-World-of-Reals-703500.html" rel="lightbox[social]" title="break.com">Break.com »</a>

 

DailyMotion »

 

<a href="http://www.dailymotion.com/swf/1zR7vSr9sneRWgUqL" rel="lightbox[social 640 486]" title="www.dailymotion.com">DailyMotion »</a>

 

vids.MySpace »

 

<a href="http://mediaservices.myspace.com/services/media/embed.aspx/m=100005440,t=1,mt=video" rel="lightbox[social set3 430 346]" title="vids.myspace.com">vids.MySpace »</a>

 

 

Ustream.tv »

 

<a href="http://www.ustream.tv/flash/live/534892" rel="lightbox[social 400 326]" title="Ustream.tv">Ustream.tv »</a>

 

Viddler »

 

<a href="http://www.viddler.com/player/d4cf1bc/" rel="lightbox[social 545 451]" title="www.viddler.com">Viddler »</a>

 

Média flash et vidéos

On peut inclure des fichiers flash et vidéo directement dans la lightbox.

SWF animation »

 

<a href="http://www.homestarrunner.com/sbemailtwohundred.swf" rel="lightbox[flash 550 410]" title="SWF animation::HomestarRunner.com flash animation">SWF animation »</a>

 

FLV video »

 

<a href="/media/mediabox/2007vfx.flv" rel="lightbox[flash 640 360]" title="FLV video::John Einselen - 2007 demo reel">FLV video »</a>

 

MP4 video »

 

<a href="/media/mediabox/2005vfx.mp4" rel="lightbox[flash 640 360]" title="MP4 video::John Einselen - 2005 demo reel">MP4 video »</a>

 

MP3 audio »

 

<a href="/media/mediabox/TheISS2.mp3" rel="lightbox[audio 50% 20]" title="MP3 audio::The ISS #2 - John Einselen">MP3 audio »</a>

 

Fichiers quicktime

On peut également inclure des fichiers quicktime (.mov, ,m4v, .m4a, et autres) .

MOV video »

 

<a href="http://symboleffects.com/media/2007vfx.mov" rel="lightbox[quicktime 640 360]" title="MOV video::2007 VFX reel - John Einselen">MOV video »</a>

 

Contenu externe

On peut afficher des pages html ou autres contenus externe dans la fenêtre de Mediabox_CK.

Google.com»

 

<a href="http://www.google.com" rel="lightbox[external 640 360]" title="Google.com">Google.com»</a>

 

movies.Yahoo.com»

 

<a href="http://movies.yahoo.com" rel="lightbox[external 640 50%]" title="movies.Yahoo.com">movies.Yahoo.com»</a>

 

Engadget.com»

 

<a href="http://www.engadget.com/" rel="lightbox[external 640 80%]" title="Engadget.com">Engadget.com»</a>

 

 

Vous pouvez retrouver ces exemples et des explications complémentaires sur le site du script original de mediaboxadvanced.

 

Privacy policy

Site made by Cédric KEIFLIN

Privacy policy - Licence GNU/GPL - General sales conditions

Copyright © 2010 - 2013

http://www.joomlack.fr is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla!® name and logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.