Bonjour,

Je cherche comment créer l'effet que l'on trouve sur cette page quand on clique sur une vignette :

http://www.christian-narp.com/album-photos/oiseaux-zone-humide/grebe-huppe/

Une page semi-transparente vient se placer au-dessus de la page en cours avec une photo au milieu. Si on clique sur la partie transparente, la page se referme.

J'ai cherché dans le code et j'ai trouvé ça :

   	<li class="item">
            <div class="item_content">
		<a title="Couple grèbe huppé et 3 poussins" rel="iframe" class="photogallery_item" href="http://www.christian-narp.com/medias/album/couple-grebe-2.jpg">http://www.christian-narp.com/medias/album/couple-grebe-2.jpg">
			<img class="photogallery_thumb_item" alt="Couple grèbe huppé et 3 poussins" src="http://www.christian-narp.com/medias/album/couple-grebe-2.jpg?fx=c_200_200">http://www.christian-narp.com/medias/album/couple-grebe-2.jpg?fx=c_200_200" />
                </a>
                <dl>
                    <dt class="photogallery_item_title item_title">Couple grèbe huppé et 3 poussins</dt>
                </dl>
            </div>
        </li>

Il semble que la technique utilisée soit basée sur un iframe. J'arrive bien à faire apparaitre et disparaitre un iframe sur ma page mais jamais en superposition. Il arrive toujours en décalant le contenu de la page appelante vers le bas...

Si vous pouvez m'aider à résoudre mon problème, merci.

Apolinaire

Salut

Pas besoin d'iframe, car on appelle ça un effet lightbox :

- Colorbox avec demo

- Francybox avec exemples en bas de page

- etc...

Merci beaucoup Dreamer. Je viens d'aller voir tes liens et je pense y trouver mon bonheur. J'ai un peu de boulot devant moi !

Jusque là, j'étais arrivé à faire quelque chose qui fonctionnait correctement avec Firefox mais qui était catastrophique avec IE (version 8 ou version 11)...

Apolinaire

Les liens donnés sont compatibles avec tous les navigateurs.

Préviens avec un <noscript> que ces lightbox fonctionnent avec javascript activé et tu mets le lien de Elle au cas ou ....

Bonsoir,

J'ai bien bossé toute l'après-midi.

Après avoir analysé Colorbox et Fancybox, je me suis rendu compte que ces programmes étaient uniquement orientés affichage de photos. En fait, contrairement au lien que je donnais en exemple, ça n'était pas vraiment ce que je cherchais mais plutôt la façon de placer une page semi-transparente sur une autre (comme j'ai tenté de le dire dans l'objet du fil de discussion).

Ceci dit, ces programmes sont très intéressant et je remercie Dreamer de m'avoir aiguillé sur eux. Désolé Dreamer de t'avoir mal orienté ; c'est de ma faute.

Mais tu peux encore m'aider comme testeur. Voilà l'adresse tout à fait provisoire du site que je développe pour mon beau-frère. Lui même ne l'a pas encore vu ! J'ai un souci en particulier avec la page Restaurant quand on clique sur le bouton pour voir la carte (en bas à droite). Sur Firefox, c'est nickel. Sur mon IE11 sous Windows 7 64 bits, le fond (background.color) de la carte n'est pas transparent ! Or, je lis partout sur internet que la fonction CSS3 "rgba" est acceptée depuis IE9.

Et toi, qu'est-ce que ça fait chez toi ? J'ai confiance pour Firefox mais pour IE ? Et lequel ? Et si ça ne marche pas, pourquoi ?

Merci de jeter un coup d’œil et de me dire ce qu'il en est.

Apolinaire

Si je peux me permettre, ce serait beaucoup plus accessible si tu rendais disponible la carte sur une seule page, à la limite dans un fichier PDF. Parce que là, pour comparer différents plats de différentes catégories, c'est pas possible...

elle a écrit :

Si je peux me permettre, ce serait beaucoup plus accessible si tu rendais disponible la carte sur une seule page, à la limite dans un fichier PDF. Parce que là, pour comparer différents plats de différentes catégories, c'est pas possible...

Comme dirait ma québécoise préférée, je plussoie car on a l'impression qu'il manque le bas du menu dans FF !!

De plus avec les menus, on a plus accès au reste du site !!

Re

Un autre truc, tu devrais penser à simplifier ton css, exemple

