Agrandir et déplacer une photo d'un clic de souris dans une highslide

Le principe est voisin de la lightbox : les images s'agrandissent au clic de la souris ; mais, en plus, elles sont draguables (déplaçables) sur l'écran.

Un exemple :

Un manège

Un chateau

Cliquez sur les images et déplacez les à l'aide de la souris.

Pour les refermer, cliquez dessus à nouveau.

EXPLICATIONS SOMMAIRES

Les fichiers se trouvent sur mon administration OB et peuvent être utilisés par les blogs OverBlog. Si tel est le cas, il vous suffit de suivre ces explications sommaires pour appliquer la highslide.

Je vous donne l'explication pour une image. Si vous désirez en placer plusieurs, il suffira de créer un tableau et de recoller le premier pavé (en le personnalisant) pour chaque photo.

Vous collez en HTML:

<a onclick="return hs.expand(this)" class="highslide" href="http://idata.over-blog.com/0/37/17/67/photos/PHOTO003.JPG"><img title="Click to enlarge" alt="Highslide JS"
src="http://idata.over-blog.com/0/37/17/67/photos/photo003bis.jpg" /></a>
<div class="highslide-caption">Titre sous l'image</div>

Puis, vous personnalisez :

http://idata.over-blog.com/0/37/17/67/photos/PHOTO003.JPG : adresse de l'image en grande taille
http://idata.over-blog.com/0/37/17/67/photos/photo003bis.jpg : adresse de l'image en petite taille
Titre sous l'image : il apparaîtra sous la grande image

Toujours en HTML, vous rajoutez

<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/highslide/highslide.js"></script>
<script type="text/javascript">
hs.graphicsDir = 'http://ddata.over-blog.com/xxxyyy/0/37/17/67/highslide/graphics/';
</script>
<style type="text/css">
* {    font-family: Verdana, Helvetica;    font-size: 10pt;}
.highslide {     cursor: url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/highslide/graphics/
zoomin.cur), pointer;    outline: none;}
.highslide-active-anchor img {       visibility: hidden;}
.highslide img {        border: 2px solid gray;}
.highslide:hover img {        border: 2px solid white;}
.highslide-wrapper {        background: white;}
.highslide-image {        border: 10px solid white;}
.highslide-image-blur {}
.highslide-caption {    display: none;    border: 5px solid white;    border-top: none;    padding: 5px;  background-color: white;}
.highslide-loading {    display: block;        color: black;        font-size: 8pt;font-family: sans-serif;        font-weight: bold;    text-decoration: none;        padding: 2px;        border: 1px solid black;    background-color: white;    padding-left: 22px;    background-image: url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/highslide/graphics/ loader.white.gif);    background-repeat: no-repeat;    background-position: 3px 1px;}
a.highslide-credits,
a.highslide-credits i {    padding: 2px;    color: silver;    text-decoration: none;font-size: 10px;}
a.highslide-credits:hover,
a.highslide-credits:hover i {    color: white;    background-color: gray;}
a.highslide-full-expand {        background: url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/highslide/graphics/ fullexpand.gif) no-repeat;        display: block;        margin: 0 10px 10px 0;        width: 34px;        height: 34px;}
/* These must always be last */
.highslide-display-block {    display: block;}
.highslide-display-none {    display: none;}

EXPLICATIONS DETAILLEES

Les fichiers se trouvent dans mon administration OB et ne peuvent donc pas être utilisés sur un blog hors Over-Blog. Voici donc les explications détaillées.

Première étape :

Sur HIGHSLIDE, vous choisissez la version gratuite, non commerciale.

Vous uploadez le fichier ZIP en cliquant sur Download page



puis sur Download Now.

C'est un fichier .zip : un ensemble de fichiers. Pour l'ouvrir, j'utilise WinRAR.

Sur votre PC, vous avez donc



J'extrais le contenu du dossier highslide :



Deuxième étape :

ATTENTION : respectez bien les minuscules lorsque vous créez vos dossiers.

Dans mon administration Over-Blog :

• Dans Mes documents - Autres fichiers, je créé :
  
  
  • un dossier highslide
    
  • dans lequel je crée un dossier graphics et j'y uploade
    
    
    • les fichiers :
      
      
      • fullexpand.gif
        
      • loader.white.gif
        
      • zoomin.cur
        
      • zoomout.cur
        
  • dans ce dossier graphics, je créé un dossier outlines, dans lequel j'uploade tous les fichiers contenus dans le dossier outlines de mon PC
    

je note les adresses des images suivantes :

• http://ddata.over-blog.com/xxxyyy/0/37/17/67/highslide/graphics/fullexpand.gif
  
• http://ddata.over-blog.com/xxxyyy/0/37/17/67/highslide/graphics/loader.white.gif
  
