jQuery.ScrollTo et Fancybox

Version imprimable

Bonsoir à tous,
Je réalise en ce moment un site avec le jQuery : ScrollTo. Ça fonctionne terriblement bien. Seul HIC, dans un <div> , je désire faire un diaporama avec l'aide de fancybox.
Et depuis ce diaporama, les effets de ScrollTo ne sont plus fonctionnels :( Y-a t'il conflit ou est-ce uniquement une questions d'emplacement des scripts ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
   	<script src="js/jquery.js" type="text/javascript"></script><!-- Insertion de la bibliotheque jQuery -->
	<script type="text/javascript" src="js/localscroll/jquery.localscroll.js"></script>
	<script type="text/javascript" src="js/localscroll/jquery.scrollTo.js"></script>    
	<script type="text/javascript" src="js/lancement.js"></script><!-- permet le lancement de la fonction de scroll -->
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/antic:n4:default;actor:n4:default;poiret-one:n4:default;alfa-slab-one:n4:default;anonymous-pro:n4:default;inconsolata:n5:default.js" type="text/javascript"></script>
	<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 ? ' &nbsp; ' + title : '') + '</span>';
				}
			});
 
			$('#LienIframe').fancybox({
				'width' : '75%',
				'height' : '75%',
				'autoScale' : false,
				'transitionIn' : 'none',
				'transitionOut' : 'none',
				'type' : 'iframe'
			});
		});
	</script>

En vous remerciant pour votre aide.
Bonne soirée,
dh

30/12/2014, 12h18
vandenn3

Salut,
Je viens de voir que tu insère 2 fois la bibliothèque jquery. Quelle est la version du premier 'js/jquery.js' ?
Est-ce que tout ton code fonctionne si tu supprime js/jquery.js et que tu met l'autre jquery (fancybox/jquery-1.4.3.js) à la place de l'ancien (donc ce sera le premier de la liste des scripts) ?
30/12/2014, 21h25
dhillig

C'EST PAS POSSIBLE !!!

Je n'y crois... je n'y crois pas... JE N'Y CROIS PAS !!!! CA MARCHE !!! CLASSE !!! Et moi, ce soir, désespéré : "bah, on va essayer ce que dit vandenn3, ça coute rien". Ça coute rien mais ça rapporte !!!
J'étais persuadé qu'il avait conflit !!! Et pourquoi cela marche t'il en mettant le fancybox - jquery-1.4.3.js en premier ??? Tu peux le dire au monsieur ? ;)
MERCI vandenn3 !!! Par contre, je ne vois pas où est le doublon de biblio JQuery :/
Bon depuis que je suis sur ce site, je ne cesse de faire, refaire défaire et rerefaire ! C'est énervant (et il ne faut pas avoir peur de passer pour un crétin), mais comme j'ai eu l'occasion de le dire à NoSmoking, c'est ne pas céder à la facilité d'un Wordpress et donc la volonté d'apprendre :D
ENCORE MERCI A TOI (BRAVO !!!) ET AUX AUTRES (NOSMOKING, RYAN ETC...) QUI ME PERMETTENT D'AVANCER !!!!!!
Bonne soirée !!!!
dh

Super ! :)

première ligne de ton code:
Code:

1 2 3 4 <script src="js/jquery.js" type="text/javascript"></script> une version de jquery (je ne sais pas laquelle) plus tard dans le code, tu insère la version 1.4.3: <script type="text/javascript" src="fancybox/jquery-1.4.3.js"></script>
tu insère donc 2 fois la bibli dans ton code. il faut donc supprimer un des 2 :) de préférence celui dont la version est la plus ancienne

30/12/2014, 21h50
dhillig

J'ai compris !!! :D THX !!!
Bonne soirée et bonnes fêtes de fin d'année !!!
GREAT !!!

Bonjour à tous,
Je me permets de relancer la discussion car j'ai de nouveau le même soucis (qq chose a du m'échapper :calim2: )
J'ai préféré attaquer deux pages, une avec ScrollTo et la seconde avec Fancybox et Isotope. Au final, j'ai incorporé la "page" Fancybox/Isotope dans la page ScrollTo.
Et depuis, impossible de faire fonctionner Fancybox avec ScrollTo, c'est (selon la biblio) l'un ou l'autre :?
Le head de la page Fancybox/Isotope :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript" src="lib/jquery-1.10.1.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen" />
<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<!-- Add Thumbnail helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script src="http://isotope.metafizzy.co/beta/isotope.pkgd.js"></script>
<script src="http://isotope.metafizzy.co/beta/bower_components/classie/classie.js"></script>

