Paolo De Feo
a- a+

Gallerie fotografiche con CSS3 con immagini che si possono ingrandire e spostare

Ecco come creare una galleria fotografica completa con CSS3, jQuery e PHP.

Vediamo come creare una galleria fotografica con l’ausilio di CSS3, jQuery e PHP. La web photo gallery che andremo a sviluppare non avrà risvolti puramente tecnici, ma sarà anche incentrata su 2 effetti interattivo-visuali principali: Lightbox e interattività “drag and drop” (seleziona e trascina). L’idea è ricreare un effetto che veda delle immagini movibili che possano poi sia essere ingrandite, e visualizzate in modo classico, sia condivise trascinandole in un apposito box.

Ingredienti:

- PHP

- CSS3

- jQuery

- jQuery UI (per l’interfaccia drag and drop)

- plugin jQuery “FancyBox”

Passo 1 – Creazione del markup XHTML

Dobbiamo creare il markup per il nostro file demo.php (che è il cuore di tutto). In questo esempio ci focalizzeremo sulle parti principali: container e box per la condivisione (una semplice icona che servirà come punto di riferimento).

File demo.php – markup XHTML

<!-- container galleria: --><div id="gallery"><?php/* qui va il codice PHP che vedremo nel passo 3 */?><!--il div del box per la condivisione --><div class="drop-box"></div></div><div class="clear"></div><!—l’output del box di condivisione: --><div id="modal" title="condividi la foto"><form><fieldset><label for="name">URL della foto</label><input type="text" name="url" id="url" class="text ui-widget-content ui-corner-all" onfocus="this.select()" /></fieldset></form></div>

Come dicevamo, il modal DIV ci servirà per creare il box di condivisione dove verranno trascinate le immagini.

Passo 2 – Creazione dello stile CSS

Ora dobbiamo dare un “aspetto” a tutto: procediamo quindi con la creazione dello stile. La prima operazione da compiere è il richiamo tra <head></head> dei seguenti link CSS:

<link rel="stylesheet" type="text/css" href="demo.css" /> // il file CSS che creeremo in seguito: qui è stato nominato come “demo”.<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css" type="text/css" media="all" /> // collegamento esterno a jQuery UI<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.2.6.css"> //collegamento alla cartella FancyBox, script che avremo precedentemente scaricato e caricato nella root del sito

File demo.css

