Jquery implémentation de plugin

franck31 · 15/11/2011, 20h19

Bonjour, voila je suis en train de faire un dev et j'ai besoin pour cela de me servir d'un plugins jquery dans lequel je dois ajouter 3 fonctions.
Le souci est que ne connaissant pas bien je ne vois pas comment les implémenter. mon code php:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="myBook" style="display:none;">	 
    <?php
	    $sxml = simplexml_load_file("source.xml");
 
	$i = 0;
	foreach($sxml->data as $cle => $valu){
 
    	echo '<div class="imBookPage" style="background: url('.$valu->url.')" onclick="pag('.$i.');"></div>';
		$i++;
	}
 
	?>
    </div>

ce petit bout de code me génère mes pages pour un flippingbook.
jquery gère tout ce qui se passe dans la div myBook, les click sur les pages.
Ce que je dois ajouter c'est une barre de navigation qui permette de revenir au début ou d'aller à la fin, d'aller de page en page et de zoomer.
J'ai donc ajouté en dehor de ma div:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div id="nav">
    <a id="lienprec" onClick="$('#myBook').imBookFlip.prevPage();"><div class="flipbook_arrow_left"></div></a>
    <a id="liensui"onClick="$('#myBook').imBookFlip.nextPage();"><div class="flipbook_arrow_right"></div></a>
    <a id="ligbox"><div class="flipbook_btn_zoom"></div></a>
    </div>

Le problème que je rencontre est que si j'ajoute les fonction prevpage et nextpage dans le plugin l'alert me dit que ce n'est pas une fonction et la je bloque.
Si quelqu'un peut m'aider je vous fais passer les 2 fichiers, le jquery et le php complet au moins pour m'aiguiller.

Franck

SpaceFrog · 16/11/2011, 08h31

Et elle sont où les balises scripts de link vers la lib jquery et le plugin ?

Il doit s'agir d'ou souci de chronologie au niveau de l'implémentation

franck31 · 16/11/2011, 16h35

Le script js qui est bien appelé est:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
 
