Magazine Telefonia Mobile

Tutorial jQuery: Flipbook in formato Moleskine

Creato il 14 giugno 2012 da Iwebdesigner @Iwebdesigner_it
Tutorial jQuery: Flipbook in formato Moleskine Tutorial jQuery: Flipbook in formato Moleskine

Moleskine è un leggendario taccuino prodotto in Italia, molto indicato per scrittura e disegno: leggendario perchè veniva utilizzato da grandi nomi dell’arte e della letteratura come Pablo Picasso ed Ernest Hemingway. Si tratta di un oggetto esteticamente rigoroso, qualitativamente superlativo per qualità di carta e rilegatura (io lo utilizzo per fare le mie illustrazioni). Vediamo com’è possibile riprodurne l’entità virtualmente grazie a una variante del famoso Flipbook in jQuery, la Moleskine Notebook sviluppata da Codrops.

Tutorial jQuery: Flipbook in formato Moleskine

Nel pacchetto in download in fondo all’articolo troviamo le risorse quali immagini, Css e Javascript già suddivise per cartelle. Vediamo come funziona la pagina Index.html.

jQuery flip book tutorial

La struttura dell’Html da inserire nel nostro Content:

<div class="book_wrapper">
			<a id="next_page_button"></a>
			<a id="prev_page_button"></a>
			<div id="loading" class="loading">Loading pages...</div>
			<div id="mybook" style="display:none;">
				<div class="b-load">
					<div>
						<img src="images/1.jpg" alt=""/>
						<h1>Slider Gallery</h1>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam interdum placerat tempus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis sed justo vitae lacus egestas ultricies. Nullam sit amet turpis id odio mattis vehicula vitae et dolor. </p>
					</div>
				</div>
			</div>
		</div>
	</div>

Questa è la struttura per una singola pagina: per inserire altre pagine, aggiungiamo ulteriori <div> all’interno della Classeb-load”.

All’interno dell’<head> colleghiamo i plugin Javascript:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
		<script src="booklet/jquery.easing.1.3.js" type="text/javascript"></script>
		<script src="booklet/jquery.booklet.1.1.0.min.js" type="text/javascript"></script>

I fogli di stile:

<link href="booklet/jquery.booklet.1.1.0.css" type="text/css" rel="stylesheet" media="screen" />
		<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>

Javascript per i font (opzionale):

		<script src="cufon/cufon-yui.js" type="text/javascript"></script>
		<script src="cufon/ChunkFive_400.font.js" type="text/javascript"></script>
		<script src="cufon/Note_this_400.font.js" type="text/javascript"></script>
		<script type="text/javascript">
			Cufon.replace('h1,p,.b-counter');
			Cufon.replace('.book_wrapper a', {hover:true});
			Cufon.replace('.title', {textShadow: '1px 1px #C59471', fontFamily:'ChunkFive'});
			Cufon.replace('.reference a', {textShadow: '1px 1px #C59471', fontFamily:'ChunkFive'});
			Cufon.replace('.loading', {textShadow: '1px 1px #000', fontFamily:'ChunkFive'});
		</script>

Infine vediamo il Javascript in riga, possiamo inserirlo anche all’interno del <body>:

<script type="text/javascript">
			$(function() {
				var $mybook 		= $('#mybook');
				var $bttn_next		= $('#next_page_button');
				var $bttn_prev		= $('#prev_page_button');
				var $loading		= $('#loading');
				var $mybook_images	= $mybook.find('img');
				var cnt_images		= $mybook_images.length;
				var loaded			= 0;
				//preload all the images in the book,
				//and then call the booklet plugin

				$mybook_images.each(function(){
					var $img 	= $(this);
					var source	= $img.attr('src');
					$('<img/>').load(function(){
						++loaded;
						if(loaded == cnt_images){
							$loading.hide();
							$bttn_next.show();
							$bttn_prev.show();
							$mybook.show().booklet({
								name:               null,                            // name of the booklet to display in the document title bar
								width:              800,                             // container width
								height:             500,                             // container height
								speed:              600,                             // speed of the transition between pages
								direction:          'LTR',                           // direction of the overall content organization, default LTR, left to right, can be RTL for languages which read right to left
								startingPage:       0,                               // index of the first page to be displayed
								easing:             'easeInOutQuad',                 // easing method for complete transition
								easeIn:             'easeInQuad',                    // easing method for first half of transition
								easeOut:            'easeOutQuad',                   // easing method for second half of transition

								closed:             true,                           // start with the book "closed", will add empty pages to beginning and end of book
								closedFrontTitle:   null,                            // used with "closed", "menu" and "pageSelector", determines title of blank starting page
								closedFrontChapter: null,                            // used with "closed", "menu" and "chapterSelector", determines chapter name of blank starting page
								closedBackTitle:    null,                            // used with "closed", "menu" and "pageSelector", determines chapter name of blank ending page
								closedBackChapter:  null,                            // used with "closed", "menu" and "chapterSelector", determines chapter name of blank ending page
								covers:             false,                           // used with  "closed", makes first and last pages into covers, without page numbers (if enabled)

								pagePadding:        10,                              // padding for each page wrapper
								pageNumbers:        true,                            // display page numbers on each page

								hovers:             false,                            // enables preview pageturn hover animation, shows a small preview of previous or next page on hover
								overlays:           false,                            // enables navigation using a page sized overlay, when enabled links inside the content will not be clickable
								tabs:               false,                           // adds tabs along the top of the pages
								tabWidth:           60,                              // set the width of the tabs
								tabHeight:          20,                              // set the height of the tabs
								arrows:             false,                           // adds arrows overlayed over the book edges
								cursor:             'pointer',                       // cursor css setting for side bar areas

								hash:               false,                           // enables navigation using a hash string, ex: #/page/1 for page 1, will affect all booklets with 'hash' enabled
								keyboard:           true,                            // enables navigation with arrow keys (left: previous, right: next)
								next:               $bttn_next,          			// selector for element to use as click trigger for next page
								prev:               $bttn_prev,          			// selector for element to use as click trigger for previous page

								menu:               null,                            // selector for element to use as the menu area, required for 'pageSelector'
								pageSelector:       false,                           // enables navigation with a dropdown menu of pages, requires 'menu'
								chapterSelector:    false,                           // enables navigation with a dropdown menu of chapters, determined by the "rel" attribute, requires 'menu'

								shadows:            true,                            // display shadows on page animations
								shadowTopFwdWidth:  166,                             // shadow width for top forward anim
								shadowTopBackWidth: 166,                             // shadow width for top back anim
								shadowBtmWidth:     50,                              // shadow width for bottom shadow

								before:             function(){},                    // callback invoked before each page turn animation
								after:              function(){}                     // callback invoked after each page turn animation
							});
							Cufon.refresh();
						}
					}).attr('src',source);
				});

			});
        </script>

