Combiner un Slideshow et une Lightbox

Bonjour tout le monde.
Alors depuis deux jours je suis en train de chercher une façon de comprendre pourquoi mon Slideshow et ma Lightbox ne fonctionnent pas ensemble.

J'ai premièrement utilisé TinySlideShow avec Lightbox2 puis avec Lightview.
J'ai ensuite utilisé Slideview avec Fancybox puis avec Prettyphoto. (jQuery pour les 3 derniers)

A mon grand bonheur, je trouve ceci :

http://www.alsacreations.com/astuce/lire/79-comment-lancer-plusieurs-fonctions-au-chargement-dune-page.html

Qui est un de vos articles, mais je ne vois pas comment l'utiliser avec mon code, surtout à cause du Slideshow. Je souhaite réutiliser ma première initiative soit "TinySlideShow" avec "Lightbox2" mais, je ne vois pas comment je peux utiliser l'initialisation de TinySlideShow vu que c'est un "amas" de choses, et que niveau javascript je n'y connais pas grand chose...

Donc je vous laisse voir par vous-même en espérant que vous pourrez m'aider.

Code obfusqué

Pour l'initialisation de la Lightbox c'est : "initLightbox();"
Et si vous voulez voir le problème que ça donne c'est sur mon domaine où je fais mes essais :
http://tkarts.free.fr/folio

Je vous remercie d'avance pour votre gentillesse à m'aider !
Modifié par Trukrone (15 Jan 2017 - 16:10)

C'est toujours une source d'ennui d'utiliser des librairies différentes, et souvent non-compatibles entre elles. Tu devrais faire le choix d'une librairie (jQuery, prototype, Dojo, Yahoo, etc… ) et regarder si des modules existants correspondraient à tes besoins.

Via jQuery, j'ai utilisé sans problème un slideshow et une modalbox (FancyBox) :
http://www.trivandanam.net/seb/v5/#portfolio

Trukrone a écrit :
Justement les deux derniers que j'ai essayé sont des ensembles avec jQuery

Ah ok, car dans ta démo tu utilisais deux librairies différentes, mais en regardant les specs de LightView, je viens de me rendre compte qu'il nécessite les deux librairies. Par contre, tu utilises aussi TinySlideShow qui peut être source de conflit avec les librairies chargées.

D'ailleurs, dès la mise en place (excessivement longue) du slideshow sur ton exemple, une erreur est renvoyée :

Erreur : element is null
Fichier Source :  http://tkarts.free.fr/folio/js/prototype.js
 
Ligne : 4619

Sinon, j'ai regardé un peu slideview, et même dans la page de démo de son développeur, c'est pas terrible et ça déconne pas mal (il zappe des images en avant et en arrière). Parfois, il vaut mieux créer ses propres scripts : jQuery est par exemple assez flexible pour permettre la création d'effets et d'actions simples.
Par contre, pour une modalbox je te conseille FancyBox. PrettyPhoto est bien aussi, mais j'ai du utiliser une version modifiée pour la rendre compatible avec jQuery 1.4.2…

ZeB_panam a écrit :

D'ailleurs, dès la mise en place (excessivement longue) du slideshow sur ton exemple, une erreur est renvoyée :

Erreur : element is null
Fichier Source :  http://tkarts.free.fr/folio/js/prototype.js
 
Ligne : 4619

Il n'y a que 4221 lignes dans ce script... Comment est-ce possible ??? :o

J'ai mis une demo avec Slideview et Fancybox ici si tu le souhaites :
http://tkarts.free.fr/folio2

Ce qui m'embete c'est que je n'ai trouvé que ces deux scripts là qui correspondent à mes attentes...

Hmm... donc selon toi, le seul moyen de réussir à combiner un slideshow et une lightbox, serait que je fasse mon propre script ?

Trukrone a écrit :

Hmm... donc selon toi, le seul moyen de réussir à combiner un slideshow et une lightbox, serait que je fasse mon propre script ?

Non, puisque j'ai utilisé deux plug-in pour le faire (voir le lien de mon portfolio que je t'ai mis un peu plus haut…).


Sinon, dans ta démo tu appelles plusieurs fois les mêmes scripts :

<!-- celui-ci -->
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/fancybox/jquery.easing-1.3.pack.js"></script>
<!-- et celui-ci aussi -->
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.1.js"></script>

Du coup, ça renvoie une erreur :
(j'ai testé chez moi, l'appel au script ne comporte pas d'erreur, c'est donc bien un conflit)

Erreur : showItem is not defined
Fichier Source :  http://tkarts.free.fr/folio2/js/jquery.galleryview-2.1.1.js
 
Ligne : 637

Et il n'y a pas que 4221 lignes dans prototype.js, mais 4874… Mais peu importe la ligne renvoyée, c'est le conflit de script qui fait planter prototype.js.
Tu devrais installer Firebug et WebDeveloper pour debugger, ce sera plus simple pour toi.

J'ai réessayé sous jQuery avec un autre Slideshow appelé "Galleria", et la lightbox "Fancybox".

Cette fois-ci je n'ai aucune erreur javascript, vérifié avec Firebux et Webdevelopper.
Et je n'arrive pas à cliquer sur l'image pour l'agrandir, l'aurais-je mis au mauvais endroit ?

Je l'ai uploader ici : http://tkarts.free.fr/folio2

Et voici le code :

Code obfusqué.

Modifié par Trukrone (15 Jan 2017 - 16:11)