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 caricati
	var 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

C'è 1 commento
Redazione
Condividi le tue opinioni su questo articolo!