Utiliser Highslide sur son blog

Pendant les travaux de rénovations du site, j’ai changé le javascript de visualisation des images dans les billets. Avant on utilisait Lightbox, mais j’ai changé par Highslide parce que… :-/ enfin juste pour changer et puis aussi parce que je l’ai trouvé assez sympa dans les possibilités offertes par son API. Et ça a justement été d’un grand secours pour mettre le système en place sans avoir à modifier le code source de Dotclear (ce que je veux éviter à tout prix pour avoir des mises à jour simples à mettre en place).

Le principe était donc le suivant : faire en sorte que le javascript de Highslide trouve et modifie à la volée tout les liens sur les images uniquement. Comme ça on a juste à intégrer un fichier .js dans son blog et hop ça marche !

Retrouvez les étapes de la mise en place dans la suite de l’article…

• Pour commencer, téléchargez le pack complet et décompressez le sur votre blog (là où vous jugerez qu’il soit bien)
• Pour utiliser uniquement les fonctionnalités dont on a besoin, on va reprendre une version personnalisée du .js. Sur cette page, cochez à droite : Graphic outlines, Custom overlays, Navigation, Dragging, Preload images, Autosize, Hide covered elements, Unobtrusive, Gallery, Slideshow, Advanced positioning, Transitions ; puis cochez Pack it! pour obtenir une version compressée, téléchargez le fichier et remplacer le sur votre serveur (là où vous avez mis la version de base)
• Dans la partie head de votre site, chargez le CSS d’highslide :

<link rel="stylesheet" type="text/css" media="screen" href="chemin_vers_highslide/highslide.css" />

• Insérez les lignes suivantes pour charger highslide (de préférence à la fin du code source pour ne pas perturber le chargement de votre site) :

<script type="text/javascript" src="chemin_vers_highslide/highslide.js"></script>

• Enfin ajoutez après le chargement du fichier js précédent (directement dans le code ou en chargeant un fichier .js à part) :

hs.graphicsDir = 'chemin_vers_highslide/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['fade'];
hs.outlineType = 'rounded-white';
hs.wrapperClassName = 'controls-in-heading';
hs.fadeInOut = true;
hs.showCredits = false;
hs.maxWidth = 1024;
hs.maxHeight = 1024;
hs.captionEval = 'this.thumb.title';
hs.headingText = 'Diaporama';
// Add the controlbar
if (hs.addSlideshow) {
	hs.addSlideshow({
		interval: 5000,
		repeat: false,
		useControls: true,
		fixedControls: false,
		overlayOptions: {
			opacity: 1,
			position: 'top right',
			hideOnMouseOut: false
		}
	});
}
hs.onSetClickEvent = function ( sender, e ) {
    // set the onclick for the element, output the group name to the caption for debugging
    e.element.onclick = function () {
		return hs.expand(this, {
			slideshowGroup: this.parentNode.className
		});
	}
	// return false to prevent the onclick being set once again
    return false;
};
hs.isUnobtrusiveAnchor = function(el) {
 	if (el.href && /(\.jpg|\.jpeg|\.gif|\.png|\.bmp)$/.test(el.href)) {
		el.className = 'highslide';
 		return 'image';
	}
};

Quelques trucs à savoir pour la personnalisation :

• Pour ajouter en effet, vous pouvez changer hs.transitions = ‘fade’; par hs.transitions = ‘expand’, ‘crossfade’;
• Vous pouvez ajouter un fond sombre à la fenêtre en ajoutant hs.dimminOpacity = 0.5; et en jouant sur la valeur
• La ligne hs.captionEval = ‘this.thumb.title’; permet de récupérer automatiquement le contenu de la balise title de l’image comme description (vous pouvez utiliser this.thumb.alt pour utiliser le contenu de la balise alt)
• La ligne hs.headingText = ‘Diaporama’; définit le titre en haut des images
• Pour changer d’autres styles, vous pouvez voir les exemples fournit avec le pack de base pour appliquer les valeurs qui vous semblent plus adaptées
• Le tutorial montre aussi quelques exemples d’intégration

PS : pour réduire la taille des fichiers javascript, n’hésitez pas à les compresser avec l’outil de minification disponible sur cette page.