Barre à gauche qui défile avec l'écran et cache une image cliquable

[Teurancher]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Moi uniquement
Problème apparu depuis : Aujourd'hui-même
Lien du forum : http://www.snapchatforum.fr/

Description du problème

Bonsoir,
Je cherche à cacher une image à gauche de l'écran qui suit quand on navigue et qui montre une autre image quand on clique dessus, à l'image d'une chatbox latérale mais pour une image avec un lien.

J'espère avoir été assez clair, merci d'avance

[Alzufen]

Bonsoir ^^

En clair, tu veux qu'il y est une image fixé à la gauche du forum, donc quand on descend elle ne bouge pas de place et te suis, et quand tu cliques dessus, que ça change l'image par une autre, ou ouvre un bloc avec une autre image, ou quoi que ce soit d'autre ?

Ce serait bien d'avoir un petit exemple, de plus tu t'es trompé de section à moins que tu es déjà un code ?

[Teurancher]

Quand on clique dessus, ça ouvre un bloc avec une image plus grande dedans, et je vois pas où j'aurais pu poster ça :b

[Alzufen]

J'aurais plutôt dis ici en fait : https://forum.forumactif.com/f7-gerer-l-apparence-de-son-forum ^^

Je vais voir pour te faire ça, mais tu pourrais simplement récupérer le fais de mettre une widget ou un bloc collé au bord du forum et le personnaliser un peu pour que ça donne ce que tu veux, c'est pas les tutos qui manque. Au cas où tu veux tenter toi-même le temps que je le fasse

(Parce que là j'ai une douleur atroce derrière la tête, c'est énervant pour coder XD)

[Teurancher]

J'ai déjà essayé avec les widgets et ça rendait juste horrible. :b
Merci d'avance pour ton aide

[Alzufen]

Je te ferais ça demain, enfin maintenant c'est plutôt "plus tard" mais bon ^^

Si tu pouvais me fournir deux images qui serviront pour tester le code, ce serait parfait (pas forcément celle qui tu vas vraiment mettre, juste des images aux même dimensions pour tester)

[Teurancher]

Rebonsoir,
Bien sûr:

https://2img.net/image.noelshack.com/fichiers/2015/10/1425409357-imagetest1.png
https://2img.net/image.noelshack.com/fichiers/2015/10/1425409357-imagetest2.png

[Alzufen]

Re'

Dois y avoir du texte ou quoi que ce soit d'autre qui soit ajouté en dessous de l'image, ou juste l'image qui doit apparaître dans le bloc qui apparaît en cliquant sur l'image (trop de répétition XD)

[Teurancher]

Seulement une image \o/

[Alzufen]

Quelque chose comme ça :

http://fiddle.jshell.net/Alzufen/6fwysc6n/show/

Pour le positionnement faudra me dire où tu le veux sur le côté gauche (il est bien fixé par contre), si c'est plus bas ou là c'est bien

[Teurancher]

Le rendu est très bien ! J'ai quelques connaissances en html, donc pour le postionnement je pense pouvoir adapter ça sans trop de problèmes, sauf si tu l'as fait complexe ou si tu préfères le faire :B

[Alzufen]

Bah là il faudra positionner avec "top" ou "bottom" si tu sais faire pas de soucis, sinon je te le fais ^^

[Teurancher]

Dans ce cas, le centrer comme ça si possible, merci d'avance

[Alzufen]

Comme ça: http://fiddle.jshell.net/Alzufen/6fwysc6n/1/show/ ?

[Teurancher]

Parfait. J'aurais juste deux questions:

Est-ce qu'on doit toucher au code pour mettre des images plus larges ou plus petites que ceux que je t'ai donné en exemple ?
Possible de faire ouvrir un lien dans un nouvel onglet en cliquant sur l'image (la plus grande) ?

[Alzufen]

Oui et oui, dans le premier cas il faudrait mettre les nouvelles dimensions de tes images dans le CSS, si la hauteur augmente il te faudra aussi modifier le margin-top négatif, qui devra être de moitié de la hauteur maximum du bloc.

Pour le second cas, suffit de rajouter un lien (balise "a") avec ' target="_blank" ' en option pour qu'il s'ouvre dans un nouvel onglet.

[Teurancher]

Bien, merci. C'est à moi de me débrouiller maintenant :B

qui devra être de moitié de la hauteur maximum du bloc.

Simple exemple, si l'image fait 250px de hauteur, faudra opter pour 125 ?

[Alzufen]

Genre un truc comme ça : http://fiddle.jshell.net/Alzufen/6fwysc6n/5/show/ ? (Si tu cliques sur l'image ça ouvre ce topic)

Oui et non, si la plus grande image fait "250px" de hauteur, il faudra mettre "250px" de hauteur au bloc qui entoure le tout, et changer le margin-top en "-125px" ^^

[Teurancher]

C'est parfait comme ça. Je sais pas m'y prendre pour récupérer le code par contre. (jesuisunboulet)

[Alzufen]

http://jsfiddle.net/Alzufen/6fwysc6n/7/

En haut à gauche c'est le code HTML, il va falloir l'ajouter dans le template "Overall-header" après la balise "body" ou dans ton "Index-body" au tout début du template.

En haut à droite c'est le code CSS à ajouter à ta feuille de style CSS.

En bas à gauche c'est le JS, à ajouter dans ta gestion des pages JS, en cochant bien "Sur toutes les pages".

Et en bas à droite c'est l'aperçu :p

[Teurancher]

Ça marche parfaitement. Merci beaucoup à toi Alzufen, je te souhaite une excellente journée.

[Alzufen]

Pas de soucis, le plaisir est pour moi, une excellente journée à toi aussi et une bonne continuation pour ton forum ^^

Ps : N'oublie pas d'éditer ton premier message pour ajouter l'icône "résolu"

[Teurancher]

Marchi, même si je galère déjà avec autre chose ._.
Mis en résolu