Highslide JS core

[angelsjenifer]

Bonjour,

- l'URL du forum, si nécessaire, http://angelsjenifer.forumsactifs.com
- la version de votre forum, phBB
- une capture d'écran du problème (Comment faire ?), Je souhaiterais avoir ce système sur mon forum lorsque l'on clique sur une image ( http://highslide.com/#examples ). J'ai déjà fait des recherches sur ce forum mais rien ne convenais à ma demande. Sur ce site, il y a des tutoriels mais je ne les comprends pas, c'est pourquoi j'ai décidé de faire appel à vos compétences.
- votre statut sur le forum (fondateur, ou non), fondateur
- si vous avez modifié des templates (Si oui, le(s)quel(s)), oui, index_body, index_box, overall_footer_begin, overall_header, viewtopic_body
- si vous avez du CSS personnalisé, oui
- votre ou vos navigateur(s). IE, Firefox, Safari

Merci d'avance pour l'aide que vous m'apporterai.

Angel

[angelsjenifer]

up

[Threax]

Bonjour, Je vous rappelle qu'il est autorisé un seul UP par tranche de 24 heures, à partir de votre dernier message posté dans le sujet concerné. Je vous invite à lire : - Règles générales du forum - Charte de ce forum A bientôt sur ForumActif

[angelsjenifer]

up

[angelsjenifer]

up

[Ea]

Bonjour,


J'en ai deux de script de ce genre :

• Celui du forum des blogs qui agit pour les images plus large que 500 pixels de haut ou de large :
  
  
  Il faut mettre ce script sur les pages de sujet et ajouter ceci dans le CSS :
  
  

  Code:

  .postbody img { max-width: 500px; max-height: 500px; }
.postbody img.nomax { max-width: none; max-height: none; }

  Vous pouvez voir l'effet là : http://forum.sosblog.fr/t2092-installer-une-chatbox ( en cliquant sur les images ).
  
  
• Le jquery lightbox qui devrait également mettre les images en "galerie" ( et il agit sur les images sans distinction de taille ) :
  
  
  Il faut mettre ce script sur les pages de sujet, et ajouter ce css ( on peut modifier la première ligne pour changer la taille de redimensionnement des images dans les messages ).
  
  Vous pouvez voir ce que ça donne par exemple là en cliquant sur une des images :
  http://www.maonyn.com/t202-dessins-arbres-uflood-ugraphisme

Si vous voulez le faire pour un autre plugin, il vous suffit d'inclure le script du plugin que vous voulez ( par une page de script ), rajouter tout le css du plugin dans le css du forum, héberger les images et trouver le moyen de changer dans le script et le css les liens de ces images. Puis il vous suffira de faire un script qui repère les images dans les messages et les "donne" au plugin qui pourra faire sa popote dessus.

( ou attendre dans ce sujet qu'une bonne âme le fasse pour vous )

Cordialement.

[angelsjenifer]

Merci d'avoir répondu.
La première solution se rapproche plus de ce que je recherche.
Cependant, j'aimerais avoir une petite image 'loupe' qui apparaisse lors du passage de la souris sur l'image à agrandir, et que l'on sache cliquer une fois agrandie, pour revenir au message.

[Ea]

Pour changer le curseur, vous pouvez changer le :

Code:

}).fz()

Par :

Code:

}).addClass("lbhover").fz()

Et puis ajouter dans le CSS :

Code:

.lbhover { cursor: pointer; cursor: -moz-zoom-in; cursor: -webkit-zoom-in; }

Pour rajouter un curseur zoom - sur l'image agrandie il faudrait ajouter au css :

Code:

#zoom_content img { cursor: pointer; cursor: -moz-zoom-out; cursor: -webkit-zoom-out; }

Pour que ça se ferme au clic sur l'image ( plutôt qu'en cliquant en dehors ou en appuyant sur escape ), dur à dire mais on pourrait simuler un appui sur la touche escape si on appuie sur l'image aggrandie ( pour faire simple ). Il faudrait donc juste ajouter au script ceci :

Code:

$(document).on("click","#zoom_content img",function(){
  $(document).trigger({type:"keyup",keyCode:27});
});

Cordialement.

[angelsjenifer]

Merci, comment faire pour le mettre en fonction dans les sujets ?

[Ea]

Et bien quand vous l'ajoutez dans les scripts, vous cochez "Sur les sujets" ^^


Cordialement.

[angelsjenifer]

Je l'ai fait mais ça ne fonctionne pas

L'image est bien réduite, mais le script ne fonctionne pas.
http://angelsjenifer.forumsactifs.com/t1129-test

[Ea]

Cela fonctionne mais vous êtes dans le cas donné là :
https://forum.forumactif.com/t308422-nouveaute-forumactif-gestion-des-codes-javascript#edit-temp

( où pour que le système de code javascript fonctionne vous devez éditer votre template overall_header modifiée )


Cordialement.

[angelsjenifer]

Génial !! C'est exactement le résultat que je voulais

Merci beaucoup