;(function($) {
	$.fn.extend({
        imBookFlip: function(options) { 
        	opts = $.extend({}, $.bookFlip.defaults, options);
			return this.each(function() {
				new $.bookFlip(this, opts);
			});
        }
    });	
 
$.bookFlip = function(obj, opts) {
	var $this = $(obj);
	var numPages = 0;
	var leftStart=0,rightStart=1;
	var autoPage = 0;
	var page, book, bW, pageW, pageH, bookOpenW = '';
 
	if (opts.sound_manager) {
		loadAudio();
	}
 
	if (opts.iframe.src) {
		loadIFrame();
	} else {
		page = $('.'+opts.page_class)[0];
		init();
	}
 
	function loadIFrame() {
		var iframe = $this.append($('<iframe src="'+opts.iframe.src+'" id="bookFlipIframe" name="bookFlipIframe"></iframe>').css({"width":$this.width(), "height": $this.height(), "border": "0px", "overflow":"hidden"}));
		$('#bookFlipIframe').load(function() {
			book = $('#bookFlipIframe').contents().find('#'+opts.iframe.book);
			page = $('#bookFlipIframe').contents().find('.'+opts.page_class)[0];
			init();	
		});		
	};
 
	function init() {
		bW = parseInt($(page).css('borderLeftWidth')) + parseInt($(page).css('borderRightWidth'));
		pageW = parseInt($(page).css('width')) + bW;
		pageH = parseInt($(page).css('height')) + bW;
		bookOpenW = pageW*2;
 
		//var showBinder=false; //change to false for no binder
		//var binderImage = "parchmentring2.gif"; //location of center binder
		//var binderWidth = 20; //width of center binder image		
 
		if(opts.numPixels>100){opts.numPixels=100;};
		createPages();	
	};
 
	function loadAudio() {
		var ld = (opts.autoFlip != 'click');
		var dbg = false;
		if (opts.sound_manager.debug) {
			dbg = opts.sound_manager.debug;
		}
		soundManager.url = opts.sound_manager.swf_loc;
		soundManager.debugMode = dbg;
		soundManager.onload = function() {
			// soundManager is initialised, ready to use. Create a sound for this demo page.
			soundManager.createSound({
				id: 'bookAudio',
				url: opts.sound_manager.audio_loc,
				autoLoad: true,
				autoPlay: ld
			});
		}
	};
 
	function createPages() {
		var pages;
		if (opts.iframe.src) {
			$this = $(book);
			pages = $this.find(' > div');
		} else {
			var bk = $this.attr('id');
			pages = $('#'+bk + ' > div');	
		}
		$this.css({'width': (bookOpenW + 'px'), 'height': pageH+'px', 'zIndex':0});
		$(pages).each(function(i) {
			numPages++;
			var orig = $(this).clone();
			var div = $('<div></div>').attr({'id': 'pageNum'+i, 'class': opts.page_class}).css({'zIndex':20-i, 'border': 'none', 'left': pageW+'px', 'width': pageW+'px', 'height': pageH+'px'});
			$(this).replaceWith(div);
			$(orig).attr('id', 'pageFlip'+i);
			/*if(!number_check(i)){
				if(document.all){
					$(orig).css('filter', 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100, FinishOpacity=30, Style=1, StartX=80, FinishX=100, StartY=0, FinishY=0)');
				}else{
					var pngDiv = $('<div></div>').css({'position': 'absolute', 'left':pWidth-80+'px', 'top':'0px', 'width':80+'px', 'height': pHeight+'px', 'background': 'transparent url(bookflip/black_gradient.png) top right repeat-y'}).appendTo($(orig));
				}			
			}*/
			$(div).append($(orig));
			if(opts.allowPageClick){
				$(orig).click(function() {
					if(number_check(i)){
						soundCheck();
						nextPage();
					} else {
						prevPage();
					}
				});
			}
		});
		$this.css('display', 'block');
		if (opts.autoFlip == 'auto') {
			doAutoFlip();
		}
	};
 
	function doAutoFlip() {
		if (rightStart < numPages) {
			autoPage = setTimeout(nextPage, opts.autoFlipSpeed);
		} else {
			clearTimeout(autoPage);
		}
	};
 
	function soundCheck() {
		if ((opts.sound_manager) && (rightStart == 1)) {
			if (opts.autoFlip == 'click') {
				soundManager.play('bookAudio');
			}
		}
	};
 
	function number_check(value) {
		//  returns true if value is even, false if value is odd
		return ( 1 - (value%2) ); 
	};
 
	function nextPage(){
		var page = (opts.iframe.src) ? $this.find("#pageNum"+rightStart) : $("#pageNum"+rightStart);
		var lpage = (opts.iframe.src) ? $this.find("#pageNum"+leftStart) : $("#pageNum"+leftStart);
		$(page).css({'width': '0px', 'left': bookOpenW +'px', 'zIndex': 99});
		$(page).animate({'left': 2+'px', 'width': pageW+'px'}, 'slow', function() {
			$(lpage).css({'width': '0px'});
			var z = $(this).css('zIndex');
			$(this).css({'left': '0px', 'width': pageW+'px', 'zIndex': z-99});
			$(lpage).css({'left': '', 'right': '0px'});
			$(this).css({'left': '', 'right': '0px'});
			leftStart=leftStart+2;
			rightStart=rightStart+2;
			if (opts.autoFlip != 'off') {
				doAutoFlip();
			}
		});
	};
 
	function prevPage(){
		leftStart=leftStart-2;
		rightStart=rightStart-2;
		var page = (opts.iframe.src) ? $this.find("#pageNum"+leftStart) : $("#pageNum"+leftStart);
		var rpage = (opts.iframe.src) ? $this.find("#pageNum"+rightStart) : $("#pageNum"+rightStart);
		var pFlipL = (opts.iframe.src) ? $this.find("#pageFlip"+leftStart) : $("#pageFlip"+leftStart);
		var pFlipR = (opts.iframe.src) ? $this.find("#pageFlip"+rightStart) : $("#pageFlip"+rightStart);
		$(page).css({'width': '0px', 'left': '0px'});
		$(pFlipR).css({'left': '', 'right': '0px'});
		$(page).animate({'left': pageW+'px', 'width': pageW+'px'}, 'slow', function() { 
			$(rpage).css({'width': '0px'});
			$(pFlipR).css({'left': '0px'});
			$(pFlipL).css({'left': '0px'});
		});
	};
 
 
 
};
 
 
 
$.bookFlip.defaults = {
	allowPageClick: true,
	autoFlip: 'off', //auto, click
	autoFlipSpeed: 8000,
	numPixels: 20, //number of pixels to move per frame, more is faster but less smooth
	pSpeed: '20', //page speed, 20 is best for Opera browser. Less is faster
	page_class: '',
	sound_manager: '', // {swf_loc: 'soundmanager/soundmanager2.swf', audio_loc: '', debug: false}
	iframe: '' //{src: 'test_bookflip3_iframe.html', book: 'myBook'}
};
})(jQuery);

