Problème dans Turn.js

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
Horace
Messages : 10
Enregistré le : 29 avr. 2019, 11:00

Problème dans Turn.js

Message par Horace » 30 avr. 2019, 19:15

Bonjour,
Je suis nouveau sur ce site. et nouveau en JS, mais un peu moins nouveau dans la vie (75 ans !)
J'utilise un code js tous fait, trouvé dans Turn.js/samples/magazine, le tout téléchargeable sur www.trunjs.com.
Ca marche très bien, mais vous savez ce que c'est, on en veut toujours plus !
L'exemple magazine affiche des pages qui sont des fichiers image .jpg
Je voudrai afficher pareil mais des pages html
Ici, le code dans magazine.js :

Code : Tout sélectionner


 * Magazine sample

function addPage(page, book) {

	var id, pages = book.turn('pages');

	// Create a new element for this page
	var element = $('<div />', {});

	// Add the page to the flipbook
	if (book.turn('addPage', element, page)) {

		// Add the initial HTML
		// It will contain a loader indicator and a gradient
		element.html('<div class="gradient"></div><div class="loader"></div>');

		// Load the page
		loadPage(page, element);
	}

}

function loadPage(page, pageElement) {

	// Create an image element

	var img = $('<img />');

	img.mousedown(function(e) {
		e.preventDefault();
	});

	img.load(function() {
		
		// Set the size
		$(this).css({width: '100%', height: '100%'});

		// Add the image to the page after loaded

		$(this).appendTo(pageElement);

		// Remove the loader indicator
		
		pageElement.find('.loader').remove();
	});

	// Load the page

	img.attr('src', 'pages/' +  page + '.jpg');

	loadRegions(page, pageElement);

}
Voir aussi dans magazine/index.html.
Quelqu'un aurait-il la patience de crocher dans ce code et de me donner une idée ?
Merci d'avanc
H.

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Problème dans Turn.js

Message par webmaster » 10 mai 2019, 10:54

Bonjour,

Une page HTML peut être affichée dans un objet iframe
Le script peut être adaptée pour remplacer la création de l'image par une iframe, alimentée avec l'adresse de la page.
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Horace
Messages : 10
Enregistré le : 29 avr. 2019, 11:00

Re: Problème dans Turn.js

Message par Horace » 15 mai 2019, 17:54

Merci, c'est exactement ce que je voudrais faire, mais ...
Mais je ne sais pas comment modifier l'instruction du script

Code : Tout sélectionner

	
	var img = $('<img />');
	img.mousedown(function(e) {
		e.preventDefault();
	});
Pour en faire une variable iframe !
Un bon conseil ?
Une ou deux lignes de code ?
Merci d'avance
H.

Horace
Messages : 10
Enregistré le : 29 avr. 2019, 11:00

Re: Problème dans Turn.js

Message par Horace » 16 mai 2019, 11:30

Bon, autant pour moi !
Mon cerveau était un peu paresseux (beaucoup ?)
Mais j'ai trouvé l'essentiel et je vous fais part de mes futures découverts et résultats !
Merci
H.

Horace
Messages : 10
Enregistré le : 29 avr. 2019, 11:00

Re: Problème dans Turn.js

Message par Horace » 22 mai 2019, 21:37

Et voilà !
Mon cerveau s'est remis en marche, et un petit <iframe> bien placé a fait l'affaire.
Donc et post est clos pour moi.
Merci
H.

Répondre