Comment marche Highslide JS?

Me revoici,
J'ai testé, le problème est que dans la nouvelle version les fichiers .js ne portent pas tout à fait le même nom.
donc il faut changer le code qui se met dans head pour qu'il puisse trouver les bons fichiers.
Surtout fais bien attention en copiant collant le code de ne rien oublier, le moindre signe manquant ou déplacé empêche le fonctionnement, c'est ce qui a du se passer pour le problème que tu as sur l'image que tu nous montres au-dessus
Voici le bon code, supprime l'autre en entier et mets celui-ci à la place.

Code:

<script type="text/javascript" src="highslide/highslide.js"></script>
<script type="text/javascript" src="highslide/highslide-with-html.js"></script>
<script type="text/javascript">   
    hs.graphicsDir = 'highslide/graphics/';
    hs.outlineType = 'rounded-white';
    hs.outlineWhileAnimating = true;
    window.onload = function() {
        hs.preloadImages();
    }
</script>

Pour ton texte il faut mettre la balise br à chaque fois que tu veux aller à la ligne et pour sauter une ligne tu en mets 2 comme ceci

Code:

Resultats de la rencontre du 24 fevrier 2009 a Teoula :<br><br>
1er : Martin Martin<br>
2eme : Jean-Jean<br>

et surtout il va falloir que tu utilises les codes pour les accents c'est ici
Je les imprimés et collés devant moi pour ne pas les chercher à chaque fois.

Bonjour Babyl,
J'ai été dormir entre temps ...
voilà l'adresse du site que je prépare : http://seniorsteoula.abelcv.com/2/
La page d'accueil est actuellement une page "site en construction"; si tu veux aller plus loin, faut que tu cliques sur les fesses de la silhouette blanche en haut à gauche.
J'ai trouvé d'où vient le début de script qui s'inscrit en haut et à gauche de mon site... enfin le début est du moins identique au code que j'ai inséré pour highslide dans " Caribost 2/les propriétés du site Web/Avancée " ... mais par contre je ne sais pas pourquoi il vient se mettre là !
C'est dans la page "Eclectic" que j'ai inséré le code html pour highslide ... qui ne fonctionne toujours pas.
Merci de ton aide
PS : je suis obligé de partir dans une 1/2h et je ne rentrerais que tard ce soir
PS2 : Tu étais en train de me faire le dernier message pendant que j'écrivais celui-ci. J'en ai pris connaissance mais je ne vais pas avoir le temps de faire la manip, je dois absolument partir dans 20mn maintenant. je la ferais ce soir tard et te tiens informée. Encore merci !!!

Peut-être que nos messages ce sont croisés, as-tu vu le dernier juste au-dessus je pense que tu as la réponse.
je vais voir ta page et je te dis ça

-1- Après avoir fait les corrections indiquées plus haut
On passe à 2
-2- Je pense que ton dossier "highslide" ne se trouve pas où il faut, ton site avec la page se trouve dans le dossier 2 pour que ça fonctionne, il faut que tu envoies le dossier Highslide avec tous ce qu'il contient dans le dossier 2.

Pour l'erreur c'est bien le premier signe < qu'il manque tout au début du code dans head, une erreur en saisissant le code, ça arrive.

EXCELLENT !!! ça marche !!! Merci beaucoup Babyl. J'avais effectivement mis le code dans la racine ... mais du domaine alors que là je suis en sous-domaine. Quand à l'autre code, je ne sais pas ce que tu as changé, mais ça fonctionne.

Je vais m'attaquer maintenant, enfin demain, à la même chose avec une photo. Je vais essayer de suivre le tuto de Pierre mais déjà 2 questions : Dois-je remettre les codes qu'il faut pour l'un uploader à la racine du site, pour l'autre copier dans l'avancée des propriétés du site? (je n'ai pas regardé si c'était le même à chaque fois... désolé ).
Enfin, si j'ai un problème, je me permettrais de venir vous revoir au même endroit ... mais je vais essayer de ne pas abuser.
Encore merci et à +

Pour le changement dans le code c'est juste le fichier highslide_html. js qui est devenu highslide_with_html. js dans le dernière version.
Pour les photos je regarde, si il ya des changements de fichiers et je reviens te dire.

