Un look terrible, une stabilité déconcertante, une compatibilité rare, bref, ne cherchez plus, c'est LE script Ajax pour la visualisation d'images sans rechargement.
Le site iklaxmedia.com utilisait déjà l'excellent script Lightbox pour nos images, mais nous avions des difficultés pour passer à d'autres médias genre video YouTube.
Nous avons testé les tout aussi bons scripts répertoriés sur ce post mais nous avons relevé, en tout cas sur notre site, un conflit entre le script prototype.js utilisait par Lightbox 2 et videobox.js utilisé par Mediabox.
En gros, impossible d'utiliser en même temps Lightbox 2 et un autre script.
En cherchant un peu, nous avons trouvé multiBox, utilisant mootools 1.1.
énorme effet mais un léger souci : la compatibilité IE6 et IE7, annoncée mais difficile à mettre en place.
Reparti dans nos recherches, nous avons finalement trouvé multiBox 2 pour MooTools 1.2. Et là, c'est la classe à l'état pur !
Pour le site officiel, la démo, le download et l'installation, ça se passe ici.
!! Astuce !! MISE A JOUR
Comment afficher une vidéo YouTube ou Dailymotion dans multiBox?
J'ai fait un petit truc, qui peut sans doute être amélioré mais qui a le mérite de marcher. A faire, une fois que vous avez installé multiBox 2, ça facilite la compréhension de ce qui suit.
1. Créez un fichier flash.php contenant le code suivant :
[code]
<?php
// Récupération de l'url
$media = htmlentities($_POST['media']);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<object width="425" height="344"><param name="movie" value="<?php echo $media; ?>"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="<?php echo $media; ?>" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>
<p><?php echo $media; ?></p>
</body>
</html>
[/code]2. Enregistrez-là ainsi.
3. Dans la page où vous afficher le lien vers la vidéo, dans la partie <a href="...>ma video</a>, inscrivez:
[code]
<form action="flash.php" method="post" id="form">
<input type="hidden" name="media" value="http://www.youtube.com/v/2M3btM1XIe8" />
<a href="javascript:void(document.getElementById('form').submit());">Ma vidéo</a>
</form>
<div class="multiBoxDesc mb1">Ceci est une description <a href="#">test</a></div>[/code]
Par exemple, vous voulez afficher cette vidéo :
Avec ça, votre site va en jeter grave !
