logo maximenuck 64Maximenu CK

Maximenu CK permet de créer un megamenu déroulant mootools.

logo slideshowck joomlaSlideshow CK

Slideshow CK, de superbes effets avec ce slideshow responsive design.

logo accordeonmenuck joomlaAccordeon Menu CK

Accordeon menu CK est un menu accordeon avec des effets mootools.

logo template creator joomlaTemplate Creator CK

Template Creator CK vous permet de créer vos propres templates Joomla!.

Mediabox CK - Une lightbox multimédia

Mediabox, lightbox pour joomla

Mediabox CK est un plugin Joomla permet d'afficher des images, des vidéos, des animations flash, des médias de Facebook, Twitter, Youtube, Daylymotion ou des pages PHP dans une fenêtre  lightbox. On peut y ajouter des titres et descriptions et créer des galeries d'images. Le script est basé sur mediaboxadvanced de John Einselen .

 

Utilisation de Mediabox CK

Pour créer un popup sur un texte ou une image, il faut lui ajouter un lien en cliquant sur 'Ajouter un lien' dans votre éditeur. Dans l'onglet  'Avancé', renseigner la ligne 'Relation Contenu - Cible', et mettre la valeur '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> .

Tutoriel vidéo de démonstration (avec l'éditeur JCE) :

 

 

Options du plugin Mediabox CK

capture_mediabox_params_fr

Télécharger le plugin Mediabox CK pour Joomla 3.x

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

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

Télécharger la Documentation Mediabox CK

Votez sur la JED pour soutenir 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}

{mediabox dir=images/sample|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 ::

dir= : charge automatiquement les images d'un dossier dans un album, vous pouvez naviguer entre les images dans la lightbox. Si vous utilisez cette option vous n'avez pas besoin du paramètre "src="/

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 3.x

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.

 

Mentions légales

Site réalisé par Cédric KEIFLIN - Copyright © 2010 - 2013

Mentions légales - Licence GNU/GPL - Conditions générales de vente

http://www.joomlack.fr n'est ni affilié à Open Source Matters ou au projet Joomla ni approuvé par eux.
Le nom Joomla!® est utilisé sous license limitée de Open Source Matters, le propriétaire mondial de la marque de commerce.