Ritagliare immagini solo con CSS (Thumbnails)

Chi di voi non ha mai avuto il problema delle immagini di una gallery da rimpicciolire per fare una presentazione rapida di tutte le foto e si è scontrato con il dover avere per forza due immagini, una piccola e una grande. Beh, con questo sistema che utilizza il parametro “overflow” dei css, possiamo usare l’immagine originale e visualizzarne solo una parte (non è il ridimensionamento dell’intera foto ma ne mostra una sezione, oramai utilizzato da tutti i siti moderni).
Lo script di cui parlo ha in aggiunta un’azione al passaggio del mouse sopra l’immagine stessa: la mostra interamente (si può decidere di eliminare facilmente). Cominciamo.

Lo script lo potete trovare al seguente indirizzo, anche se l’intero codice è scritto qui sotto: http://cssglobe.com/post/1305/create-resizing-thumbnails-using-overflow-property

Per chi non conoscesse l’inglese o volesse una spiegazione semplice e con eventuali varianti (grazie alle quali esiste questo blog) allora rimanga qui.

Il codice è tutto css, un pò lungo quindi copiate e incollate che ci si rivede alla fine, ed è il seguente:

<style type="text/css">

/* lista thumbnail */

	ul#thumbs, ul#thumbs li{
		margin:0;
		padding:0;
		list-style:none;
	}

	ul#thumbs li{
		float:left;
		margin-right:5px;
		border:1px solid #999;
		padding:2px;
	}
	ul#thumbs a{
		display:block;
		float:left;
		width:100px;
		height:100px;
		line-height:100px;
		overflow:hidden;
		position:relative;
		z-index:1;
	}
	ul#thumbs a img{
		float:left;
		position:absolute;
		top:-20px;
		left:-50px;
	}

	/* mouse over */

		ul#thumbs a:hover{
			overflow:visible;
			z-index:1000;
			border:none;
		}
		ul#thumbs a:hover img{
			border:1px solid #999;
			background:#fff;
			padding:2px;
		}	

	/* fine mouse over */

	/* pulizia floats */

		ul#thumbs:after, li#thumbs:after{
			content:".";
			display:block;
			height:0;
			clear:both;
			visibility:hidden;
			}
		ul#thumbs, li#thumbs{
			display:block;
			}
		/*  \*/
		ul#thumbs, li#thumbs{
			min-height:1%;
			}
		* html ul#thumbs, * html li#thumbs{
			height:1%;
			}	

	/* fine pulizia floats */

/* fine lista thumbnail */

/* thumbnail singola */

	p.thumb{
		float:left;
		margin:.5em 0;
		margin-right:10px;
		border:1px solid #999;
		padding:2px;
	}
	p.thumb a{
		display:block;
		float:left;
		width:100px;
		height:100px;
		line-height:100px;
		overflow:hidden;
		position:relative;
		z-index:1;
	}
	p.thumb a img{
		float:left;
		position:absolute;
		top:-20px;
		left:-50px;
	}

	/* mouse over */

		p.thumb a:hover{
			overflow:visible;
			z-index:1000;
			border:none;
		}
		p.thumb a:hover img{
			border:1px solid #999;
			background:#fff;
			padding:2px;
		}	

	/* fine mouse over */	

/* fine thumbnail singola */

</style>

Potete inserirlo nella pagina o nel css esterno, come preferite (nel css esterno togliete i tag ‘style’).

“Quindi noi cosa dobbiamo fare?” , direte voi. Semplicemente creare una lista (<ul><li></li></ul>) con tutte le immagini, dove il tag <ul> dovrà avere come id “thumbs” (esempio:

<ul id="thumbs"><li><a href="https://portapipe.wordpress.com/"><img src="img.jpg" /></a></li></ul>

). E se volessi l’effetto su una singola immagine? Basta fare un paragrafo (<p>) con class “thumb” (esempio:

<p class="thumb"><a href="https://portapipe.wordpress.com/"><img src="img.jpg" /></a></p>

). Finito. Il risultato originale lo potete trovare QUI.

Ma io non voglio l’ingrandimento al passaggio del mouse. Come faccio? Semplice: commentate o cancellate le parti tra /* mouse over */ e /* fine mouse over */ .

Considerando che andrebbe utilizzato nelle gallerie fotografiche, consiglio di fissare un’altezza all’immagine piccola e usare strumenti come Lightbox o Fancybox per fare un ingrandimento alla Apple o comunque il classico ingrandimento a finestrella che fa oscurare tutto il sito, esaltando l’immagine. Avendo un’altezza fissa oltretutto l’immagine piccola (thumbnail) farà visualizzare più dettagli della foto (essendo visualizzata una parte dell’intera foto a dimensione intera, più la foto sarà piccola e più porzioni si vedranno; provare per capire).

Semplice script che però risolve molte problematiche, oltre ad essere piacevole da guardare e mantiene una formattazione che altrimenti con le immagini solamente ridotte non si avrebbe. Unico difetto, ma anche un pregio, è il fatto che se avete immagini troppo pesanti dovrà caricarle anche solo per presentarle in miniatura. Fatto ciò però al click di ingrandimento della foto, quest’ultima sarà già nella memoria del vostro computer e quindi verrà caricata immediatamente. Quindi sta a voi: se avete immagini ottimizzate per il web allora è la soluzione che fa al caso vostro.

Annunci

, , , , , , , , , , , , , , , ,

  1. Lascia un commento

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger hanno fatto clic su Mi Piace per questo: