[Résolu] Carrousel + vignette + zoom fancybox

Carrousel + vignette + zoom fancybox [Résolu] - HTML/CSS - Programmation

Marsh Posté le 17-06-2014 à 16:43:37    

Bonjour
 
Je ne sais pas si je suis dans le bon forum pour poser cette question mais la voici quand même :
Je recherche un script permettant d'afficher un carrousel d'images sous forme de petites vignettes avec au dessus un affichage de la première image dans une taille supérieure qui quand on clic dessus affiche un zoom de cette image comme le fait le plugin fancybox.
 
Il y a un paquet de scripts pour faire un carrousel + affichage image mais je ne trouve nul part un exemple fonctionnant avec un troisième niveau d'affichage (zoom fancybox).
 
L'un d'entre vous a t-il déjà vu ce genre de script ?
 
Merci


Message édité par shivaia le 30-06-2014 à 22:57:26
Reply

Marsh Posté le 17-06-2014 à 16:43:37   

Reply

Marsh Posté le 26-06-2014 à 00:13:00    

bonjour,
 
comme sa ?: http://www.pikachoose.com/

Reply

Marsh Posté le 30-06-2014 à 22:55:19    

Slt morpheus500, c'est exactement ce que je cherche
un grand merci à toi :)

Reply

Marsh Posté le 03-07-2014 à 07:35:37    

bonjour,
je cherchais exactement la même chose et j'avais trouvé pikachoose aussi, par contre, j'ai bien du mal a mettre en place le "carrousel" et la "fancybox" sur la meme galerie (je ne suis pas un as du php).
j'ai bien essayé ce petit tuto qu'ils proposent ( http://www.pikachoose.com/how-to-fancybox ) , mais lors du clic sur mon l'image, il m'ouvre bien ma photo élargie mais sur une page moche a fond blanc ...
pensez vous pouvoir me guider svp?


Message édité par le petit nouveau le 03-07-2014 à 07:40:33
Reply

Marsh Posté le 03-07-2014 à 08:48:03    

J'ai aussi quelques soucis lors de l'utilisation de fancybox, et j'avais pas vu ce tuto là, je test et vous tiens au courant

Reply

Marsh Posté le 03-07-2014 à 09:24:16    

Voici le code que j'ai testé :

<!DOCTYPE html>
<html>
<head>

 

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/pikachoose/lib/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="js/pikachoose/lib/jquery.pikachoose.min.js"></script>
<script type="text/javascript" src="js/pikachoose/lib/jquery.touchwipe.min.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.fancybox.js"></script>
<link type="text/css" href="js/fancybox/jquery.fancybox.css" rel="stylesheet" media="screen" />
<link type="text/css" href="js/pikachoose/styles/base.css" rel="stylesheet" />

 

<script type="text/javascript">
$(document).ready(function(){
    var a = function(self){
        self.anchor.fancybox();
    };
    $("#pikame" ).PikaChoose({buildFinished:a});
});
</script>
</head>
<body>

 

<ul id="pikame">
    <li><a href="images/big/273-1.jpg"><img src="images/273-1.jpg"/></a></li>
    <li><a href="images/big/273-2.jpg"><img src="images/273-2.jpg"/></a></li>
    <li><a href="images/big/273-3.jpg"><img src="images/273-3.jpg"/></a></li>
</ul>

 

</body>
</html>


Ca fonctionne presque car les flèches n'apparaissent pas sur les images affichées par fancybox.
Pourtant l'option "showNavArrows" est à "true" par défaut comme indiqué dans la doc de fancybox.
Donc pour le moment je bloque à ce niveau.


Message édité par shivaia le 03-07-2014 à 09:24:45
Reply

Marsh Posté le 03-07-2014 à 12:46:21    

En fait je suis en train de me rendre compte que je ne dois pas avoir la librairie "jquery.fancybox.js".
Tu l'as téléchargé en même temps que les autres (je ne la vois pas dans leur archive)?

Reply

Marsh Posté le 03-07-2014 à 15:39:11    

C'est une librairie bien à part, il faut donc aller la chercher sur le net. Le site : http://fancybox.net

Reply

Marsh Posté le 03-07-2014 à 16:04:38    

Ok, donc je l'ai chargé. Par contre j'ai toujours mon souci d'affichage avec ce code la:

Code :
  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3.     var a = function(self){
  4.         self.anchor.fancybox();
  5.     };
  6.     $("#pikame" ).PikaChoose({buildFinished:a});
  7. });
  8. </script>

