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.

 

 

Responsive et tactile

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
• Option pour Diaporama : regardez les photos d'un album défiler automatiquement avec une durée personnalisable
• Compatible avec les images de Google+

 

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)

 

Gallerie d'images - Avec du code HTML

Gallerie d'images - Génération automatique (version Pro)

 

Images gallery - Using the automatic gallery (Pro version) and the Image Effect (see the plugin Image Effect CK)

Cette démo utilise un fichier labels.txt dans le dossier des images pour définir les titres et description. Et cette démo est multilangue ! Les textes sont en français tandis que la démo en anglais qui utilise les mêmes images du même dossier, est en anglais.

 

Vidéos

YouTube »

Vimeo »

DailyMotion »

 

Vous pouvez aussi lire les vidéos hébergées sur votre propre serveur en utilisant les formats MP4, WEBM et OGV. Tous les fichiers doivent avec le même nom pour chaque format pour être compatible avec la plupart des systèmes. Vous pouvez également ajouter une image JPG qui s'affichera si aucune vidéo ne peut être lue. Exemple de fichiers à mettre dans le dossier :

myvideofile.mp4
myvideofile.ogv
myvideofile.webm
myvideofile.jpg

Audio

Vous pouvez aussi lire les fichiers audios hébergés sur votre propre serveur en utilisant les formats MP3, OGG and AAC.

 

Docs JoomlaCK : Apprenez comment utiliser le fichier labels.txt pour vos images

 

Une lightbox faite pour mobiles - Utilisez vos images comme dans une application mobile

 

Créer une galerie d'images

Avec la version Pro de Mediabox CK vous pouvez charger automatiquement les images d'un dossier. Toutes les images seront automatiquement liées aux images originales qui s'ouvrent dans la fenêtre lightbox.

 

Personnalisez vos images directement depuis les options du plugin, sans besoin de coder.

 

En utilisant le tag :

En utilisant un lien :

<a rel="lightbox" data-dir="images/demo" data-gallery="1"></a>

 

 

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.

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 et JCE). 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 :

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 :

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

 

 

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 :

 

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

Aperçu de la Mediabox en mode mobile

 

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

 

 

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

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

Votez sur la JED pour soutenir Mediabox CK