Au niveau de ma page html j'ai:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type="text/javascript">
	/*$(document).ready( function() {
		$("#iframeCntnr").imBookFlip({
			page_class: 'imBookPage',
			iframe: {src: 'http://grasshopperpebbles.com/demos/assets/iframesrc/book.php', book: 'myBook'}
		});
	});	*/
 
	$(document).ready( function() {
	$("#myBook").imBookFlip({
		page_class: 'imBookPage'
	});
});
 
function pag(name){
	var nom = parseInt(name) + 1;
	//alert(nom);
	$('#liensui').attr('onclick', 'visu('+nom+');');
}
function visu(nom){
	nextPage();
}
</script>

ma page html est construite comme ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="content">
<div id="myBook" style="display:none;">	
 
    <div class="imBookPage" style="background: url(bonpdf/thumbs/MAQUETTE-BAT-simple-page-1.jpg)" onclick="pag(0);">
</div><div class="imBookPage" style="background: url(bonpdf/thumbs/MAQUETTE-BAT-simple-page-2.jpg)" onclick="pag(1);"></div>
<div class="imBookPage" style="background: url(bonpdf/thumbs/MAQUETTE-BAT-simple-page-3.jpg)" onclick="pag(2);">
</div><div class="imBookPage" style="background: url(bonpdf/thumbs/MAQUETTE-BAT-simple-page-4.jpg)" onclick="pag(3);"></div><div class="imBookPage" style="background: url(bonpdf/thumbs/MAQUETTE-BAT-simple-page-5.jpg)" onclick="pag(4);"></div><div class="imBookPage" style="background: url(bonpdf/thumbs/MAQUETTE-BAT-simple-page-6.jpg)" onclick="pag(5);"></div><div class="imBookPage" style="background: url(bonpdf/thumbs/MAQUETTE-BAT-simple-page-7.jpg)" onclick="pag(6);"></div><div class="imBookPage" style="background: url(bonpdf/thumbs/MAQUETTE-BAT-simple-page-8.jpg)" onclick="pag(7);"></div><div class="imBookPage" style="background: url(bonpdf/thumbs/MAQUETTE-BAT-simple-page-9.jpg)" onclick="pag(8);"></div><div class="imBookPage" style="background: url(bonpdf/thumbs/MAQUETTE-BAT-simple-page-10.jpg)" onclick="pag(9);"></div><div class="imBookPage" style="background: url(bonpdf/thumbs/MAQUETTE-BAT-simple-page-11.jpg)" onclick="pag(10);"></div><div class="imBookPage" style="background: url(bonpdf/thumbs/MAQUETTE-BAT-simple-page-12.jpg)" onclick="pag(11);"></div>
   <div style="clear:both">&nbsp;</div>
 
    </div>
 
    <div id="nav">
    <a id="lienprec" onClick="$('#myBook').imBookFlip.prevPage();"><div class="flipbook_arrow_left"></div></a>
    <a id="liensui" onClick="visu(1);"><div class="flipbook_arrow_right"></div></a>
    <a id="ligbox"><div class="flipbook_btn_zoom"></div></a>
 
    </div>