• http://ddata.over-blog.com/xxxyyy/0/37/17/67/highslide/graphics/zoomin.cur
  
• http://ddata.over-blog.com/xxxyyy/0/37/17/67/highslide/graphics/zoomout.cur
  

Troisième étape :

Sur mon PC :

• J'ouvre le Bloc Notes,
  
• puis Fichier - Ouvrir - j'appelle le document highslide.js
  
• Il va falloir modifier le chemin vers des dossier et image qui sont maintenant dans votre administration d'Over-Blog. Vous les trouverez vers le début dans la partie juste en-dessous de
  

Your fair use and other rights are in no way affected by the above.
var hs = {
// Apply your own settings here, or override them in the html file.
graphicsDir : 'highslide/graphics/',
restoreCursor : 'zoomout.cur', // necessary for preload


Je modifie le chemin suivant vers mon dossier graphics :
graphicsDir : 'highslide/graphics/'
que je remplace par
graphicsDir : 'http://ddata.over-blog.com/xxxyyy/0/37/17/67/highslide/graphics/'

• Je modifie le chemin vers mon fichier zoomout.cur
  

restoreCursor : 'zoomout.cur', que je remplace par
restoreCursor : 'http://ddata.over-blog.com/xxxyyy/0/37/17/67/Highslide/graphics/zoomout.cur',

• Vous enregistrez le fichier highslide.js sous le même nom.
  
• Vous l'uploadez dans vos Documents - highslide
  
• Vous obtenez une adresse sur ce modèle : http://ddata.over-blog.com/xxxyyy/0/37/17/67/highslide/highslide.js
  

Quatrième étape :

Je vous donne l'explication pour une image. Si vous désirez en placer plusieurs, il suffira de créer un tableau et de recoller le premier pavé pour chaque photo.

Vous collez dans l'HTML :

<a onclick="return hs.expand(this)" class="highslide" href="http://idata.over-blog.com/0/37/17/67/photos/PHOTO003.JPG"><img title="Click to enlarge" alt="Highslide JS"
src="http://idata.over-blog.com/0/37/17/67/photos/photo003bis.jpg" /></a>
<div class="highslide-caption">Titre sous l'image</div>

Personnalisation :

http://idata.over-blog.com/0/37/17/67/photos/PHOTO003.JPG : adresse de l'image en grande taille
http://idata.over-blog.com/0/37/17/67/photos/photo003bis.jpg : adresse de l'image en petite taille
Titre sous l'image : il apparaîtra sous la grande image

Toujours en HTML, vous rajoutez

<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/highslide/highslide.js"></script>

Personnalisation

http://ddata.over-blog.com/xxxyyy/0/37/17/67/highslide/highslide.js : adresse de votre fichier highslide.js

Toujours en HTML, à la suite, vous rajoutez

<script type="text/javascript">
    hs.graphicsDir = 'http://ddata.over-blog.com/xxxyyy/0/37/17/67/highslide/graphics/';
</script>
<style type="text/css">
* {    font-family: Verdana, Helvetica;    font-size: 10pt;}
.highslide {        cursor: url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/highslide/graphics/
zoomin.cur), pointer;    outline: none;}
.highslide-active-anchor img {        visibility: hidden;}
.highslide img {        border: 2px solid gray;}
.highslide:hover img {        border: 2px solid white;}
.highslide-wrapper {        background: white;}
.highslide-image {        border: 10px solid white;}
.highslide-image-blur {}
.highslide-caption {    display: none;    border: 5px solid white;    border-top: none;    padding: 5px;
background-color: white;}
.highslide-loading {    display: block;        color: black;        font-size: 8pt; font-family: sans-serif;        font-weight: bold;    text-decoration: none;        padding: 2px;        border: 1px solid black;    background-color: white;    padding-left: 22px;    background-image: url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/highslide/graphics/ loader.white.gif);    background-repeat: no-repeat;    background-position: 3px 1px;}
a.highslide-credits,a.highslide-credits i {    padding: 2px;    color: silver;
text-decoration: none;        font-size: 10px;}
a.highslide-credits:hover,a.highslide-credits:hover i {    color: white;    background-color: gray;}
a.highslide-full-expand {        background: url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/highslide/graphics/ fullexpand.gif) no-repeat;        display: block;        margin: 0 10px 10px 0;       width: 34px;        height: 34px;}
/* These must always be last */
.highslide-display-block {    display: block;}
.highslide-display-none {    display: none;}

Vous personnalisez toutes les adresses en rouge des images. Elles se trouvent dans votre dossier graphics.

Il est ensuite possible d'aller plus loin en personnalisant les fonds, bordures...

Si vous testez, pensez à me dire si l'explication est claire. Ce tuto n'a pas été facile à réaliser :)