Come possiamo notare, ogni funzione è ampiamente commentata per indicarci come customizzare la nostra Moleskine e modellarla secondo i nostri gusti, ad esempio modificando l’altezza e la larghezza del container:

width:              800,
height:             500,

La pagina di partenza:

startingPage:       0, 

Se iniziare con il taccuino chiuso o parte (cambiando il valore in false per farlo partire aperto):

closed:             true,

Consentire la navigazione tramite i tasti freccia della tastiera:

keyboard:           true,

E molto altro, in un codice esetremamente customizzabile in maniera davvero intuitiva.

Tutorial jQuery: Flipbook in formato Moleskine

Buon download!

Tutorial jQuery: Flipbook in formato Moleskine

Potrebbero interessarti anche :

Ritornare alla prima pagina di Logo Paperblog

Possono interessarti anche questi articoli :

  • Wrapped Bracialet - il TUTORIAL

    Wrapped Bracialet TUTORIAL

    In molti me lo avevate chiesto... beh magari non proprio molti ma sicuramente più di uno... ma fino ad oggi ero un po' titubante perché non mi sembrava di non... Leggere il seguito

    Da  La_vale
    CREAZIONI, HOBBY, LIFESTYLE
  • Tutorial: Scontornare le immagini

    Tutorial: Scontornare immagini

    Prima di iniziare con i vari tutorial di grafica mi presento. Sono Sara Orsini, abito in un paesino della provincia di Benevento (Campania), ho quasi 27 anni,... Leggere il seguito

    Da  Fidya
    FOTOGRAFIA, LIFESTYLE
  • Tutorial Gufetto

    Tutorial Gufetto

    Oggi volevo condividere con voi un tutorial....Come realizzare un gufetto alternativo.....Vi mostrerò tutti i passaggi in modo che chiunque possa... Leggere il seguito

    Da  Sergentepepper
    CUCINA, RICETTE
  • Tutorial stella...

    Tutorial stella...

    visto le numerose richieste ricevute per un tutorial delle stelle create e pubblicate da me in precedenti post ( QUI e QUI ), ho preparato per voi una serie di... Leggere il seguito

    Da  Letrecivette
    CREAZIONI, HOBBY, LIFESTYLE
  • tutorial fantastico e utilissimoooo

    Buona sera care amiche,qualche giorno fa girando neo vari blog che seguo,mi sono ritrovata davanti ad un tutorial fantastico,o almeno io lo adoro e secondo me... Leggere il seguito

    Da  Bimbaiaia
    CREAZIONI, HOBBY, LIFESTYLE
  • tutorial cuscino

    tutorial cuscino

    Ciao a tutti oggi voglio mostrarvi il tutorial di come realizzo le federe dei miei cuscini.Tagliare un quadrato di stoffa della misura che si preferisce io di... Leggere il seguito

    Da  Simonina
    CREAZIONI, DECORAZIONE, DIARIO PERSONALE, HOBBY, LIFESTYLE
  • Tutorial: loving penguins

    Tutorial: loving penguins

    Postando ieri le cupcakes per San Valentino vi avevo promesso che avrei postato anche il passo passo dei pinguini, ho potuto farlo solo questa mattina visto il... Leggere il seguito

    Da  Resyrm
    CUCINA