.mainmenu {
padding-right : 5px;
display : block;
padding-left : 5px;
font-weight : bold;
font-size : 12px;
padding-bottom : 6px;
vertical-align : middle;
color : #000000;
padding-top : 5px;
font-family : Verdana, Arial, Tahoma;
background-color : #F03344;
text-decoration : none;
}

Simplifié, tu aurais

.mainmenu {
display:block;
padding:5px 5px 6px 5px;
font:12px bold Verdana, Arial, Tahoma;
vertical-align : middle;
color : #000;
background-color : #F03344;
text-decoration : none;
}

De 12 à 7 lignes

Autre chose, un truc sympa :

body {
background-image : url(images/fonds/olivier.jpg);
background-repeat : no-repeat;
margin-top : 0px;
}

Un fond fixe

body {
background : transparent url('images/fonds/olivier.jpg') no-repeat fixed; On bloque l'image derrière !!
margin-top : 0px; Pas nécessaire si tu as déjà précisé au début de ton script 
}

On parle du Choc de simplification en politique, à toi aussi de le faire !!

Bonjour,

Merci à vous deux ; c'est vraiment sympa de vous pencher sur mon cas.

Pour la carte, l'idée est de reprendre le principe même de la carte au resto (qui a la même présentation que sur le site mais avec les prix). On tourne les pages et on choisit son ou ses plats selon les différents types (poissons, viandes, desserts, etc.). Pendant ce temps là, on ne fait pas autre chose ! Cette carte présentée sur le site est conforme à la carte réelle mais n'est pas indispensable à la recherche du visiteur. Ce dernier cherche un resto, il veut l'adresse, les heures d'ouvertures et quelques infos sur le type de nourriture qu'il y trouvera. Après, que les omelettes soient au fromage ou natures, c'est du superflu dont il s'occupera surtout sur place. Donc on ouvre la carte, on jette un rapide coup d’œil, on ferme et on continue son surf sur le site.

Dans une première maquette, je faisais apparaître cette carte dans une "window.open". Mais il parait qu'il ne faut plus utiliser cette fonction ; on doit rester dans la même fenêtre. D'où l'idée de la page superposée dont j'ai vu un exemple dans le site que je citais dans mon premier post.

Dreamer tu m'inquiètes quand tu dis : on a l'impression qu'il manque le bas du menu dans FF. Chez moi, je vois bien tout le bas :

Et même sous IE11, la seule différence est le manque de transparence :

C'est quoi encore cette histoire ?

Bon, aujourd'hui je vais me pencher sur les corrections proposées des CSS. J'apprécie beaucoup ce petit coup de main. Merci.

Apolinaire

J'ai la même chose d'affiché avec FF !!

Bonsoir,

Tout d'abord merci pour le CSS. Je l'ai compacté. Juste une remarque, il faut écrire font: bold 12px Verdana, Arial, Tahoma; et pas font:12px bold Verdana, Arial, Tahoma;. Pas grave...

J'ai aussi appliqué le fond fixe. Ça, c'est magique ; j'aime beaucoup.

Mais je ne comprends pas votre vision du site. Voici 2 copies d'écran, une sous FF l'autre sous IE prises depuis la lecture du même site en ligne que vous lisez ! Ça n'est donc pas du "local" (avec lequel j'ai appris à me méfier) !

Je n'y comprends rien. Et vous ?

Si on ne résout pas ce problème, il faudra que je cherche une autre solution. Qui sait ? Peut-être un pdf comme le suggérait Elle.

Bonne soirée.

Apolinaire

A tout hasard j'ai mis le z-index de la carte du resto à 512. Précédemment je l'avais simplement mise à 2. Est-ce que ça va mieux ? Chez moi, ça marche toujours aussi bien...

Apolinaire

La réponse est non !!

Ça fonctionne si je mets le zoom à environ 67%.

En fait, c'est ta page grisée qui ne recouvre pas complètement l'autre...

Je pense que tu te compliques la vie pour pas grand chose, pour ce que ça donne de plus sur le site...

Bonjour,

Vous avez raison, je vais changer de technique. Comme je suis satisfait de vos talents de testeurs (!!!), je reviendrai vous solliciter.

Apolinaire

Voilà, c'est corrigé. Dommage que je ne sois pas arrivé à faire cette superposition ; j'aimais bien... Mais la priorité doit aller à la visibilité du site.

Merci de votre aide. Je marque le sujet comme résolu.

Apolinaire