Combiner Slideshow et Lightbox

Impossible ?

Anonyme

13 juillet 2010 à 15:58:44

Salut à tous et à toutes !
Je viens en ces lieux, car cela fait maintenant... 2 ans ! Heu... jours... Que je m'obstine à essayer de combiner un Slideshow avec un Lightbox et... en vain.

J'ai commencé par essayé en SlideShow : Tiny Slide Show avec en Lightbox : LightboxV2 et Lightview. Rien n'y fait.
Je suis passé sous JQuery avec en SlideShow : Slideview avec en Lightbox : Fancybox et Prettyphoto. Rien n'y fait.

Alors ma question est simple, est-ce que quelqu'un aurait déjà combiné ces 2 types de scripts js ? Parce que perso... j'y arrive pas, surtout que mes connaissances en java sont loin d'être bonnes.

J'ai beau avoir chercher sur le net une solution, mais je ne trouve que des personnes dans le même cas que moi et n'ayant personne pour leur trouver une solution.

Ah et bien sûr, j'ai toujours installé le SlideShow en premier (qui marche nickel), puis la Lightbox (qui elle ne marche pas).

Merci d'avance pour vos réponses

miclebowski

13 juillet 2010 à 16:00:30

Salut, montre ce que tu inclus dans ta balise <head>, et mets aussi un exemple de la manière dont tu utilises les 2 plugins.

Après on avise

Anonyme

13 juillet 2010 à 16:09:21

Alors voici le head avec "Slideview" et "Fancybox"

<head>
        <title>Trukrone // my folio .webdesign</title>
	    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	    <meta name="title" content="Trukrone // my folio .webdesign" />
        <meta name="description" content="Trukrone's folio" />
        <meta name="keywords" content="trukrone, trukrone', tk, tk', folio, portfolio, graphisme, graphismes, graphiste, graphistes, infographie, infographies, infographistes, infographiste, webdesigner, webdesigners, logo, logos, webdesign, webdesigns, template, templates, graphique, graphiques, art, arts, digital, digitals, digital art, digital arts" />
        <meta name="author" content="Trukrone" />
        <meta name="language" content="fr" />
        <meta name="robots" content="all" />
        <link rel="stylesheet" media="screen" type="text/css" href="index.css" />
		<!--[if IE]> <link rel="stylesheet" type="text/css" href="./ie.css" /> <![endif]-->
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
		<script type="text/javascript" src="js/jquery.galleryview-2.1.1.js"></script>
		<script type="text/javascript" src="js/jquery.timers-1.2.js"></script>
		<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
		<script type="text/javascript" src="/fancybox/jquery.easing-1.3.pack.js"></script>
		<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
		<!-- InstanceBeginEditable name="head" -->
		<script type="text/javascript">
			$(document).ready(function(){
				$('#gallery').galleryView({
					panel_width: 630,
					panel_height: 220,
					frame_width: 100,
					frame_height: 40,
				});
			});
		</script>
		<!-- InstanceEndEditable -->
    </head>

Et toujours avec les mêmes plugins le body :

<div class="corps">
					<ul id="gallery">
						<li><a id="single_image" href="interfaces/ttm.jpg"><img src="interfaces/apercus/ttm.jpg" alt="Tutomania" /></a>
						
						</li>
						<li><img src="interfaces/apercus/thermetude.jpg" alt="Thermetude" />
						
						</li>
						<li><img src="interfaces/apercus/simpleblue.jpg" alt="Simple Blue" />
						
						</li>
						<li><img src="interfaces/apercus/foliov2.jpg" alt="Folio v2" />
						
						</li>
						<li><img src="interfaces/apercus/squad.jpg" alt="Squad Entertainment" />
						
						</li>
						<li><img src="interfaces/apercus/greenlabs.jpg" alt="GreenLabs" />
						
						</li>
						<li><img src="interfaces/apercus/iproject.jpg" alt="i-Project" />
						
						</li>
						<li><img src="interfaces/apercus/cjs.jpg" alt="Clan Jedi Sith" />
						
						</li>
						<li><img src="interfaces/apercus/foliov1.jpg" alt="Folio V1" />
						
						</li>
						<li><img src="interfaces/apercus/xtrem.jpg" alt="Xtrem Labs Games Studio" />
						
						</li>
						<li><img src="interfaces/apercus/webfile.jpg" alt="Webfile Edition" />
						
						</li>
						<li><img src="interfaces/apercus/junglegames.jpg" alt="Jungle Games" />
						
						</li>
						<li><img src="interfaces/apercus/several.jpg" alt="Several Dimension" />
						
						</li>
						<li><img src="interfaces/apercus/foliov0.jpg" alt="Folio V0" />
						
						</li>
					</ul>
				</div>

Et j'ai une page de test si tu veux, avec cette fois-ci "Tiny SlideShow" et "Lightview" que tu trouveras ici.

miclebowski

13 juillet 2010 à 16:15:30

Tu declares ou fancybox ? Il faudrait faire :

<script type="text/javascript">
	$(document).ready(function(){
		$('#gallery').galleryView({
			panel_width: 630,
			panel_height: 220,
			frame_width: 100,
			frame_height: 40,
		});

                $("a#single_image").fancybox();


                                 
	});