Le head de la page Scrollto :

Code:

1
2
3
4
5
6
7
8
9
10
11
<script src="js/jquery.js" type="text/javascript"></script><!-- Insertion de la bibliotheque jQuery -->
<script type="text/javascript" src="js/localscroll/jquery.localscroll.js"></script>
<script type="text/javascript" src="js/localscroll/jquery.scrollTo.js"></script>    
<script type="text/javascript" src="js/lancement.js"></script><!-- permet le lancement de la fonction de scroll -->
<link href='http://fonts.googleapis.com/css?family=Roboto:100,300' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script src="http://isotope.metafizzy.co/beta/isotope.pkgd.js"></script>
<script src="http://isotope.metafizzy.co/beta/bower_components/classie/classie.js"></script>

Avec le head suivant, je n'ai plus de ScrollTo

Code:

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript" src="lib/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/lancement.js"></script><!-- permet le lancement de la fonction de scroll -->
<script type="text/javascript" src="js/localscroll/jquery.localscroll.js"></script>
<script type="text/javascript" src="js/localscroll/jquery.scrollTo.js"></script>    
<script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Roboto:100,300' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script src="http://isotope.metafizzy.co/beta/isotope.pkgd.js"></script>
<script src="http://isotope.metafizzy.co/beta/bower_components/classie/classie.js"></script>

Et avec ce head, plus de Fancybox

Code:

1
2
3
4
5
6
7
8
9
10
11
<script src="js/jquery.js" type="text/javascript"></script><!-- Insertion de la bibliotheque jQuery -->
<script type="text/javascript" src="js/localscroll/jquery.localscroll.js"></script>
<script type="text/javascript" src="js/localscroll/jquery.scrollTo.js"></script>    
<script type="text/javascript" src="js/lancement.js"></script><!-- permet le lancement de la fonction de scroll -->
<link href='http://fonts.googleapis.com/css?family=Roboto:100,300' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script src="http://isotope.metafizzy.co/beta/isotope.pkgd.js"></script>
<script src="http://isotope.metafizzy.co/beta/bower_components/classie/classie.js"></script>

Dans ce dernier code, si je supprime

Code:

<script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.5"></script>

le scroll fonctionne mais ma barre de navigation n'est plus fixe.
et en supprimant

Code:

<script src="js/jquery.js" type="text/javascript"></script>

, plus d'effet ascenseur ni de barre de navigation lors d'un clic.
D'où plusieurs bibliothèques. Je jongle depuis un moment avec les sources je ne trouve pas la solution. :calim2:
Quelqu'un aurait une idée du conflit ?
Merci pour votre aide et bonne après-midi,
dh

La bonne solution ?

Bonjour à tous,
Après avoir tout tenté avec les bibilos; et aucun lien/ancre interne n'étant fonctionnel, je me suis dit qu'il fallait chercher ailleurs :oops:
Avec cette partie du <head>

Code:

1
2
3
4
5
6
7
8
9
10
11
	<script type="text/javascript" src="lib/jquery-1.10.1.min.js"></script>
	<script type="text/javascript" src="js/localscroll/jquery.localscroll.js"></script>
	<script type="text/javascript" src="js/localscroll/jquery.scrollTo.js"></script>    
	<script type="text/javascript" src="js/lancement.js"></script><!-- permet le lancement de la fonction de scroll -->
	<script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.5"></script>
	<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen" />
	<link href='http://fonts.googleapis.com/css?family=Roboto:100,300' rel='stylesheet' type='text/css'>
	<script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
	<script type="text/javascript" src="source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
	<script src="http://isotope.metafizzy.co/beta/isotope.pkgd.js"></script>
	<script src="http://isotope.metafizzy.co/beta/bower_components/classie/classie.js"></script>

Est-il correct ???
Et ce simple code :

Code:

1
2
3
4
5
6
7
8
	$('a[href^="#"]').click(function(){
	var the_id = $(this).attr("href");
 
	$('html, body').animate({
		scrollTop:$(the_id).offset().top
	}, 'slow');
	return false;
});

Tout fonctionne !!! Maintenant, est-ce la meilleure façon de procéder ?
Bonne fin de journée à vous,
dh