[Résolu] Carrousel + vignette + zoom fancybox

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [Résolu] Carrousel + vignette + zoom fancybox

shivaia

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

Publicité

Profil supprimé

bonjour,

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

shivaia

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

le petit nouveau

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

shivaia

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

shivaia

Voici le code que j'ai testé :

<!DOCTYPE html>
<html>
<head>

</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

le petit nouveau

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

shivaia

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

le petit nouveau

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

Code :

<script type="text/javascript">
$(document).ready(function(){
var a = function(self){
self.anchor.fancybox();
};
$("#pikame" ).PikaChoose({buildFinished:a});
});
</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 :

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

Je suis un peu perdu, vois tu d'où ca viendrait ?

Voilà ce que j'essaye de faire fonctionner:

Code :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="lib/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="lib/jquery.pikachoose.min.js"></script>
<script type="text/javascript" src="lib/jquery.touchwipe.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.js"></script>
<link type="text/css" href="fancybox/jquery.fancybox.css" rel="stylesheet" media="screen" />
<link type="text/css" href="styles/right.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function(){
var a = function(self){
self.anchor.fancybox();
};
$("#pikame" ).PikaChoose({buildFinished:a});
});
</script>
</head>
<body>
<div id=contenu>
<br><br><br><br>
<div class="pikachoose">
<ul id="pikame" class="jcarousel-skin-pika">
<li><a href="test/P1040388.jpg"><img src="pics/construction/P1040388.jpg"/></a></li>
<li><a href="test/P1060967.jpg"><img src="pics/construction/P1060967.jpg"/></a></li>
<li><a href="test/P1060612.jpg"><img src="pics/construction/P1060612.jpg"/></a></li>
<li><a href="test/P1060568.jpg"><img src="pics/construction/P1060568.jpg"/></a></li>
<li><a href="test/P1060281.jpg"><img src="pics/construction/P1060281.jpg"/></a></li>
<li><a href="test/P1060137.jpg"><img src="pics/construction/P1060137.jpg"/></a></li>
<li><a href="test/P1050993.jpg"><img src="pics/construction/P1050993.jpg"/></a></li>
</ul>
</div>
</div>
</body>
</html>

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

shivaia

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

Publicité

le petit nouveau

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

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

shivaia

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

le petit nouveau

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 :

<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

shivaia

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

shivaia

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.

le petit nouveau

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 !!

shivaia

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

le petit nouveau

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 :

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

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

le petit nouveau

Trouvé !!
Si tu veux tester chez toi :

Code :

<script type="text/javascript">
var fGallerie = []; // gallerie fancybox
$(document).ready(function () {
var fancy = function (self) {
// Evenement clic
self.anchor.on("click", function(e){
// Rechereche de l'index de la miniature
var pIndex = $("#pikame" ).find("li.active" ).index();
// ouverture de la fancybox à l'index
$.fancybox(fGallerie ,{
// options fancybox
"cyclic": true,
"index": pIndex // index de debut
});
return false;
});
}
// groupe de la fancybox
$("#pikame" ).find("a" ).each(function(i){
// gallerie fancybox
fGallerie[i] = {"href" : this.href, "title" : this.title};
}).end().PikaChoose({
// options carousel
carousel:true, carouselVertical:true,
// liaison fancybox et carousel
buildFinished: fancy
});
});
</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 !! )

shivaia

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

le petit nouveau

Content de t'avoir rendu service à mon tour

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

[Résolu] Carrousel + vignette + zoom fancybox

Sujets relatifs
Menu CSS bouge si changement de résolution d'écran ou zoom	Problème zoom sur focus champ IOS7 solutions ou pas ?
Zoom décalé au survol	Intégrer une page GLPI + zoom
carrousel d'images avec vignettes qui défilent automatiquement	Fancybox > problème flèche
Problème carrousel	Placement image lors d'un zoom, Chrome
carrousel d'images avec vignettes qui défilent	[Pb] Affichage d'un menu avec un effet carrousel
Plus de sujets relatifs à : [Résolu] Carrousel + vignette + zoom fancybox

Page générée en 0.095 secondes