Bon voilà
C'est pas simple tout ça
Après avoir étudié les tutos de Pierre et fait des essais, pour les photos, il te faut ajouter dans head en dessous de ce que tu as déjà mis, ce code

Code:

<script type="text/javascript">   
hs.registerOverlay(
    {
    thumbnailId: null,
    overlayId: 'controlbar',
    position: 'top right',
    hideOnMouseOut: true
}
);

    hs.graphicsDir = 'highslide/graphics/';
    hs.outlineType = 'rounded-white';
    window.onload = function() {
        hs.preloadImages(5);
    }
</script>



et ensuite pour le css que tu as mis quelque part dans la page, tu supprimes tout le contenu et tu mets ça à la place ( n'oublie rien, il est long)

Code:

<style type="text/css">


.highslide-html {

background-color: white;              // couleur de fond de la slide ouverte

}

.highslide-html-blur {

}

.highslide-html-content {

position: absolute;

 display: none;

}

.highslide-display-block {

display: block;

}

.highslide-display-none {

display: none;

}

.control {

float: right;

display: block;

 /*position: relative;*/

margin: 0 5px;

font-size: 9pt;                    // taille de boutons "Deplacer" et "Fermer"

font-weight: bold;                // style des boutons "Deplacer" et "Fermer"

text-decoration: none;        // soulignement des boutons "Deplacer" et "Fermer"

text-transform: uppercase;

color: #999;                      // couleur des boutons"Deplacer" et "Fermer"

}

.control:hover {

color: black !important;

}

.highslide-move {

cursor: move;

}

.highslide img {

border: 2px solid gray;

}

.highslide:hover img {

border: 2px solid white;

}



.highslide-image {

border: 2px solid white;

}

.highslide-image-blur {

}

.highslide-caption {

display: none;

border: 2px solid white;

border-top: none;

font-family: Verdana, Helvetica;

font-size: 10pt;

padding: 5px;

background-color: white;

}

.highslide-loading {

display: block;

color: white;

font-size: 9px;

font-weight: bold;

text-transform: uppercase;

text-decoration: none;

padding: 3px;

border-top: 1px solid white;

border-bottom: 1px solid white;

background-color: black;

    /*

    padding-left: 22px;

    background-image: url(highslide/graphics/loader.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;

}


.highslide-overlay {

display: none;

}

/* Controlbar example */

.controlbar {

background: url(highslide/graphics/controlbar4.gif);

width: 167px;

height: 34px;

}

.controlbar a {

display: block;

float: left;

margin: 0px 0 0 4px;

height: 29px;

width: 34px;

}

</style>



et ensuite pour les images tu copies ce code et tu le places là ou tu auras tes vignettes

Code:

<center>
<br><br>
<a id="thumb1" href="image/im01.jpg" class="highslide" onclick="return hs.expand(this, { captionId: 'caption1' } )">
<img src="image/v01.jpg" alt="" title="Cliquez pour agrandir" height="90" width="120" /></a>
<div class='highslide-caption' id='caption1'>Légende de la photo 1</div>

<a id="thumb2" href="image/im02.jpg" class="highslide" onclick="return hs.expand(this, { captionId: 'caption2' } )">
<img src="image/v02.jpg" alt="" title="Cliquez pour agrandir" height="90" width="120" /></a>
<div class='highslide-caption' id='caption2'>Légende de la photo 2</div>

<a id="thumb3" href="image/im03.jpg" class="highslide" onclick="return hs.expand(this, { captionId: 'caption3' } )">
<img src="image/v03.jpg" alt="" title="Cliquez pour agrandir" height="90" width="120" /></a>
<div class='highslide-caption' id='caption3'>Légende de la photo 3</div>

<!-- et ainsi de suite pour l'ensemble des photos a inclure dans la zone -->

</center>

<div id="controlbar" class="highslide-overlay controlbar">
<a href="#" onclick="return hs.previous(this)" title="Précedent (fleche gauche)"></a>
<a href="#" onclick="return hs.next(this)" title="Suivant (fleche droite)"></a>
<a href="#" class="highslide-move" title="Cliquez et déplacez" style="margin-left: 10px"></a>
<a href="#" onclick="return hs.close(this)" title="Fermer"></a>
</div>

Fais bien attention en sélectionnant de ne rien oublier du début à la fin.
Pour le dernier code, il faut que tu ailles voir sur le site de Pierre, on voit très bien par couleur ce qu'il faudra modifier, ce code est fait pour 3 photos si tu en as plus, tu repèreras aussi très bien la partie à rajouter autant de fois que tu auras de photos
Et comme le dit pierre il faut avoir un minimum de connaissance en html pour l'utilisation car tu auras du mal si il y a des mises à jour, mais bon, je suis sûre que tu vas y arriver.

J'ai testé, tout fonctionne

Ps : J'oubliai, n'oublie pas de faire un dossier appelé "image" que tu mettra dans le dossier "2" et mettre toutes tes photos et vignettes dedans.
Tu n'auras rien de plus à rajouter

Bonsoir Babyl,

Ben com'tu dis, c'est pas simple tout ça !
Bon, je m'y attèle en essayant de comprendre un petit peu et je reviens te dire.
Merci beaucoup

OUF ! ça y'est, j'y suis arrivé ! Pas sans mal tu t'en doutes ... J'avais en fait un gros pb car les photos apparaissaient mais ne s'agrandissaient pas ; en fait après bien des recherches, je me suis aperçu que, dans le code, tu avais nommé les grandes photos im01.jpg alors que moi je les avaient nommé 01.jpg.
Par contre, si tu vas voir sur mon site (page "journée dames"), tu verras que quand on ouvre la page, les 3 photos ont chacune leur nom dessous , mais après les avoir agrandies, le nom a disparu et les photos se sont collée entre elles. ???
Quand elles sont en grand, il n'y a pas non plus comme dans celles de Pierre les signes en haut et à gauche. Encore que ça , ça ne me gêne pas trop d'autant qu'il y a la bulle qui dit de cliquer pour agrandir, mais par contre quand la photo est grande, la bulle est écrite en anglais avec une longue phrase (on comprend, mais ce serait mieux en français).
Pourtant j'ai comparer mon code source avec celui de Pierre et à par d'avoir mis les mots en français je n'ai rien vu de différent ...???
Tu sauras certainement trouver ... tu es trop forte ! (comme disent les djeuns !)
Si tu as, après tout celà encore un peu de temps à me consacrer et un peu de patience, pourras-tu, STP, m'indiquer comment mettre ces photos en horizontal ?
Merci pour tout.

Le problème est que tu n'as pas changé le code pour le css
tu remplaces celui qui est actuellement sur ta page par celui que je t'ai mis au dessus (le 2ème code dans le poste de 19h22 qui commence par "style type=texte/css") prends le bien en entier sans rien oublier

Il faudra aussi que tu modifies la taille des vignettes dans mon code elles font 120 sur 90 tu devras remplacer par les dimensions de tes vignettes

Bonjour,

Si, je l'ai changé; mais je l'ai laissé dans la page "eclectic". Est ce un problème ?
Je viens de vérifier encore une fois et je ne crois pas qu'il en manque une ligne !
J'avais aussi modifié la taille des vignettes, j'ai inversé les dimensions car mes photos sont en taille verticale.

Oui bien sûr il faut que tu le mettes sur la page où il y a les photos je parle du css et j'ai vu dans le code source qu'il y a sur ta page le premier css que tu avais mis sur electic il faut que tu le changes et mettes le dernier.

PS :

Le premier css sert que pour HS html
Celui qui est pour les photos dans le tuto de Pierre ne sert que pour les photos et celui que j'ai indiqué sert pour les pages ou il y a photos et html sur une même page
et le css correspondant doit être mis sur chaque page ou tu utilises Higslide

J'en profite pour te remercier Pierre si tu passes par là pour tes excellents tutos, je n'aurais jamais pu trouver le fonctionnement de Highslide sans ton travail.

Bon, j'ai peur de ne plus rien comprendre :
- Dois-je mettre un Css à chaque page où j'ai un effet highslide que ce soit photo, textes ou les deux ? (je viens de l'enlever de "eclectic" et tu peux voir ce que ça donne sur le site.
- ne l'ayant mis que dans la page "journée dames" ça ne change rien à la situation des photos...

Oui il faut mettre le css à chaque page, j'avais rajouté un PS à mon message juste au-dessus qui c'est croisé avec ta réponse.

Bon OK, j'ai mis TON Css à chaque page (Eclectic + journée Dames+ Match-Play):
- dans la page "eclectic" (pour l'instant rien que du texte), ça fonctionne bien
- dans la page "Match-Play" (rien que les photos) même problème que j'explique dans le message de ce matin à 0h22
- dans la page "journée dames" (texte + photos) le texte fonctionne bien mais même pb pour les photos.

Pour aligner tes photos, dans Cari il faut que tu étires la zone de code html des photos en largeur elle doit être aussi large que la place qu'occupera tes photos, ça règlera quelques problèmes mais pas tous je pense, on va continuer en mp.

Bonjour,

Après de nombreux messages en mp pour ne pas surcharger le sujet, pour ma part le problème est réglé. Grand, grand, grand merci à Babyl qui est un "soigneur" hors pair !!!

Bonjour maxcv

Un petit mot comme tu l'as fait pour remercier Babyl qui a passé un peu de temps pour t'aider c'est très sympa. Je ne doute pas qu'elle appréciera.
Il me semble que l'on peut considérer ton problème comme réglé dans ce cas il faut mettre le topic au statut de résolu.
C'est mieux pour la bonne organisation du forum.
Comment faire ?
C'est simple tu ouvres le premier post de ce topic comme c'est toi qu'il l'a initié (tu as le droit) tu fais édit, tu coches l'icone verte "Résolu", tu fais envoyer. C'est tout.

Cordialement.
Microbull.

Juste un petit mot pour préciser que le topic n'a pas été ouvert par maxcv mais par pol2krot.
@ +

Edit Microbull : autant pour moi je n'avais pas vu qu'il y avait 2 pages à ce topic.

@ Emilio

Il y a eu une discussion assez longue à ce sujet sur le forum.
ICI

Cordialement.
Microbull.

Pour ma part je tente je ne comprends pas du tout ce que je dois exactement faire dans le point
1.3 du tuto de Pierre

1.3 Contenu HTML à afficher
- Dans un éditeur de texte comme le Bloc-Notes de Windows, ou mieux,
Notepad2, préparer le contenu à afficher (texte simple, liens, images...), au
format HTML

à cette page http://pierre.marechal.free.fr/imagine/crbst_163.html
Si quelqu'un pouvait me dire ce que je dois écrire ça m'arrangerait et me dire aussi ce que je dois en faire ... Merciiii

Edit de Nounette
je trouve que la qualité de mes vignettes est vraiment très médiocre une fois uploader, comment remédier à ce petit soucis .... Voir ici Pourquoi je n'ai pas les flèches e navigation pour faire défiler mes photos ?

Si tu fais une image de ton calendrier c'est le tuto album en slide qu'il faudra suivre, même si tu n'as qu'une image à mettre.
Le tuto html en slide s'utilise si tu transformes avec exel ton tableau calendrier en html et c'est ce fichier html qui sera utilisé.
A mon avis ce sera plus simple avec l'image mais c'est comme tu veux, les 2 principes sont possibles

Autrement, quand tu auras téléchargé Higslide, dis-nous quelle version tu as choisis car il y en a plusieurs et certains fichiers ont changé de nom suivant les versions ce qui modifie un peu le tuto de Pierre ( je ne sais pas pour quelle version le tuto est fait).

Si je connais ta version téléchargée je pourrais te dire si il y a des modifs et lesquelles.

Une autre question, combien as-tu de calendriers à mettre un ou plusieurs ?

J'ai resolu le probléme pour le calendrier je vais procéder autrement à ce sujet
Par contre je souhaite faire un diapo dans ce genre http://destinationailleurs.free.fr/crbst_13.html mais je trouve la qualité des vignettes bien mauvaise ... et je n'ai pas les flèches de navigation pour faire défiler mes photos ?

La version de highslide est la 4.1.8 je crois que c'est la dernière

Pour le diaporama j'ai besoin d'un peu de temps pour voir la dernière version 4.1.8 et et je te dirais ça, là je dois m'absenter,
de retour plus tard.

Ne te casse pas la tête Babyl il y a un generateur sur leur site je devrais y arrivée
ça m'a l'air assez simple

Ah super, j'avais pas vu le générateur.

PS : Peux-tu nous mettre le lien du générateur ?

Bonjour

Le générateur évoqué par Nounette se trouve ICI
C'est de l'inglich of course, vous pouvez toujours utiliser le traducteur de google.

Cordialement.
Microbull.

Merci Microbull
Je n'avais pas fait le bouton "Editor"

Je confirme que ça marche Nickel !!!!

Par contre je voudrais que le fond de ma page soit d'une autre couleur que blanc mais je ne sais absolument pas où se trouve le paramétrage, je souhaiterais aussi que le titre ne soit pas gallery mais pareil je ne sais où modifier ce texte.

Ci dessous le lien du diapo
http://destinationailleurs.free.fr/highslide1/lemazet.htm

D'avance merci

Bonjour Nounette
dans ta page lemazet.htm

tu as ça juste après la fermeture de head

Code:

</head>
<body >

<h3>Gallery</h3>

pour avoir une couleur de fond tu mets la balise body comme ci-dessous avec le code couleur que tu souhaites (tu remplaceras #b6b6b6)
et pour le titre Gallery que tu veux remplacer tu mets ce que tu souhaites à la place de Gallery entre (h3) et (/h3)
Mais attention, si tu as des accents dans le titre que tu mettras il faudra que tu remplaces les caractères accentués par leur code.

Code:

</head>
<body style="background: #b6b6b6">

<h3>Ton titre ici</h3>

Bon réveillon Nounette

Merci Babyl

Bonjour,
En restant dans le fonctionnement du Highslide je me suis rendu compte qu'en installant le script dans une frame le footer disparaissait systématiquement.
Voir l'essai à cette adresse dans la page d'accueil : http://aspra.free-h.net/essai2/
Est-ce un fonctionnement normal dû au Highslide ou une erreur de ma part ?
Cordialement.
Basalt

Normalement pas de problème avec le pied de page et highslide.
En fait si la fenêtre est assez haute il s'affiche, chez moi je vois ton pied de page, si je diminue la hauteur de la fenêtre, le bas avec l'ascenseur ne se charge pas.
Tu devrais vérifier la hauteur que tu as mis pour ta page, elle est peut-être trop courte pour inclure le pied de page correctement.

Merci Babyl pour ton explication.
Aussi simple que cela le parait j'ai trouvé que ce n'est pas très évident de faire apparaitre ce pied de page.
J'ai fait beaucoup d'essais, un peu en aveugle, pour le voir enfin à sa place.
C'est encore un peu plus délicat en mettant 3 colonnes et 3 rangées de photos comme dans l'essai que j'ai réalisé toujours sur : http://aspra.free-h.net/essai2/
Je pensais régler le problème en mettant le template bien plus grand que la frame, mais ca ne marche pas.
A part faire des essais de réglage en hauteur du template je ne vois pas bien comment on peu faire autrement.
Cordialement.
Basalt

Alors très probablemnet un erreur quelque part, il faut que tu passes les codes que tu as insérés au peigne fin.
D'ailleurs je ne pense pas que ce soit du au pied de page car c'est aussi ton fond de page qui ne se charge pas plus bas que la hauteur de la fenêtre si elle est trop courte, teste sans pied de page tu verras ce que ça donne.

Tu dis plus haut avoir mis dans une frame, elle est ou ta frame, j'ai pas trouvé.

J'oubliais essaye en mettant les codes javascrip et css dans head et non dans body.

Propriété de la page > avancé = head
zone de texte dans la page = body

Bonjour Babyl,
J'ai suivi à la lettre tous tes conseils :
- rien dans les codes insérés,
- pas de modification en mettant ou pas le pied de page,
par compte le fonctionnement est devenu correct en mettant les codes javascript et css dans le head.
En ce qui concerne la frame c'est une erreur de ma part je voulais parler d'une zone "code HTML".
Merci pour tes explications.
Cordialement.
Basalt