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

Voir le sujet précédent Voir le sujet suivant Aller en bas

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

Message par Teurancher le Lun 2 Mar 2015 - 19:35

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


Dernière édition par Teurancher le Mer 4 Mar 2015 - 17:39, édité 1 fois

Teurancher
*****

Masculin
Messages : 545
Inscrit(e) le : 28/02/2015

http://www.arcadia-forum.com/
Teurancher a été remercié(e) par l'auteur de ce sujet.

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

Message par Alzufen le Lun 2 Mar 2015 - 19:58

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 ? Razz

Alzufen
***

Masculin
Messages : 172
Inscrit(e) le : 31/07/2011

http://ysias.forumactif.org/
Alzufen a été remercié(e) par l'auteur de ce sujet.

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

Message par Teurancher le Lun 2 Mar 2015 - 20:05

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

Teurancher
*****

Masculin
Messages : 545
Inscrit(e) le : 28/02/2015

http://www.arcadia-forum.com/
Teurancher a été remercié(e) par l'auteur de ce sujet.

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

Message par Alzufen le Lun 2 Mar 2015 - 20:44

J'aurais plutôt dis ici en fait : http://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 Razz

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

Alzufen
***

Masculin
Messages : 172
Inscrit(e) le : 31/07/2011

http://ysias.forumactif.org/
Alzufen a été remercié(e) par l'auteur de ce sujet.

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

Message par Teurancher le Lun 2 Mar 2015 - 21:00

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

Teurancher
*****

Masculin
Messages : 545
Inscrit(e) le : 28/02/2015

http://www.arcadia-forum.com/
Teurancher a été remercié(e) par l'auteur de ce sujet.

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

Message par Alzufen le Mar 3 Mar 2015 - 1:26

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) Smile

Alzufen
***

Masculin
Messages : 172
Inscrit(e) le : 31/07/2011

http://ysias.forumactif.org/
Alzufen a été remercié(e) par l'auteur de ce sujet.

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

Message par Teurancher le Mar 3 Mar 2015 - 20:02

Rebonsoir,
Bien sûr:

http://image.noelshack.com/fichiers/2015/10/1425409357-imagetest1.png
http://image.noelshack.com/fichiers/2015/10/1425409357-imagetest2.png

Teurancher
*****

Masculin
Messages : 545
Inscrit(e) le : 28/02/2015

http://www.arcadia-forum.com/
Teurancher a été remercié(e) par l'auteur de ce sujet.

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

Message par Alzufen le Mar 3 Mar 2015 - 21:09

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)

Alzufen
***

Masculin
Messages : 172
Inscrit(e) le : 31/07/2011

http://ysias.forumactif.org/
Alzufen a été remercié(e) par l'auteur de ce sujet.

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

Message par Teurancher le Mar 3 Mar 2015 - 21:17

Seulement une image \o/

Teurancher
*****

Masculin
Messages : 545
Inscrit(e) le : 28/02/2015

http://www.arcadia-forum.com/
Teurancher a été remercié(e) par l'auteur de ce sujet.

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

Message par Alzufen le Mar 3 Mar 2015 - 21:42

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 Razz

Alzufen
***

Masculin
Messages : 172
Inscrit(e) le : 31/07/2011

http://ysias.forumactif.org/
Alzufen a été remercié(e) par l'auteur de ce sujet.

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

Message par Teurancher le Mar 3 Mar 2015 - 22:09

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

Teurancher
*****

Masculin
Messages : 545
Inscrit(e) le : 28/02/2015

http://www.arcadia-forum.com/
Teurancher a été remercié(e) par l'auteur de ce sujet.

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

Message par Alzufen le Mar 3 Mar 2015 - 22:26

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

Alzufen
***

Masculin
Messages : 172
Inscrit(e) le : 31/07/2011

http://ysias.forumactif.org/
Alzufen a été remercié(e) par l'auteur de ce sujet.

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

Message par Teurancher le Mar 3 Mar 2015 - 22:35

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

Teurancher
*****

Masculin
Messages : 545
Inscrit(e) le : 28/02/2015

http://www.arcadia-forum.com/
Teurancher a été remercié(e) par l'auteur de ce sujet.

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

Message par Alzufen le Mar 3 Mar 2015 - 22:50

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

Alzufen
***

Masculin
Messages : 172
Inscrit(e) le : 31/07/2011

http://ysias.forumactif.org/
Alzufen a été remercié(e) par l'auteur de ce sujet.

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

Message par Teurancher le Mar 3 Mar 2015 - 22:56

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) ?

Teurancher
*****

Masculin
Messages : 545
Inscrit(e) le : 28/02/2015

http://www.arcadia-forum.com/
Teurancher a été remercié(e) par l'auteur de ce sujet.

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

Message par Alzufen le Mar 3 Mar 2015 - 22:59

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.

Alzufen
***

Masculin
Messages : 172
Inscrit(e) le : 31/07/2011

http://ysias.forumactif.org/
Alzufen a été remercié(e) par l'auteur de ce sujet.

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

Message par Teurancher le Mar 3 Mar 2015 - 23:02

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 ?

Teurancher
*****

Masculin
Messages : 545
Inscrit(e) le : 28/02/2015

http://www.arcadia-forum.com/
Teurancher a été remercié(e) par l'auteur de ce sujet.

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

Message par Alzufen le Mar 3 Mar 2015 - 23:06

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" ^^

Alzufen
***

Masculin
Messages : 172
Inscrit(e) le : 31/07/2011

http://ysias.forumactif.org/
Alzufen a été remercié(e) par l'auteur de ce sujet.

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

Message par Teurancher le Mar 3 Mar 2015 - 23:10

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

Teurancher
*****

Masculin
Messages : 545
Inscrit(e) le : 28/02/2015

http://www.arcadia-forum.com/
Teurancher a été remercié(e) par l'auteur de ce sujet.

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

Message par Alzufen le Mar 3 Mar 2015 - 23:19

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

Alzufen
***

Masculin
Messages : 172
Inscrit(e) le : 31/07/2011

http://ysias.forumactif.org/
Alzufen a été remercié(e) par l'auteur de ce sujet.

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

Message par Teurancher le Mer 4 Mar 2015 - 14:37

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

Teurancher
*****

Masculin
Messages : 545
Inscrit(e) le : 28/02/2015

http://www.arcadia-forum.com/
Teurancher a été remercié(e) par l'auteur de ce sujet.

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

Message par Alzufen le Mer 4 Mar 2015 - 14:38

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" Razz

Alzufen
***

Masculin
Messages : 172
Inscrit(e) le : 31/07/2011

http://ysias.forumactif.org/
Alzufen a été remercié(e) par l'auteur de ce sujet.

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

Message par Teurancher le Mer 4 Mar 2015 - 17:38

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

Teurancher
*****

Masculin
Messages : 545
Inscrit(e) le : 28/02/2015

http://www.arcadia-forum.com/
Teurancher a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum