Tutorial

Utiliser Highslide sur son blog

highslide-titre.jpg

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.

  • Le site est beau et raffiné et des leçons importantes, j’espère que vous me permettez de transférer certains de ses articles sur le site sur ce lien

    http://www.malak-rouhi.com/vb

  • @aminamin : Merci pour ton message. En ce qui concerne le contenu, tu peux faire ce que tu veux à condition de citer la source (url) (conditions de la licence creative commons qui est utilisée ici).

  • Le site est beau et raffiné et des leçons importantes, j’espère que vous me permettez de transférer certains de ses articles sur le site sur ce lien 😀 http://www.2sw2r.com/vb/

  • waleed

    Le site est beau et raffiné et des leçons importantes, j’espère que vous me permettez de transférer certains de ses articles sur le site sur ce lien

    http://www.herealmukalla.com/vb

  • Excellent sujet, merci pour ces infos. longue vie à ce blog!

  • Pepper

    merci, mais comment je fait via blogspot?

Epingler sur Pinterest

Partager