logo maximenuck 64Maximenu CK

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

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, lightbox pour joomla

Mediabox CK est une lightbox Joomla! mutlimédia qui peut afficher vos images, vidéos, animations flash, vos médias depuis Facebook, Twitter, Youtube, Daylymotion ou n'importe quelle page dans une fenêtre responsive. vous pouvez y ajouter un titre, une desciption et les grouper dans des albums.

 

 

Fonctionnalités

Mediabox CK est une Lightbox responsive qui peut afficher n'importe quel média comme vos images, vos vidéos ou des médias sociaux comme youtube et autres, mais aussi n'importe quel contenu HMTL à partir de son url.

  • Affiche n'importe quel média : images, vidéos, html
  • Comportement responsif : redimensionne le média en fonction de la taille de l'écran
  • Affichage responsif : affiche le média en plein écran avec de gros boutons pour utilisation tactile
  • Conçu pour les appareils tactiles : glissez vers la gauche ou vers la droite pour naviguer, tapez sur l'image pour zommer, et déplacez l'image zoomée avec vos doigts
  • Groupez vos médias dans des albums pour naviguer entre eux
  • Utilisation facilitée grâce au bouton dans l'éditeur (version Pro)
  • Chargement automatique des images depuis un dossier (version Pro)
  • Utilisation de tags n'importe où dans votre site pour générer un lien (version Pro)
  • Peut remplacer n'importe quelle Lightbox : sélectionnez le sélecteur dans les options du plugin

 

Démo de Mediabox CK

 

Simple lien avec texte

Click the text to show the image

 

Image avec titre (possibilité d'ajouter du code html dans le titre)

major-league-android

 

Gallerie d'images

responsive multimedia lightbox responsive multimedia lightbox responsive multimedia lightbox

 

Vidéos

YouTube »

Vimeo »

DailyMotion »

 

Comment utiliser Mediabox CK

1/ Dans le code HTML - Méthode de base

Mediabox CK recherche tous les liens qui ont l'attribut rel="lightbox" (vous pouvez changer l'attribut dans les options du plugin). Pour activer la Mediabox sur votre lien vous devez lui ajouter l'attribut de la manière suivante :

<a href="/mypage.html" rel="lightbox">Link title</a>

Le href peut être un lien vers une page, vers une image, une vidéos ou autre.

Grouper les medias dans un album

Pour créer un album vous devez ajouter un paramètre à l'attribut du lien. Exemple : rel="lightbox[nomdalbum]"

<a href="/mypage.html" rel="lightbox[myalbum]">Link title</a>

Donner des dimensions spécifiques au média

Vous pouvez donner des dimensions spécifique à chaque média, ces dimensions seront prises en compte et remplaceront les valeurs par défaut définies dans les options du plugin. Pour cela il faut ajouter des paramètres à l'attribut du lien. Exemple : rel="lightbox[width height]"

<a href="/mypage.html" rel="lightbox[640 480]">Link title</a>

Et en combinant un album et des dimensions :

<a href="/mypage.html" rel="lightbox[myalbum 640 480]">Link title</a>

 

2/ En utilisant le bout 'ajouter un lien' de l'éditeur

Vous avez surement un bouton "Ajouter un lien" dans votre éditeur, vous pouvez l'utliser pour créer le lien vers la Lightbox.

apercu bouton link editor

Ici vous pouvez définir le texte du lien, sa cible (url) et l'attribut "Rel" sur "Lightbox". Ensuite si vous voulez définir un album ou des dimensions spécifiques, vous devez utiliser la méthode HTML ou le bouton d'éditeur de la version Pro.

 

3/ En utilisant le bouton d'éditeur Mediabox CK (Pro version)

La version Pro de Mediabox CK intègre un bouton spécifique qui s'ajoute à votre éditeur (fonctionne avec l'éditeur tinyMCE). Pour l'utiliser vous devez penser à publier le plugin bouton de Mediabox CK.

Une fois le plugin installé et publié vous devez voir le bouton en bas de votre éditeur :

apercu bouton mediaboxbutton

