28172 sujets

CSS et mise en forme, CSS3

[Résolu] Pb pour Afficher plusieurs images au Clic

Pages :
Bonjour à tous.

Une petite formation HTML CSS et des mois de forum.
Je viens enfin de mettre en ligne mon site Smiley biggrin

Pour mes diaporamas, j'ai beaucoup utilisé la fonction :target mais j'ai fini par me heurter à ses limites.
Pour une page en particulier :
http://charliecerisier.com/tarot_majeurs2.html#maj00

Ici, je me retrouve avec 3 cadres supportant 7 images chacun (8 pour celui du milieu... mais bon).
22 images en tout détaillées dans un menu adjacent.
J'aimerais que lorsqu'on clique sur le lien d'une image d'un des cadres, celle-ci s'affiche mais sans faire disparaître celles des 2 autres cadres.
Pour les moment j'ai bidouillé une solution temporaire en affichant mes images 3 par 3 :
http://charliecerisier.com/tarot_majeurs.html#maj00

Cette solution reste quand même assez frustrante.
J'imagine qu'un javascript serait plus simple mais je n'ai aucune compétence dans ce code. Je sèche Smiley sweatdrop

Quelqu'un connaitrait-il une solution à mon problème ?
Merci d'avance.
Modifié par Lich (17 May 2016 - 15:45)
Déjà un mois... Mince.
Je ne m'attendais pas à ce que quelqu'un me ponde un code tout fait non plus hein. On ne vient pas sur ce site pour faire ses courses Smiley nimp
Un petit conseil de recherche, un sujet déjà traité sur une question similaire, voilà ce que je recherchais. Mais je me suis peut-être tout simplement trompé de forum.
Bon, il va falloir que je reparte en chasse avec mon ami Google.
Allons-y Smiley murf
Ah bah mince, désolé, on a pas vu passer ta question...
Néanmoins, je n'arrive à comprendre exactement ce que tu veux faire.
J'essaie de résumer : actuellement quand tu cliques sur le lien d'une image, elle s'affiche, ça, ça marche.
Tu aimerais que quand tu cliques sur un lien d'une image, l'ensemble du groupe s'affiche, c'est ça ? Comme tu le fais sur ton 2è exemple ? Mais sans que les 3 liens au survol ne se colorent ?
Comment veux-tu que ton image cliquée apparaisse par rapport au 2 autres du groupe ?

J'ai du mal à visualiser le résultat souhaité.
Cool !!! C'est sympa de passer par là.
Non, j'ai dû mal m'exprimer. Un exemple sera plus facile.
Ce que je voudrais :

Chaque lien est isolé et non pas 3 par 3.
Au départ tu as l'image au centre (ici #maj00).
Tu cliques sur n'importe quel autre lien.
Si c'est une image du groupe central, la première image change pour celle cliquée.
Si c'est une image du groupe de droite ou de gauche, elle s'affiche - mais l'image centrale reste affichée.
Et ainsi de suite, si tu cliques partout tu as toujours 3 images (gauche centre droit) mais seule l'image choisie par son lien ne change.

Alors avec :target je pense que c'est mort parce que tu ne peux avoir qu'une cible à la fois.
Je cherche donc un autre moyen pour avoir plusieurs cibles.

