{"id":1012,"date":"2010-06-12T12:00:20","date_gmt":"2010-06-12T10:00:20","guid":{"rendered":"http:\/\/www.lucadegasper.com\/blog\/?p=1012"},"modified":"2011-01-04T08:39:09","modified_gmt":"2011-01-04T07:39:09","slug":"fancybox-for-dummies","status":"publish","type":"post","link":"https:\/\/www.lucadegasper.com\/blog\/2010\/06\/fancybox-for-dummies\/","title":{"rendered":"Fancybox for dummies"},"content":{"rendered":"<p>Dopo aver perso ore e ore per capire come funziona e come integrare correttamente <a href=\"http:\/\/fancybox.net\/\" target=\"_blank\">Fancybox<\/a> in un sito internet, vi scrivo qui delle istruzioni (idealmente semplificate) su come farlo. Sento la necessit\u00e0 di scrivere questo articolo perch\u00e9, nonostante io non sia un professionista nel settore (anzi!), ma penso comunque di cavarmela abbastanza bene a smanettare con i siti, ho trovato difficolt\u00e0 nel seguire le istruzioni pubblicate sul sito ufficiale (visto che tralasciano dei passi importanti) e nel trovare informazioni supplementari (anche in inglese, figuriamoci in italiano).*<\/p>\n<p><span style=\"font-size: x-small;\">*Nota doverosa: essendo che i tempi di questo blog sono come quelli della giustizia italiana &#8211; molto lunghi (per questo articolo hanno raggiunto i sette mesi dall&#8217;idea alla pubblicazione), ora le informazioni che si trovano sul sito ufficiale sono state rese pi\u00f9 chiare. Pubblico comunque l&#8217;articolo, visto che ormai \u00e8 scritto, nel caso torni utile a qualcuno! \ud83d\ude42<br \/>\n<\/span><\/p>\n<p>Ho scoperto Fancybox perch\u00e9 volevo inserirla in <a href=\"http:\/\/www.cinemaeden.bz.it\/\" target=\"_blank\">un sito a cui stavo lavorando<\/a>, e solo in seguito ho realizzato che in passato avevo tentato invano di integrarla anche in questo blog per la visualizzazione delle immagini utilizzando un plugin; ora, quando ho un po&#8217; di tempo, posso implementare il codice &#8220;manualmente&#8221;, senza usare un plugin esterno, malfunzionante peraltro! \ud83d\ude42<\/p>\n<p>Per chi non lo sapesse, Fancybox \u00e8 un insieme di javascript e altri ammucchi di codice che, opportunamente integrati all&#8217;interno di un sito internet, permettono di aprire una <em>fancy box<\/em> appunto, ovvero un &#8220;contenitore&#8221; delle dimensioni prestabilite (da voi) che si sovrappone alla pagina e che pu\u00f2 contenere qualsiasi cosa. Tipicamente viene usato per visualizzare le immagini in modo graficamente molto carino a mio avviso, anche perch\u00e9 \u00e8 possibile aggiungere effetti grafici personalizzati molto belli; altri contenuti tipici sono video (di <a href=\"http:\/\/it.youtube.com\" target=\"_blank\">Youtube<\/a>, ad esempio). Se volete vedere qualche esempio di come funziona Fancybox, date un&#8217;occhiata a <a href=\"http:\/\/fancybox.net\/example\" target=\"_blank\">questa pagina<\/a>. <!--more-->Ma veniamo al dunque: come implementare Fancybox in un sito internet?<\/p>\n<ul>\n<li>Scaricare il pacchetto dal <a href=\"http:\/\/fancybox.net\/\" target=\"_blank\">sito di Fancybox<\/a>, al momento la versione disponibile \u00e8 la 1.3.1!<\/li>\n<li>Scompattare i files e caricarli sul server. All&#8217;interno dell&#8217;archivio che avete scaricato troverete una pagina HTML di esempio ed una cartella chiamata &#8220;fancybox&#8221; contenente i file che vi servono per far funzionare il tutto; vi consiglio di prendere questa cartella e trasferirla direttamente sul server, in modo da mantenere i file che servono a Fancybox (circa una ventina) separati dagli altri. Ecco, in breve, quali sono i file contenuti nella cartella &#8220;fancybox&#8221;:\n<ul>\n<li>immagini varie: sono gli elementi grafici di Fancybox, niente di particolarmente emozionante;<\/li>\n<li>jquery.fancybox-xxx.css: \u00e8 il foglio di stile di Fancybox, necessario per la corretta visualizzazione degli elementi grafici;<\/li>\n<li>jquery.fancybox-xxx.js: contiene gli javascript che fanno effettivamente funzionare il plugin;<\/li>\n<li>jquery.fancybox-xxx.pack.js: come sopra.<\/li>\n<li>jquery.mousewheel-xxx.pack.js: file necessario per abilitare la rotellina del mouse per passare da un&#8217;immagine all&#8217;altra in caso di gallerie di immagini;<\/li>\n<li>jquery.easing-xxx.pack.js: file aggiuntivo necessario per abilitare alcuni effetti grafici particolari.<\/li>\n<\/ul>\n<\/li>\n<li>E&#8217; inoltre necessario andare a recuperare altri due files, di cui uno facoltativo, e crearne un altro personalizzato in base alle nostre necessit\u00e0:\n<ul>\n<li>http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.4\/jquery.min.js: altro javascript necessario al corretto funzionamento di Fancybox, a voi la scelta se usare direttamente questo file hostato da Google (come ho visto molte persone fanno), oppure se volete caricarlo sul vostro server in modo da essere pi\u00f9 sicuri;<\/li>\n<li>custom.js: questo \u00e8 invece il file che dovrete creare voi (istruzioni pi\u00f9 dettagliate in fondo all&#8217;articolo), attraverso il quale definirete quali elementi della pagina apriranno la finestra di Fancybox e le propriet\u00e0 della stessa, nonch\u00e9 eventuali effetti aggiuntivi nel caso abbiate incluso anche il file jquery.easing.js.<\/li>\n<\/ul>\n<\/li>\n<li>Per implementare le funzionalit\u00e0 di Fancybox all&#8217;interno di una pagina, \u00e8 necessario andare ad editare il codice della pagina in modo che essa richiami i file precedentemente scaricati. L&#8217;ordine con il quale essi vengono richiamati, a quanto pare, \u00e8 fondamentale (ho perso una giornata a capire perch\u00e9 non funzionava, ed era proprio l&#8217;ordine)..! Per fare ci\u00f2 \u00e8 necessario aprire la pagina a cui siamo interessati in modo da poterne editare il codice, ed inserire i seguenti tag all&#8217;interno del tag &lt;head&gt; (ovviamente sostituite gli indirizzi dei file se li avete salvati da qualche parte parte):<\/li>\n<\/ul>\n<blockquote><p>&lt;script type=&#8221;text\/javascript&#8221;  src=&#8221;http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.4\/jquery.min.js&#8221;&gt;&lt;\/script&gt;<\/p>\n<p>&lt;script type=&#8221;text\/javascript&#8221;  src=&#8221;.\/fancybox\/jquery.fancybox-xxx.pack.js&#8221;&gt;&lt;\/script&gt;<\/p>\n<p>&lt;script type=&#8221;text\/javascript&#8221;  src=&#8221;.\/fancybox\/jquery.easing-xxx.pack.js&#8221;&gt;&lt;\/script&gt; <em>(opzionale per gli effetti grafici)<\/em><\/p>\n<p>&lt;script type=&#8221;text\/javascript&#8221; src=&#8221;.\/fancybox\/jquery.mousewheel-xxx.pack.js&#8221;&gt;&lt;\/script&gt; <em>(opzionale per abilitare la rotellina del mouse)<\/em><\/p>\n<p>&lt;link rel=&#8221;stylesheet&#8221; href=&#8221;.\/fancybox\/jquery.fancybox-xxx.css&#8221; type=&#8221;text\/css&#8221; media=&#8221;screen&#8221; \/&gt;<\/p>\n<p>&lt;script type=&#8221;text\/javascript&#8221; src=&#8221;.\/fancybox\/custom.js&#8221;&gt;&lt;\/script&gt;<\/p><\/blockquote>\n<p>Non chiedetemi perch\u00e9 i file vadano caricati in questo ordine, anzi ora che ci penso non chiedetemi proprio niente: cos\u00ec sembra che funzioni \ud83d\ude42<\/p>\n<p>Ora la pagina \u00e8 a tutti gli effetti pronta per deliziarci con i mirabolanti effetti grafici di Fancybox! Manca solo l&#8217;ultimo passo: personalizzare il tutto, ovvero dire al <em>browser<\/em> quali collegamenti devono essere aperti con Fancybox e quali no. Per fare questo, come gi\u00e0 detto in precedenza, bisogna andare a personalizzare il file &#8220;custom.js&#8221;. Qui vi spiegher\u00f2 in maniera estremamente semplice come fare ci\u00f2 in modo da ottenere qualcosa di non troppo elaborato ma che funzioni subito. Un esempio di cosa scrivere in <em>custom.js<\/em>:<\/p>\n<blockquote><p>$(document).ready(function() {<br \/>\n$(&#8216;a.trailer&#8217;).fancybox({<br \/>\n&#8216;frameWidth&#8217;: 640,<br \/>\n&#8216;frameHeight&#8217;: 385<br \/>\n});<br \/>\n});<\/p><\/blockquote>\n<p>La parte <em>$(document).ready(function() { &#8230; });<\/em> va sempre indicata poich\u00e9 indica al browser che il suo contenuto deve essere letto dopo che la pagina \u00e8 stata caricata; \u00e8 una delle funzioni fondamentali di jQuery (su cui si basa Fancybox). All&#8217;interno di questa funzione possiamo andare a specificare gli elementi che saranno caratterizzati dall&#8217;apertura della mitica finestrella Fancybox. Come vedete la notazione \u00e8 molto simile a quella dei fogli di stile CSS, in questo caso &#8220;a.trailer&#8221; indica che Fancybox si aprir\u00e0 per tutti gli elementi &lt;a&gt; (i link della pagina, quindi) che abbiano <em>class=trailer<\/em>. In questo modo \u00e8 possibile applicare Fancybox a tutti i link ($(&#8216;a&#8217;)), a tutti i link con ID &#8220;trailer&#8221; ($(&#8216;a#trailer&#8217;)), a tutti gli elementi con ID &#8220;trailer&#8221; ($(&#8216;#trailer&#8217;)) o a tutti i link contenuti in un oggetto che abbia ID &#8220;content&#8221; ($(&#8216;#content a&#8217;)). Le righe che compaiono all&#8217;interno delle parentesi graffe che seguono definiscono le propriet\u00e0 di quella specifica finestra di Fancybox; in questo caso \u00e8 stata impostata una larghezza di 640 pixel e un&#8217;altezza di 385. Per ulteriori informazioni e per una lista delle propriet\u00e0 che potete specificare, vi rimando a <a href=\"http:\/\/fancybox.net\/api\" target=\"_blank\">questa pagina<\/a>.<\/p>\n<h3>Come caricare Fancybox al caricamento della pagina<\/h3>\n<blockquote><p>jQuery(document).ready(function() {<br \/>\n$(&#8220;#autotrigger&#8221;).trigger(&#8216;click&#8217;);<br \/>\n});<\/p><\/blockquote>\n<p>Questo codice da inserire in <em>custom.js<\/em> \u00e8 sufficiente per caricare la finestrella di Fancybox al caricamento della pagina. Nel codice HTML della pagina bisogna comunque inserire il link come negli esempi precedenti, ma in questo caso pu\u00f2 essere non visibile visto che nessuno deve cliccarci (\u00e8 solo una necessit\u00e0 di Fancybox):<\/p>\n<blockquote><p>&lt;a href=elementochevogliamocaricare.ext style=&#8221;display:none&#8221; id=autotrigger&gt;&lt;\/a&gt;<\/p><\/blockquote>\n<p>Spero di aver scritto tutto il necessario per installare Fancybox, in  caso contrario fatemelo sapere in modo che possa aggiornare l&#8217;articolo!  \ud83d\ude09<\/p>\n<p>Attenzione: questo articolo \u00e8 aggiornato al 12 giugno 2010, per la versione 1.3.1 di Fancybox; eventuali futuri aggiornamenti possono comportare alcune differenze pi\u00f9 o meno sostanziali alle istruzioni scritte qua sopra. Questa procedura vuole essere una scaletta da seguire, se non siete sicuri di quello che state facendo <strong>fate una copia dei file su cui state lavorando<\/strong> prima di apportare le modifiche; non mi assumo in nessun caso la responsabilit\u00e0 di ci\u00f2 che combinate.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dopo aver perso ore e ore per capire come funziona e come integrare correttamente Fancybox in un sito internet, vi scrivo qui delle istruzioni (idealmente semplificate) su come farlo. Sento la necessit\u00e0 di scrivere questo articolo perch\u00e9, nonostante io non sia un professionista nel settore (anzi!), ma penso comunque di cavarmela abbastanza bene a smanettare [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[7],"tags":[455,814,811,812,815,813,660],"class_list":["post-1012","post","type-post","status-publish","format-standard","hentry","category-informatica_tecnologia","tag-codice","tag-css","tag-fancybox","tag-implementare","tag-javascript","tag-script","tag-sito"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/pekIj-gk","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.lucadegasper.com\/blog\/wp-json\/wp\/v2\/posts\/1012","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lucadegasper.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lucadegasper.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lucadegasper.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lucadegasper.com\/blog\/wp-json\/wp\/v2\/comments?post=1012"}],"version-history":[{"count":27,"href":"https:\/\/www.lucadegasper.com\/blog\/wp-json\/wp\/v2\/posts\/1012\/revisions"}],"predecessor-version":[{"id":1788,"href":"https:\/\/www.lucadegasper.com\/blog\/wp-json\/wp\/v2\/posts\/1012\/revisions\/1788"}],"wp:attachment":[{"href":"https:\/\/www.lucadegasper.com\/blog\/wp-json\/wp\/v2\/media?parent=1012"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lucadegasper.com\/blog\/wp-json\/wp\/v2\/categories?post=1012"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lucadegasper.com\/blog\/wp-json\/wp\/v2\/tags?post=1012"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}