Cliquez sur le bouton pour faire apparaitre l'interface spécifique à Mediabox CK. Vous pouvez alors créer un lien vers la lightbox sans connaissnce technique ni besoin de code en HTML, de manière simple et rapide. L'interface vous permet de

  • Définir un texte à afficher comme lien
  • Définir un titre et une description à afficher dans la Mediabox
  • Selectionner une image depuis le gestionnaire de médias de Joomla!
  • Selectionner un répertoire dans une arborescence (liste les répertoires contenus dans le dossier 'images' de votre site)
  • Définir des dimensions spécifiques pour la Lightbox
  • Définir un album pour grouper avec d'autres médias dans la page
  • Choisir si vous voulez insérer un lien HTML ou un tag dans votre article

Aperçu de l'interface avec sélection d'image et prévisulisation directe à droite :

apercu fenetre mediaboxbutton

Aperçu avec sélection d'un repertoire depuis l'arborescence à droite :

apercu fenetre mediaboxbutton

 

Pour l'instant le bouton ne fonctionne qu'avec l'éditeur tinyMCE (éditeur par défaut dans Joomla!)

 

4/ Utilisation d'un tag Mediabox (version Pro)

Vous pouvez aussi utiliser des tags pour créer automatiquement vos liens. Cela est pratique si vous ne maitrisez pas le code HTML ou pour ajouter des liens là pù vous n'avez pas d'éditeur, n'importe où dans votre site.

Le Tag Mediabox est aussi la méthode utilisée pour pouvoir charger des images directement depuis un répertoire. De cette manière en cliquant sur le lien la Mediabox s'ouvre et affiche toutes les images du dossier dans un album de manière à pouvoir les faire défiler.

Le code à écrire ressemble à cela :

 mediatboxtag

Le tag peut prendre plusieurs paramètres séparés par une barre verticale "|".

Liste des parametères :

src= : source du média à afficher dans le popup, peut être le chemin vers une image, une vidéo ou une url

w= : largeur de la lightbox en px

h= : hauteur de lightbox en px

alb= : nom de l'album dans lequel grouper les médias pour pouvoir naviguer entre eux

t= : titre et description à afficher sous le média, il faut les séparer par un ::

dir= :chargement automatique des images d'un dossier. Vous pouvez naviguer entre les images avec les flèches. Si vous utilisez ce paramètre vous n'avez pas besoin du paramètre "src"

 

Options Mobile pour Mediabox CK

Mediabox CK a été conçue pour être une Lightbox responsive et compatible avec les appareils tactiles.

Editez les options du plugin pour définir la manière dont Mediabox détecter les appareils mobiles pour passer en mode responsive :

  • Detection basée sur la résolution : give the resolution in px under which the Lightbox will turn into the mobile layout
  • Detection basée sur la détection matérielle : téléphone et tablette, ou seulement téléphone

Vous pouvez aussi choisir de désactiver le responsive si vous n'en voulez pas.

 

Design responsive pour mobile

Lorsque la Mediabox détecte qu'elle se trouve sur un appareil mobile, elle change automatiquement d'allure pour laisser l'image s'afficher en plein écran avec des boutons de contrôle plus gros pour permettre une utilisation tactile.

Aperçu de la Mediabox en mode bureau/ordinateur

apercu desktop3

Aperçu de la Mediabox en mode mobile

apercu mobile touch tap

 

Comportement tactile pour les téléphones et tablettes

Lorsque vous utilisez Mediabox CK sur un appareil tactile, vous pouvez utiliser vos doigts pour naviguer entre les images et contrôler les actions.

  • Glissez vers la gauche ou la droite pour passer d'une image à l'autre (en mode album)
  • Touchez / tapez pour l'image pour zoomer et dézoomer
  • Une fois l'image zoomée, utilisez vos doigts pour déplacer la zone visible

 

Glissez vers la gauche ou la droite pour passer d'une image à l'autre

apercu mobile touch swipe

Touchez / tapez pour l'image pour zoomer et dézoomer

apercu mobile touch zoom

Une fois l'image zoomée, utilisez vos doigts pour déplacer la zone visible

apercu mobile touch pan

 

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

Télécharger le plugin Mediabox CK Pro pour Joomla 3.x9 €

Votez sur la JED pour soutenir Mediabox CK

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.