</div>

Voila tout le code. Au départ je voulais mettre l'id nav dans le contener du flippingbook pour me servir directement de nextPage et prevPage mais le javascript me modifi l'id ce qui fait qu'il ne fonctionne pas.

SpaceFrog · 16/11/2011, 16h49

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

;(function($)

franck31 · 16/11/2011, 17h15

ça change rien le fait de le retirer.
J'ai toujours cela quoique je fasse: nextPage is not defined

Je débute en javascript et je dois dire que pour l'instant je saisi pas tout.

franck31 · 25/11/2011, 14h20

Voila je reviens sur ce topic car j'ai un peu avancé mais je me retrouve bloqué sur ie.
Pour pouvoir naviguer en plus du click sur les pages, le faire par la barre d'id nav, j'ai ajouté ceci dans mon code html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
function pag(name){
	var nom = parseInt(name) + 1;
	/*if(name == 0){
		$('#myBook2').css('display', 'block');
 
	}
	if(name == 1){
		$('#myBook2').css('display', 'none');
 
	}*/
	alert(nom);
	$('#liensui').removeAttr("onClick");
	$('#liensui').attr('onClick', 'visu('+nom+');');
}
 
function visu(nom){
	//$("#myBook").imBookFlip.nextPage();
	//var $this = $(obj);
	alert(nom);
	var numPages = 0;
	if(number_check(nom)){ var name = parseInt(nom)-1;}else{ var name = parseInt(nom);}
	var leftStart=parseInt(name)-1,rightStart= parseInt(name);
	var autoPage = 0;
	var page, book, bW, pageW, pageH, bookOpenW = '';
	bW = parseInt($(page).css('borderLeftWidth')) + parseInt($(page).css('borderRightWidth'));
		pageW = parseInt($(page).css('width')) + bW;
		pageH = parseInt($(page).css('height')) + bW;
		bookOpenW = pageW*2;
 
		var page = $("#pageNum"+rightStart);
		var lpage =  $("#pageNum"+leftStart);
		$(page).css({'width': '0px', 'left': bookOpenW +'px', 'zIndex': 99});
		$(page).animate({'left': 2+'px', 'width': pageW+'px'}, 'slow', function() {
			$(lpage).css({'width': '0px'});
			var z = $(this).css('zIndex');
			$(this).css({'left': '0px', 'width': pageW+'px', 'zIndex': z-99});
			$(lpage).css({'left': '', 'right': '0px'});
			$(this).css({'left': '', 'right': '0px'});
			leftStart=leftStart+2;
			rightStart=rightStart+2;
			pag(nom+1);
		});
}
 
function number_check(value) {
		//  returns true if value is even, false if value is odd
		return ( 1 - (value%2) ); 
	}

Ceci sous chrome et firefox me permet de naviguer vers la droite mais sous ie j'ai un blockage jquery sur jquery.1.3.2.min.js qui est:
Argument non valide. pour:if(L){J[G]=K}return J[G]}

D'ou vient le problème d'après vous?

Pour y voir mieux le lien de la page:
lien

16/11/2011, 08h31	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 057 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 057 Points : 45 176 Points : 45 176	Et elle sont où les balises scripts de link vers la lib jquery et le plugin ? Il doit s'agir d'ou souci de chronologie au niveau de l'implémentation __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

16/11/2011, 16h49	#4
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 057 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 057 Points : 45 176 Points : 45 176	Code : Sélectionner tout - Visualiser dans une fenêtre à part ;(function($) __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

16/11/2011, 17h15	#5
franck31 Membre régulier franck franck Développeur Web Inscription : mai 2010 Messages : 98 Détails du profil Informations personnelles : Nom : franck franck Localisation : France Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : mai 2010 Messages : 98 Points : 91 Points : 91	ça change rien le fait de le retirer. J'ai toujours cela quoique je fasse: nextPage is not defined Je débute en javascript et je dois dire que pour l'instant je saisi pas tout.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email