body{/* body */color:white;font-size:13px;background: #222222;font-family:Arial, Helvetica, sans-serif;}#gallery{/* contenitore  immagini */width:100%;height:580px;position:relative;}.pic, .pic a{/* singola imagine e collegamento ipertestuale all’interno*/width:100px;height:100px;overflow:hidden;}.pic{/* stile per la classe immagini .pic */position:absolute;border:5px solid #EEEEEE;border-bottom:18px solid #eeeeee;/* CSS3 Box Shadow */-moz-box-shadow:2px 2px 3px #333333;-webkit-box-shadow:2px 2px 3px #333333;box-shadow:2px 2px 3px #333333;}.pic a{/* stile per il collegamento ipertestuale */text-indent:-999px;display:block;/* Setting display to block enables advanced styling for links */}.drop-box{/* il box per la condivisione */width:240px;height:130px;position:absolute;bottom:0;right:0;z-index:-1;background:url(img/immagine_drop_box.png) no-repeat;}.drop-box.active{/* effetto di hovering quando un’immagine viene trascinata sul box*/background-position:bottom left;}label, input{/* Il campo URL modal */display:block;padding:3px;}label{font-size:10px;}fieldset{border:0;margin-top:10px;}#url{/* URL */width:240px;}

Qualche piccola specificazione: la classe CSS .pic serve a stilizzare le imamagini a mo’ di “polaroid”. Per raggiungere questo effetto dobbiamo associare ad ogni immagine un po’ di bordo bianco. La proprietà CSS3 box-shadow applica un’ombra sotto ogni fotografia.

Passo 3  - il PHP

Nel passo 1 abbiamo accennato all’XHTML che avrebbe generato il front end markup. Ora dobbiamo analizzare il codice che incolleremo tra i tag PHP, che nel passo 1 sono marcati da un commento specifico.

Il file demo.php – il codice puro

/* inzio configurazione */$thumb_directory = 'img/thumbs'; //cartella miniature$orig_directory = 'img/original'; // cartella foto “originali”$stage_width=600;$stage_height=400;/* fine configurazione */$allowed_types=array('jpg','jpeg','gif','png'); // immagini che è possibile associare$file_parts=array();$ext='';$title='';$i=0;/* apriamo la directory tramite opendir: */$dir_handle = @opendir($thumb_directory) or die("è stato riscontrato un errore!");$i=1;while ($file = readdir($dir_handle)){if($file=='.' || $file == '..') continue;$file_parts = explode('.',$file);$ext = strtolower(array_pop($file_parts));/* us il nome file (senza estensione) come titolo dell’immagine: */$title = implode('.',$file_parts);$title = htmlspecialchars($title);/* se l’estensione file è riconosciuta: */if(in_array($ext,$allowed_types)){/* generiamo valori random per il posizionamento: */$left=rand(0,$stage_width);$top=rand(0,400);$rot = rand(-40,40);if($top>$stage_height-130 && $left > $stage_width-230){/* preveniamo che le immagini coprano il box di condivisione */$top-=120+130;$left-=230;}/* output delle immagini: */echo '<div id="pic-'.($i++).'" class="pic" style="top:'.$top.'px;left:'.$left.'px;background:url('.$thumb_directory.'/'.$file.') no-repeat 50% 50%; -moz-transform:rotate('.$rot.'deg); -webkit-transform:rotate('.$rot.'deg);"><a class="fancybox" rel="fncbx" href="'.$orig_directory.'/'.$file.'" target="_blank">'.$title.'</a></div>';}}/* chiudiamo la directory */closedir($dir_handle);

Passo 4 – jQuery

Ci siamo quasi: dobbiamo implementare il codice che darà interattività alle nostre immagini. Tra <head> e </head> incolliamo questa sequenza:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> //collegamento JavaScript esterno<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>//collegamento JavaScript esterno<script type="text/javascript" src="fancybox/jquery.fancybox-1.2.6.pack.js"></script> //collegamento a FancyBox jQuery all’interno della root del sito<script type="text/javascript" src="script.js"></script> // il file JavaScript che creeremo

Il file script.js

$(document).ready(function(){// esecuzione quando tutti gli elementi pagina vengono caricativar preventClick=false;$(".pic a").bind("click",function(e){if(preventClick){e.stopImmediatePropagation();e.preventDefault();}});$(".pic").draggable({/* convertiamo le immagini in oggetti draggabili */containment: 'parent',start: function(e,ui){preventClick=true;},stop: function(e, ui) {/* aspetta 250 millisecondi prima di riabilitare i click*/setTimeout(function(){ preventClick=false; }, 250);}});$('.pic').mousedown(function(e){var maxZ = 0;$('.pic').each(function(){var thisZ = parseInt($(this).css('zIndex'))if(thisZ>maxZ) maxZ=thisZ;});if($(e.target).hasClass("pic")){/* mostra le immagini cliccate sopra le altre: */$(e.target).css({zIndex:maxZ+1});}else $(e.target).closest('.pic').css({zIndex:maxZ+1});});/* Convertiamo tutti I link in una galleria FancyBox */$("a.fancybox").fancybox({zoomSpeedIn: 300,zoomSpeedOut: 300,overlayShow:false});/* Convertiamo lo share-box in oggetto draggabile: */$('.drop-box').droppable({hoverClass: 'active',drop:function(event,ui){$('#url').val(location.href.replace(location.hash,'')+'#' + ui.draggable.attr('id'));$('#modal').dialog('open');}});/* Conberte il  div con id="modal" in una finestra “modal”  */$("#modal").dialog({bgiframe: true,modal: true,autoOpen:false,buttons: {Ok: function() {$(this).dialog('close');}}});if(location.hash.indexOf('#pic-')!=-1){$(location.hash+' a.fancybox').click();}});

Fatto! La nostra galleria ora è completa



Ti potrebbe interessare anche

commenta la notizia