</script>

Anonyme

13 juillet 2010 à 16:18:42

J'avais déjà essayé, ça marchait pas :/ Et logiquement il y a pas besoin de ça en plus, vu qu'il est déclaré au-dessus.

miclebowski

13 juillet 2010 à 16:22:41

Si c'est nécessaire pour dire sur quels éléments fancybox va s'appliquer

Tu veux pas mettre ta page en ligne, ce sera bien plus simple pour voir le souci

Merci

Anonyme

13 juillet 2010 à 16:28:58

Avec Tiny Slide Show et Lightview elle est là :

http://tkarts.free.fr/folio

Quand tu cliques sur une image, elle apparait dans une fenetre vierge... :/

Si tu veux que je te le zip, hésites pas à demander

miclebowski

13 juillet 2010 à 16:32:45

On essaye de faire qqch avec Fancybox et Slideview, c'est ca qui m'intéresse, pas une solution que t'as abandonnée

Anonyme

13 juillet 2010 à 16:38:33

Ok ok, toutes façons si tu arrives à trouver le problème là, il doit être le même sur les autres à quelque chose près.

Voici le lien :

http://tkarts.free.fr/folio2

miclebowski

13 juillet 2010 à 16:53:12

Ca donne

<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.1.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.2.pack.js"></script>

Parce que la Fancybox n'est pas inclus

Anonyme

13 juillet 2010 à 16:58:49

En effet petit oubli

Mais ça marche pas quand même

J'ai réuploader les fichiers sur le même lien.

miclebowski

13 juillet 2010 à 17:03:14

Tu peux arreter le defilement automatique, parce que j'arrive pas a checker le code dans Firebug avec ca

Edit : T'as pas change le chemin sur les fichiers online

Anonyme

13 juillet 2010 à 17:18:52

Hmm... Quels fichiers ? Pcq je vois pas où xD

Défilement stopper

Mais ça a viré les frame du milieu du coup ^^"

MKBB

13 juillet 2010 à 17:40:56

En général, les slideshow réecrivent le code html.
Le problème des lightbox c'est qu'une fois initialisée au lancement si quelque chose change, elle fonctionnent plus, dans ton si le slideshow n'est pas fini d'initialiser quand le script de ta lightbox se lance, alors ça ne fonctionne pas.