Ca m'affiche toutes les miniatures les unes en dessous des autres, au lieu de se limiter à trois et le carrousel ne fonctionne pas.
 
Alors que l'affichage du carrousel fonctionne bien, avec ce code:

Code :
  1. <script language="javascript">
  2. $(document).ready(function (){
  3.     $("#pikame" ).PikaChoose({carousel:true, carouselVertical:true});
  4.     });
  5. </script>

Je suis un peu perdu, vois tu d'où ca viendrait ?
 
Voilà ce que j'essaye de faire fonctionner:

Code :
  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <link href="style.css" rel="stylesheet" type="text/css">
  6.     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
  7.     <script type="text/javascript" src="lib/jquery.jcarousel.min.js"></script>
  8.     <script type="text/javascript" src="lib/jquery.pikachoose.min.js"></script>
  9.     <script type="text/javascript" src="lib/jquery.touchwipe.min.js"></script>
  10.     <script type="text/javascript" src="fancybox/jquery.fancybox.js"></script>
  11.     <link type="text/css" href="fancybox/jquery.fancybox.css" rel="stylesheet" media="screen" />
  12.     <link type="text/css" href="styles/right.css" rel="stylesheet" />
  14.     <script type="text/javascript">
  15.     $(document).ready(function(){
  16.         var a = function(self){
  17.         self.anchor.fancybox();
  18.         };
  19.     $("#pikame" ).PikaChoose({buildFinished:a});
  20.     });
  21. </script>
  22. </head>
  24. <body>
  25. <div id=contenu>
  26. <br><br><br><br>
  27.     <div class="pikachoose">
  28.         <ul id="pikame" class="jcarousel-skin-pika">
  29.             <li><a href="test/P1040388.jpg"><img src="pics/construction/P1040388.jpg"/></a></li>
  30.             <li><a href="test/P1060967.jpg"><img src="pics/construction/P1060967.jpg"/></a></li>
  31.             <li><a href="test/P1060612.jpg"><img src="pics/construction/P1060612.jpg"/></a></li>
  32.             <li><a href="test/P1060568.jpg"><img src="pics/construction/P1060568.jpg"/></a></li>
  33.             <li><a href="test/P1060281.jpg"><img src="pics/construction/P1060281.jpg"/></a></li>
  34.             <li><a href="test/P1060137.jpg"><img src="pics/construction/P1060137.jpg"/></a></li>
  35.             <li><a href="test/P1050993.jpg"><img src="pics/construction/P1050993.jpg"/></a></li>
  36.         </ul>
  37.     </div>
  38. </div>
  40. </body>
  41. </html>


Message édité par le petit nouveau le 03-07-2014 à 16:50:12
Reply

Marsh Posté le 03-07-2014 à 20:01:54    

Je ne vois pas le fichier pikachoose/styles/base.css dans ton code. Intègre le et ça devrait le faire.

Reply

Marsh Posté le 03-07-2014 à 20:01:54   

Reply

Marsh Posté le 03-07-2014 à 20:36:31    

Je viens de l'intégrer ... mais pas mieux.


Message édité par le petit nouveau le 04-07-2014 à 02:26:15
Reply

Marsh Posté le 03-07-2014 à 21:14:13    

Les liens vers jquery.fancybox.css et fancybox/jquery.fancybox.js vers ne sont pas correct

Reply

Marsh Posté le 03-07-2014 à 22:22:49    

Ok ... merci de ta patience, j'essayes tellement de modifier un peu partout pour trouver d'où vient le problème que j'en crée plus qu'autre chose !  
Ca commence à prendre forme ! la FancyBox fonctionne !
 
