Pour accéder plus rapidement au sommaire correspondant à cet article, cliquez sur le lien :

Publié dans : Effets d'Images et diaporamas - Tous blogs

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

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 :

Highslide JS
Un manège
Highslide JS
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 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/HTML 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/HTML, 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/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;}

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
undefined

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/HTML 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/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 mode source/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 :)


MàJ : Janvier 2009
Voir les 12 commentaires - Ecrire un commentaire
Recommander
Retour à l'accueil

 

Présentation

: Les ficelles d Anna K.
: 26/06/2006
annak : Aide et astuces pour créer et personnaliser un blog. Toutes les étapes pour créer un blog sur Over-Blog : les premiers pas, la gestion quotidienne (écrire des articles, placer des photos...), les modifications de CSS (changer les fonds, les couleurs de police...), des idées de design...et le personnaliser quelle que soit la plateforme : mettre en valeur les images et les textes, créer des menus, installer de la musique, des gadgets, des compteurs, des astuces de référencement...

 

Recherche Rapide Sur le Site

 

Sommaires

Sommaires Pour les Blogs OverBlog Sommaires Pour tous les Blogs Détente

 

Dernières Astuces

liste complète

 

Commentaires

 

 
Contact - C.G.U. - Rémunération en droits d'auteur - Signaler un abus - Articles les plus commentés