Privilège - Agrandir des images d'un seul clic et les déplacer sur l'écran - Highslide

Le principe est voisin de la lightbox, les images s'agrandissent au clic de la souris et 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

EXPLICATIONS SOMMAIRES

Les fichiers se trouvent sur mon administration et peuvent être utilisés par les blogs OverBlog. Si tel est le cas, il vous suffit de suivre ces explications 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 allez dans Publier - Articles et dans le mode source de l'éditeur d'article, vous collez

<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 mode source, vous rajoutez

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

Toujours en mode source, à 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;}

EXPLICATIONS DETAILLEES

Les fichiers se trouvent dans mon administration 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 allez dans Publier - Articles et dans le mode source de l'éditeur d'article, vous collez

<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 mode source, 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 mode source, à 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 :)