C'est plus clair comme ça ? Smiley sweatdrop
Ok, JS donc.
Il faudra vraiment que je me penche dessus si je veux modifier ou reproduire.
Modifié par Lich (17 May 2016 - 19:21)
Yes !
Oui, ça m'a l'air d'être tout à fait ça.
J'ai plus mon pc sous la main mais je m'y colle demain.
Je tiens au jus. Merci beaucoup.
Ok, bon bah pour moi c'est galère.
(j'hésite à m'arracher les cheveux mais j'en ai plus déjà beaucoup)

J'ai collé ton code et fait quelques modifs pour conserver ma mise en page.
C'est au moment d'insérer le JS que ça cloche. Rien à faire.

Voilà où j'en suis.
http://charliecerisier.com/tarot_majeurs3.html
Si tu vois le pb je suis preneur.

Merci quand même pour le temps que je t'ai pris.
Modifié par Lich (18 May 2016 - 11:25)
Bonjour Lich,

Il faut faire appel à la librairie JQuery et insérer le code JavaScript dans les balises prévues à cet effet, i.e, les balises "style" pour le style, les balises script... pour les scripts Smiley cligne
Et comme on trouve de tout sur ce magnifique site (astuces, tutoriels, article, etc.), voici une astuce qui pourra certainement vous éclairer :
Inclure jQuery de manière optimisée
Bonjour 6I20.

C'est fort aimable de ta part d'essayer de m'éclairer.
Seulement voilà.
Après avoir bien attentivement lu l'astuce et tenté 2h durant et par multiple moyens de reproduire studieusement ce que j'estimais avoir intégré, force m'est d'admettre que JS, c'est plus fort que moi... et de m'avouer vaincu par le code Smiley sick

Tant pis, j'en reste encore aujourd'hui au classique HTML/CSS (ce qui n'est déjà pas trop mal pour mon age).

Je ne suis pourtant pas défaitiste mais je passe beaucoup de temps à essayer d'assimiler le sujet, du coup le reste de mon boulot en souffre un peu. Et je sais bien que je ne suis pas le seul dans ce cas.

Encore merci à vous. Et bravo pour votre boulot !
Modifié par Lich (18 May 2016 - 16:58)
Pas de découragement Smiley cligne

Pour que le script fournit par Matthieu fonctionne, il faut (comme indiqué en commentaire) :
1- Faire appel à la librairie jQuery dans la page HTML, soit entre les balises <head></head>, soit avant la fermeture de la balise body (pour une question d'optimisation des performances; relire l'astuce de Dew).
2- Faire appel au script lui même entre les balises script dédiées.

Ce qui donne, en reprenant votre code :
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<title>Tarot - Charlie Cerisier</title>
	<link rel="shortcut icon" href ="design/favicherry.png" />
	<meta name="description" content="Atelier : Tarot - Lames majeures" />
	<meta name="keywords" content="photo, montage, tarot, tarot de marseille, carte, cartes, 	arcanes majeurs, lames majeures" />
	<meta name="geo.placename" content="Paris, France" />
</head>
<body>
       <div id="contain">
       /*Le reste de votre code HTML…*/
       </div>

       /*L'appel à la librairie et au script JavaScript avant la balise de fermeture body*/
       /*Si vous ne souhaitez pas télécharger la librairie*/
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	/*Si vous hébergez la librairie sur votre serveur*/
	<script src="jquery.js"></script>
	/*Si vous souhaitez mettre le fichier .js à part pour plus de clarté et de facilité de maintenance du code*/
	<script src="mon_script.js"></script>
	/*Ou appel direct au script sur votre page*/
	<script>
	//on charge jQuery avant dans ton head

	$(function(){
 	//quand on clique sur un lien du menu 
  	$('body').on('click', '#menu4 a', function(ev){
    	ev.preventDefault();
    	//récupération de l'id de l'image ciblée
    	var img_id = $(this).attr('href');
	//appel de la fonction d'insertion
    	insertImg(img_id);
  	});
  	//on appelle au chargement de la page la fonction pour insérer la première image
  	insertImg('#maj00');

  	function insertImg(img_id){
    	//récupération de la position à laquelle l'image doit aller
    	var img_position = $(img_id).attr('data-position');
    	//insertion de l'image dans la div left/center/right
    	//on insère une copie de l'élément, sinon il est déplacé et donc plus disponible dans le DOM
    	$('.ecran .' + img_position).addClass('visible').html($(img_id).clone());
 	 }
	});
	</script>
</body>
</html>


En avant Guingamp Smiley cligne
Non non, pas de découragement !
Alors en regardant vite, ça ressemble vachement à ce que j'avais tenté.

J'avais hébergé la librairie en un joli jquery.js mais c'est peut-être de là que ça coince.
Je ne suis pas sûr d'avoir la bonne librairie.
Tu as un lien simple qui me faciliterait la vie ?
Parce que tous les téléchargements qu'ils proposent (et tout ça en anglais de programmeur!!!)...

Pareil pour le script que j'ai recopié et enregistré dans un petit fichier .js et que j'appelle plus tard.
C'est pas un problème d'aller le ranger ailleurs qu'à la source je pense ...?

Allez, là c'est l'heure de l'apéro et après je suis moins concentré mais je me tente le match retour demain matin. Et tenter de faire mieux que la 16ème place Smiley ravi
Ah bah mince alors...
Je ne sais pas si tu as fait des changements depuis, mais dans ta version modifiée ( http://charliecerisier.com/tarot_majeurs3.html ) tu charges le code JS dans une balise <style> et ça c'est pas bon et tu ne charges pas jQuery Smiley ohwell

Il faut juste en effet que tu charges jQuery comme te le précise 6l20.
Si tu veux tu peux charger une version en ligne de jQuery et ton code à toi dans un fichier nommé comme tu veux, par exemple "app.js" dans l'ordre suivant : 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
<script src="http://charliecerisier.com/app.js"></script> <!-- là où il se trouve sur ton serveur bien sûr-->

A mettre juste avant la balise fermante </head>
Attention, j'avais modifié le balisage HTML mai j'ai l'impression que tu as fait la modif.
Modifié par MatthieuR (18 May 2016 - 21:42)
Incroyable !!!!
Ça marche Smiley biggrin
http://charliecerisier.com/tarot_majeurs.html#maj00

Si je comprends bien, ça devait venir de ma version minifiée de jQuery qui n'était pas bonne.
En recopiant celle de Matthieu (https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js) et en l'enregistrant dans mon fichier jquery.js tout baigne.

Comme quoi, ça se jouait à pas grand chose.
Merci encore (on ne le dit jamais assez) !
Hello,

Super Smiley cligne
En passant :
1- Il manque <ul> autour de ton <li> (...) et ça, c'est mal...
2- Beaucoup d'identifiant pour tes "menus", ce n'est sans doute pas nécessaire, il faudrait revoir un peu le code (et quitte à être en HTML5, autant utiliser les nouvelles balises, <nav>, <section>, par exemple...) Smiley cligne
3- Il va te falloir revoir les chiffres romains (IV et non IIII, IX et non VIIII, etc.)
Une chose pratique pour les listes, la propriété list-style-type, qui te permet un certain nombre de chose, notamment :
li {
  list-style-type: upper-roman;
}
Plus besoin de le rajouter dans le code HTML Smiley biggrin

Plus de détails dans l'article de Raphaël: Donnez du style à vos listes d'éléments

Bonne continuation Smiley cligne
Modifié par 6l20 (06 Jun 2016 - 12:28)
Hi.

En effet, j'ai négligé les <ul> je sais, c'est mal.
J'avais remarqué que ça repoussait tous mes positionnements.
Dans l'urgence, j'avais bricolé. Je vais me pencher là-dessus.

Pour les menus, j'y travaille. Le HTML5 est encore nouveau pour moi.

Et en ce qui concerne les chiffres romains, à l'époque de la création du Tarot, 4 s'écrivait encore IIII.
Mais ça n'est peut-être plus très important, le code prévaut Smiley cligne
Un bon point pour la propriété list-style-type donc.
...et refaire toutes mes cartes Smiley sweatdrop
Modifié par Lich (19 May 2016 - 12:12)
Lich a écrit :

Hi.
En effet, j'ai négligé les <ul> je sais, c'est mal.
Oui Smiley lol
Lich a écrit :

J'avais remarqué que ça repoussait tous mes positionnements.
Dans l'urgence, j'avais bricolé. Je vais me pencher là-dessus.

Certains éléments ont un rendu par défaut qui peut parfois surprendre : Rendu par défaut des éléments HTML
Rien d'insurmontable Smiley cligne
Lich a écrit :

Et en ce qui concerne les chiffres romains, à l'époque de la création du Tarot, 4 s'écrivait encore IIII.
Mais ça n'est peut-être plus très important, le code prévaut Smiley cligne
Un bon point pour la propriété list-style-type donc.
...et refaire toutes mes cartes Smiley sweatdrop

Je l'apprends, je me coucherai moins bête Smiley cligne
Bon courage pour la suite Smiley cligne

ps: Tu peux également externaliser ton fichier CSS Smiley cligne
Modifié par 6l20 (19 May 2016 - 13:12)
6l20 a écrit :

ps: Tu peux également externaliser ton fichier CSS Smiley cligne


Oh la la, oui !
Mon site fait actuellement 75 pages. C'est pas énorme mais ça commence.
La maintenance sera une promenade quand j'aurai mis ça en place.

Une malédiction pour moi qui suis un brin perfectionniste.
Ça va m'occuper pour les journées de pluie cet été Smiley smile
Pages :
Sujet clos
Aller à