Home > Developpement Web > Swipebox – Lightbox tournée mobile

Swipebox – Lightbox tournée mobile

Si vous développez des applications ou des sites internet tournés mobile, vous vous êtes sûrement demandé quelle lightbox utiliser pour une utilisation naturelle sur mobile.

Swipebox est un plugin JQuery permettant de faire une lightbox fullscreen, idéale pour les mobiles puisque ce plugin gère de nombreuses caractéristiques du tactile :

En effet ce plugin permet :

  • Une gestion au clavier
  • Compatibilité avec le « swipe » tactile
  • Transition CSS (JQuery si les transitions ne sont pas supportés)
  • Compatibilité écran rétina
  • CSS modifiable simplement
  • Compatibilité avec une grande majorité de navigateurs (Firefox, IE8+, Chrome, Safari, Android, iOS4+, Windows Phone)

Ce plugin est disponible en téléchargement sur le site internet officiel

Swipebox-example

 La mise en place est très simple :

Inclure les scripts JavaScript dans le Head :

<script src="lib/jquery-1.9.0.min.js"></script>
<script src="source/jquery.swipebox.min.js"></script>

Inclure le fichier CSS :

<link rel="stylesheet" href="source/swipebox.css">

Le code HTML est simple :

<a href="big/image.jpg" class="swipebox" title="My Caption">
        <img src="small/image.jpg" alt="image">
</a>

Puis lancez le script :

<script type="text/javascript">
jQuery(function($) {
        $(".swipebox").swipebox({
                useCSS : true, // false will force the use of jQuery for animations
                hideBarsDelay : 3000 // 0 to always show caption and action bar
        });
});
</script>

Voila, quoi de plus simple ?

Une démo est disponible pour les plus curieux, n’hésitez pas a l’essayer sur votre mobile ou votre tablette !

 

Mots clefs menant à cette page :

About Thomas Ferney

Thomas Ferney
Etudiant en 5eme année d'informatique, Co-créateur d'horizonduweb, Auto entrepreneur passionné par le Web et les nouvelles technologies.

Voir aussi

Hack, le nouveau PHP par Facebook

Facebook a annoncé sur son blog développeurs la sortie de Hack : un nouveau langage ...

One comment

  1. tu as oublié la class : class= »swipebox » dans le lien ^^

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Afin de vous remercier, Horizon Du Web utilise KewordLuv. Entrez votre_Nom@vos Mots Clefs dans le champ "Nom" pour bénéficier de cette option. Les commentaires constructifs, utiles et de plus de 400 caractères seront mis en dofollow.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Lire les articles précédents :
Usages et pratiques du réseau social Twitter en France

Une enquête à été faite par le Pôle AURA MUNDI et de l’IPSOS/CGI et dévoile ...

Fermer