Super effet highslide

vibes · 15 Octobre 2008

Bonjour,

J'aimerais comprendre comment incérer l effet highslide dans mes pages..
http://highslide.com/
Pour ma part, j' utilise dreamweaver pour construire mes sites.
J'ai très peux de notions dans la partie codage d' un site !

A pparament, il faut mettre le dossier highslide dans la racine du site, mais après, je voit pas comment incérer le code dans mes pages ?

Pour exemple...

<body>
<img src="file:///Macintosh HD/Users/zzzzzz/Desktop/home-page-bellerive/test-logo.jpg" width="233" height="163" />
</body>
</html>

Comment faut il appliquer l' effet à cette image ? il faut simplement mettre du code à l' image ?
Bref je comprend pas bien les bases !
Alors si quelqu'un peut m'expliquer la marche à suivre ?

Merci pour le coup de main..
pat

SuperCureuil · 16 Octobre 2008

Bonsoir vibes,

Qui a dit boulet ? :mrgreen:

1. Tu télécharges le script.
2. Tu décompresses à la racine ou ailleurs.
3. Dans la page où tu veux faire apparaître le highslide (<head></head>) : un lien vers la CSS, un lien vers le script js, l'initialisation de la fermeture du script avec le chemin vers le répertoire /graphics.

Code:

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


	<script type="text/javascript" src="js/highslide.js"></script>
		<!--
		    2) Optionally override the settings defined at the top
		    of the highslide.js file. The parameter hs.graphicsDir is important!
		-->

	<script type="text/javascript">
	// remove the registerOverlay call to disable the close button
	hs.registerOverlay({
		overlayId: 'closebutton',
		position: 'top right',
		fade: 2 // fading the semi-transparent overlay looks bad in IE
	});

	hs.graphicsDir = 'js/graphics/';
	</script>

4. Pour appeler l'effet :

Code:

<a href="chemin-de-ma-photo-taille réelle.jpg" class="highslide" onclick="return hs.expand(this)">
	<img class="imgPrise" src="chemin-de-ma-photo-taille-mini.jpg" alt="" />
</a>

<div class="highslide-caption">Un commentaire pour la photo</div>

<!-- 5 (optional). This is the markup for the close button. The button is tied to the expander in the script tag at the top of the file.-->
<div id="closebutton" class="highslide-overlay closebutton" onclick="return hs.close(this)" title="Close"></div>

Tout ça est noté sur le site de l'auteur, et tu peux t'en rendre compte par toi-même en regardant le code source des exemples de l'archive. :wink:

Bon amusement !

Supercureuil

anemone-clown · 16 Octobre 2008

vibes a dit:

Hello,

déjà, il faut indiquer un lien URL valide sur Internet et non sur le disque dur de ton Mac... Je ne suis pas persuadé que Internet sache accéder à ton disque dur. Avec un lien sur Internet, cela devrait faciliter le fonctionnement.