Les lightbox possèdent habituellement une methode de forçage de réinitialisation (exemple pour Lightbox V2 c'est un truc genre initLightbox();) essaye de voir pour celle de fancybox

Anonyme

13 juillet 2010 à 17:44:48

Et c'est juste <body onload=initLightbox()">
qu'il faut mettre pour Lightbox V2 ?

Parce que j'avais essayé pour ce plugin en regardant "Support" sur leur site, et ça marchait pas, après j'ai peut-être pas écrit exactement ce qu'il fallait.

MKBB

13 juillet 2010 à 17:48:48

en fait le mieux serait que tu le mette juste apres avoir appelé ton slideshow.
Par contre si tu utilise LigthboxV2 je crois que tes <img> doivent avoir un attribut rel="..."

Anonyme

13 juillet 2010 à 18:07:18

Rien n'y fait pour Lightbox... :/

MKBB

15 juillet 2010 à 11:05:15

on peut revoir le code pour voir ou tu en es ?

miclebowski

15 juillet 2010 à 15:36:04

En tout cas sur http://tkarts.free.fr/folio2

les fichiers fancybox sont toujours mal inclus (ces / en trop au début

Anonyme

20 juillet 2010 à 21:01:54

Malheureusement j'en suis au même point :/

Anonyme

23 juillet 2010 à 11:14:47

Un petit up.

Et j'ai changé, c'est toujours sous jQuery, avec cette fois ci, Galleria en Slideshow, et toujours Fancybox en lightbox.
Cette fois ci, il n'y a aucune erreur Javascript...

Toujours disponible ici :
http://tkarts.free.fr/folio2

davinci

23 juillet 2010 à 16:32:20

Salut,

Je ne sais pas si ce document aidera à débloquer ta situation :
- Utiliser jQuery avec d'autres librairies sans conflit

Bonne prog...

French language was not found on this server.

Anonyme

23 juillet 2010 à 16:47:49

Non désolé ça ne m'aide pas vu que je n'ai utilisé que du jQuery :/

jabron2407

11 août 2010 à 0:21:10

Salut à vous tous

pour combiner un slideshow en flash avec une livebox, j'ai trouvé ça

Ca marche très bien, c'est stable, c'est facile à paramétrer. Une limite toutefois, le carousel en flash gère mal les images nombreuses avec les cartes vidéo peu performantes...

Cette petite (bien petite) contribution apportée, et qui n'a rien voir avec de la prog, j'en viens à mon problème... on va essayer d'expliquer clairement.

j'essaie d'adapter ces deux modules (carousel et lightbox) à une page générée en php (suite aux cours du sdz bien sur). Le php marche au poil, ce n'est pas un problème de prog que j'ai (pas encore) mais un problème de methode. Je m'explique

Ma page est générée par requète sur une bd mysql, Le serveur me renvoie une liste de différents produits ($id) (xhtml et css)
j'aimerais pouvoir lancer pour chaque produit d'abord le carousel puis de ce carousel les lightbox des photos correspondant au produit. euh c'est clair ?

Deux problèmes se posent, du même ordre.

1- pour générer le carousel

RESUME : depuis la page produit.php (que je ne vous met pas) un event js onClick sur une miniature appellela fonction newFlash() ci dessous, placée dans une autre page (carousel.js)

function newFlash(nom,sujet,id) { //v2.0

document.getElementById('diapo').style.visibility='visible';
document.getElementById('overlaydiapo').style.visibility='visible';




  swfobject.embedSWF(
	"carousel/Carousel.swf",  // flash file
	"mySlideShowDiv",   // div id
	"600", "400",  // width and height
	"9.0.0",       // flash palyer version
	false,         // autoinstall
    
	{xmlfile: 'listecarousel.php', loaderColor:"#CCCCCC"},  // flashvars

    {bgcolor: "#000000"},  // parameter
    {});                   // attributes


}

un flash s'ouvre dans une div diapo de la page produit.php.
l'url des images est listée dans listecarousel.xml dans le module d'origine, modifié comme ci dessous :

Le problème est le suivant : pour chaque produit les images sont différentes (of course) le.xml doit donc etre modifier en fonction du produit appellé. Je peux générer à part le .xml correspondant au produit par php (methode GET),pas en DOM :

C'est pour ça que le fichier qui apparait dans la fonction est listecarousel.php et non .xml. Il marche en 'manuel ' quand je copie colle le ficher ainsi généré avant de lancer le script

<?php

if (isset($_GET['sujet'])&& isset($_GET['id']))
{
$sujet=$_GET['sujet'];
$id=$_GET['id'];
}
else
{
$sujet='nager';
$id='33';
}

$chemin='../../images/photoContent/'.$sujet.'/'.$id.'/';
$anchor=1;



header('Content-Type: text/xml');
 
echo '<?xml version="1.0" encoding="iso-8859-1"?>';

echo '<slide_show>';

foreach(glob(''.$chemin.'*.{jpg,jpeg,JPG,JPEG,gif,GIF,png,PNG}',GLOB_BRACE) as $cle)

{
$cle=preg_replace('#\.\./\.\.#', '..', $cle);

echo '<photo href="javascript:aclick(\'anchor'.$anchor.'_id\')" target="_self">'.$cle.'</photo>';


$anchor ++;
}



echo "</slide_show>";


?>

Mais je ne sais pas du tout comment transmettre le GET à listecarousel.php dans la fonction swfobject.embedSWF ()

la methode

var xhr = getXMLHttpRequest(); // Voyez la fonction getXMLHttpRequest() définie dans la partie précédente

xhr.open("GET", "listebrozzi.php?sujet='sujet'&id='id'", true);
xhr.send(null);

est elle une bonne piste pour résoudre ça ?

2- pour attribuer les images lightboxées aux images du carousel,

cette compilation nécessite que soit placées dans la page produit.php les ancres idoines, dans une div masquée (css display:none;)

<div id="anchorsdiv">
<a id="anchor1_id" href="photos/image-1.jpg" rel="lightbox[set1]"><img src="photos/thumb-1.jpg" alt="photo1" /></a>
<a id="anchor2_id" href="photos/image-2.jpg" rel="lightbox[set1]"><img src="photos/thumb-2.jpg" alt="photo2" /></a>
<a id="anchor3_id" href="photos/image-3.jpg" rel="lightbox[set1]"><img src="photos/thumb-3.jpg" alt="photo3" /></a>
<a id="anchor4_id" href="photos/image-4.jpg" rel="lightbox[set1]"><img src="photos/thumb-4.jpg" alt="photo4" /></a>
</div>

et c'est pareil.

Comment mettre à jour dynamiquement les urls de cette div ? En effet si ge demnde au serveur de générer une div anchorsdiv par produit en php, la fonction qui balaie la page à la construction du swfobject ne prend que les trois, quatre premieres anchors dans la page parcourue de haut en bas. selon le nombre de photos qu'elle trouve dans le liste carousel.xml. on chope donc les ancres de la premiere div quelques soit le produit depuis lequel on a appelé le carousel.

function aclick(anchor_id) {
    var a = document.getElementById(anchor_id);
    mainLightbox.start(a);
}

Ma piste : génerer toutes les div en class="anchorsdiv" et id=$id (du produit bien sur) et ne lister que la div correspondant au produit.

Je suppose qu'il faut se placer dans la bonne div en DOM mais pas moyen de comprendre comment construire la var a a partir de cette div et non à partir de l'objet document.
Je patouille dans les childNodes mais surtout je ne suis absolument pas sur que c'est dans cette direction qu'il faille chercher !

PS je suis archi débutant en js. Completement amateur et autodidacte en web, Ca fait un an que je bosse le xhtml, css et php grâce et quasi exclusivement au sdz...c'est aussi mon premier post. Cela fait deux mois que je cale la dessus : Merci de votre aide !