Des semaines que je planche sur Fancybox

Fermé

Eritou Messages postés 110 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 - Modifié par jordane45 le 30/12/2014 à 09:45
Eritou Messages postés 110 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 - 8 janv. 2015 à 20:58

Bonsoir à tous, après plusieurs échecs avec fancybox; j'en suis revenu à une base classique (issu d'un tuto) dont voici la totalité du code :

<!DOCTYPE html>
<html>
<head>
 <title>Exemple - Lightbox</title>
 
 <style type="text/css">
  body{
 margin: 0px;
 font: 12px Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
 text-align: center;
  }
  h1{
 /* [disabled]text-decoration: underline; */
 font: bold 20px Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
  }
 </style>
 
 <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />
 <script type="text/javascript" src="fancybox/jquery-1.4.3.js"></script>
 <script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
 <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
 
 <script type="text/javascript">
  $(document).ready(function() {
  $('a[rel=diaporama_group]').fancybox({
    'transitionIn'  : 'elastic',
    'transitionOut'  : 'none',
    'titlePosition'  : 'over',
    'titleFormat'  : function(title, currentArray, currentIndex, currentOpts) {
     return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? '   ' + title : '') + '</span>';
    }
   });
   
   $('#LienIframe').fancybox({
    'width' : '75%',
    'height' : '75%',
    'autoScale' : false,
    'transitionIn' : 'none',
    'transitionOut' : 'none',
    'type' : 'iframe'
   });
  });
 </script>
</head>
<body>

<h1><a rel='diaporama_group' href='images/img-ex6.jpg' title='vignette1'><img src='images/img-mini-ex6.jpg' alt='' class="img" /></a><a rel='diaporama_group' href='images/img-ex7.jpg' title='vignette2'><img src='images/img-mini-ex7.jpg' alt='' class="img" /></a><a rel='diaporama_group' href='images/img-ex8.jpg' title='vignette3'><img src='images/img-mini-ex8.jpg' alt='' class="img" /></a><a rel='diaporama_group' href='images/img-ex9.jpg' title='vignette4'><img class='last img' alt='' src='images/img-mini-ex9.jpg' /></a><br />
</h1>
</body>
</html>

Je souhaiterais au moment du mousehover qu'un calque opacité s'affiche sur une photo du diaporama puis un second calque avec texte (différent pour chaque photos, mais avec le même calque d'opacité). J'ai eu beau chercher, dans les méthode z-index etc... rien (ou rien compris :/ )
Second prob dont je n'ai vu la solution nulle part : on clique (dans le diaporama) sur une photo mini de Joe Cocker 1969, la big s'affiche, en cliquant sur >on tombe sur la deuxième photo big de joe Cocker 1970 (avant l'effet zoom, les deux vignettes étaient dans la page).
Mais voilà ce que je ne trouve pas sur le net. Dans le diaporama : un seule vignette de Joe Cocker et une vignette de Jimi Hendrix. Quand on clique sur Joe Cocker, la big s'affiche, comme avant; mais quand on clique sur > ce n'est pas la photo de Jimi Hendrix mais une seconde photo de Joe Cocker. Donc la seconde question est comment lier une chaîne d'image à une seule image fancyboox ?
Merci pour votre aide et bonne soirée,
E.

A voir également:

Des semaines que je planche sur Fancybox
Télé 2 semaines pas reçu - Forum Réseaux sociaux
Envoyer un mail automatique outlook toutes les semaines - Forum Mail
Faire une planche photo avec word ✓ - Forum Graphisme
Comment calculer les semaines de grossesse - Télécharger - Vie quotidienne
Planche contact photoshop cs5 - Forum Photoshop

3 réponses

Réponse 1 / 3

Kopros Messages postés 595 Date d'inscription mardi 25 septembre 2007 Statut Membre Dernière intervention 3 février 2020 89
8 janv. 2015 à 19:15

Si j'ai bien tout compris, tu veux mettre un truc qui ressemble à ça : http://themes.zeotheory.com/?theme=ztudio

sauf qu'à la place des "+" tu veux mettre du texte, c'est bien ça ?

Réponse 2 / 3

Eritou Messages postés 110 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 4
8 janv. 2015 à 20:55

Slt Kopros,
Excellent ce site !!!
Dans la vidéo ci-dessous, ce que je désire pouvoir faire :
https://www.youtube.com/watch?v=tzHr...atur
Selon le lien ("barre des menus"), on tombe sur des diaporama :
- soit l'image N°1 cliquée ouvre l'image N°2 etc... si on clique sur la flèche droite.
- soit l'image N°1 cliquée n'ouvre pas l'image N°2 mais sur une image que je nommerais N°1_deux si on clique sur la flèche droite. Si on clique sur l'image N°2, on tombe sur l'image N°2_deux si on clique sur la flèche droite, puis N°2_trois etc...
Merci pour ton aide,
Eritou

Réponse 3 / 3

Eritou Messages postés 110 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 4
8 janv. 2015 à 20:58

Le lien de la vidéo : https://www.youtube.com/watch?v=tzHro1jo9vo

Discussions similaires

Realisation de planche de photos sur word

reclamation, revue non reçue

ajouter des semaines à une date

comment contacter Tele2 par mail

le dernier numero de tele 2 semaines (14 au 27) n'est pas arrivé