Je viens de retirer cette ligne:

Code :
  1. <link type="text/css" href="styles/base.css" rel="stylesheet" />

Je me suis aperçu qu'elle empirait le souci d'affichage sur mes miniature (elles empiettent sur la photo ...), j'ai bien fait ?
Quoi qu'il en soit, avec ou sans il m'affiche toujours plus de miniatures qu'il ne devrait (3 normalement).
 
Si j'osais abuser de ta patience, je te demanderais "Tu peux me dire si tu vois le truc qui cloche ?", mais j'ose à peine :)

Reply

Marsh Posté le 03-07-2014 à 23:06:30    

Ah ok vu, mais la c'est une option de pikachoose qu'il faut voir et là j'ai pas encore regardé comment cela fonctionne.
Il faut peut être jouer avec la taille du conteneur de ta galerie ? -> <div class="pikachoose">
Actuellement tu en es au même niveau que moi : impossibilité d'afficher les flèches de navigation de fancybox, seules celles de pikachoose sont présentes.


Message édité par shivaia le 03-07-2014 à 23:08:36
Reply

Marsh Posté le 03-07-2014 à 23:11:47    

Je viens de regarder la page principale de ton site et j'imagine que tu compte appliquer cette modif dessus ?
Si c'est le cas je pense que tu as juste à rajouter les appels à fancybox (javascript et CSS) et ajouter le bout de code JavaScript et normalement c'est tout.

Reply

Marsh Posté le 04-07-2014 à 00:10:53    

Ok alors merci pour ton aide. Ce qu'on peut faire, on étudie ca chacun de notre coté et celui qui trouve contacte l'autre ? (j'essaye de trouver avant toi, pour pouvoir t'aider a mon tour !!:) )
Bonne nuit et à bientôt !!

Reply

Marsh Posté le 04-07-2014 à 00:27:06    

Ca roule mais de mon côté y a rien d'urgent :)
a+

Reply

Marsh Posté le 05-07-2014 à 15:19:45    

Bon, je pense être sur la piste de notre problème : il semble qu'on ne passe qu'une seule image dans la fancybox.  
 
En regroupant les images dans la balise a par rel="groupe" par exemple,

Code :
  1. $("a[rel='groupe']" ).fancybox();

me donne bien la possibilité de naviguer entre les images dans la fancybox.

Reply

Marsh Posté le 05-07-2014 à 17:00:27    

Trouvé !! :)
Si tu veux tester chez toi :

Code :
  1. <script type="text/javascript">
  2. var fGallerie = []; // gallerie fancybox
  3. $(document).ready(function () {
  4.     var fancy = function (self) {
  5.     // Evenement clic
  6.         self.anchor.on("click", function(e){
  7.             // Rechereche de l'index de la miniature
  8.             var pIndex = $("#pikame" ).find("li.active" ).index();
  9.             // ouverture de la fancybox à l'index
  10.             $.fancybox(fGallerie ,{
  11.                 // options fancybox  
  12.                 "cyclic": true,
  13.                 "index": pIndex // index de debut
  14.             });
  15.             return false;
  16.         });
  17.     }
  18.     // groupe de la fancybox
  19.     $("#pikame" ).find("a" ).each(function(i){
  20.          // gallerie fancybox
  21.          fGallerie[i] = {"href" : this.href, "title" : this.title};
  22.     }).end().PikaChoose({
  23.         // options carousel
  24.         carousel:true, carouselVertical:true,
  25.         // liaison fancybox et carousel
  26.         buildFinished: fancy
  27.         });
  28.     });
  29. </script>

Ca à l'air de tourner correctement mais je teste encore ! (alors un peu d'indulgence dans le cas ou il y aurait des erreurs !! :))

Reply

Marsh Posté le 05-07-2014 à 17:04:26    

Bien joué, ça marche nickel chez moi aussi :-)
Merci pour la solution en tout  cas.


Message édité par shivaia le 05-07-2014 à 17:06:33
Reply

Marsh Posté le 05-07-2014 à 19:10:11    

Content de t'avoir rendu service à mon tour :)

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed