Archive for 'immagini'


57+ gallerie di immagini, slideshow e lightbox

Posted on 18. May, 2010 by Administrator.

0

Bellissima raccolta di script ajax e flash di gallerie di immagini, slideshow e lightbox

Link: http://www.1stwebdesigner.com/resources/57-free-image-gallery-slideshow-and-lightbox-solutions/

Continue Reading

Creare una semplice slideshow con MooTools!

Posted on 22. Dec, 2009 by daniele.

0

rsz_1cricci1

In questo articolo imparerete come realizzare una presentazione con immagini in dissolvenza.

Link: http://davidwalsh.name/mootools-slideshow

Continue Reading

Applicare il riflesso a un’immagine con MooTools e jQuery!

Posted on 05. Dec, 2009 by daniele.

0

ricci-reflect

Un dettaglio sottile che fa una grande differenza su qualsiasi web design è l'uso di riflessi di immagine. Applicare il riflesso con Photoshop può risultare molto fastidioso specie se le immagini sono gestite da uno script PHP e MySQL. Reflection.js è un javascript (disponibile sia in jQuery che MooTools) che crea riflessi alle immagini presenti in una pagina. Reflection.js creerà un nuovo elemento IMG con diversi filtri css applicati.

Demo: http://davidwalsh.name/dw-content/mootools-reflection.php

Link: http://davidwalsh.name/javascrip-reflection

Continue Reading

Effetto Page Peel con MooTools!

Posted on 09. Sep, 2009 by daniele.

0

CODICE XHTML

 
<div id="page-flip">
	<a href="http://www.sastgroup.com/feed"><img src="page_flip.png" alt="Subscribe!" id="page-flip-image" /></a>
<div id="page-flip-message"></div>
</div>
 

CODICE CSS

 
#page-flip { position:relative; right:0; top:0; float:right;  }
#page-flip-image { width:50px; height:52px; z-index:99; position:absolute; right:0; top:0; -ms-interpolation-mode:bicubic; }
#page-flip-message { width:50px; height:50px; overflow:hidden; position:absolute; right:0; top:0; background:url(subscribe.png) no-repeat right top; }
 

CODICE MOOTOOLS

 
(function($,$$) { window.addEvent('domready',function() {
 
	var flip = $('page-flip');
	var flipImage = $('page-flip-image');
	var flipMessage = $('page-flip-message');
 
	flip.addEvents({
		mouseenter:function() {
			$$(flipImage,flipMessage).set('morph',{ duration: 500 }).morph({
				width: 307,
				height: 319
			});
		},
		mouseleave:function() {
			flipImage.set('morph',{ duration: 220 }).morph({
				width: 50,
				height: 52
			});
			flipMessage.set('morph',{ duration:200 }).morph({
				width: 50,
				height:50
			});
		}
	});
}); })(document.id,$$);
 

Continue Reading

Icone in stile iPhone tutte per voi!

Posted on 01. Sep, 2009 by daniele.

0

duskicons

Scarica: http://www.deviantart.com/download/132732427/Dusk_by_kawsone.rar

Continue Reading

[jQuery] Usare l’opacità per concentrarsi su un singolo elemento!

Posted on 28. Aug, 2009 by daniele.

0 

 
$(document).ready(function() {
	//area 1
	$('.fade-area-1').children().hover(function() {
		$(this).siblings().stop().fadeTo(500,0.5);
	}, function() {
		$(this).siblings().stop().fadeTo(500,1);
	});
	//area 2
	$('.fade-area-2').children().hover(function() {
		$(this).siblings().stop().fadeTo(500,0.5);
	}, function() {
		$(this).siblings().stop().fadeTo(500,1);
	});
});
 

Demo: http://davidwalsh.name/dw-content/fade-except-jquery.php

Continue Reading

Creare una galleria di immagini in jQuery con titolo e descrizione

Posted on 09. Aug, 2009 by daniele.

0

Demo: http://www.queness.com/resources/html/caption/index.html

Scarica file Sorgente: http://www.queness.com/resources/archives/jquery-caption.zip

Continue Reading

PhotoNav, esplorare le foto!

Posted on 01. Aug, 2009 by daniele.

0

Demo: http://www.gayadesign.com/scripts/jqueryphotonav/
Codice Sorgente: http://www.gayadesign.com/scripts/jqueryphotonav/jqueryphotonav.zip

Continue Reading

Effetto fumo in jQuery!

Posted on 01. Aug, 2009 by daniele.

0

Demo: http://www.gayadesign.com/scripts/smokeeffect/

Codice Sorgente: http://www.gayadesign.com/scripts/smokeeffect/smokeEffect.zip

Continue Reading

Bellissima Galleria in jQuery

Posted on 28. Jul, 2009 by daniele.

0

Demo: http://www.howtoweb.it/wp-content/uploads/jquery_cycle/jquery_cycle_description.html

Jquery cycle potete scaricarlo da qui.

Codice Sorgente:

 
<style type="text/css">
 
body{background-color:#000;color:#fff;text-align:center;font-size:12px;}
 
a{color:#000;}
 
a img{border:none;}
 
#contenitore{width:959px;margin:0 auto;position:relative;}
 
#photos{background-color:#fff;width:959px;height:420px;}
 
#photos img{width:939px;height:400px;margin:10px;padding:0;}
 
#thumbnails{width:959px;height:50px;margin:10px 0 0 0;padding:0;}
 
#thumbnails ul{margin:0;padding:0;text-align:center;}
 
#thumbnails ul li{margin:0 10px 0 0;padding:0 0 10px 0;display:inline;}
 
#thumbnails a img{height:50px;border:1px solid #fff;}
 
#thumbnails a.activeSlide img{ border:1px solid #666;}
 
#navPhotos{position:absolute;top:195px;height:30px;z-index:1000;line-height:30px;width:959px;}
 
#navPhotos a{color:#333333;font-size:1em;text-transform:uppercase;font-weight:bold;padding:5px 15px;overflow:visible;outline:none;}
 
#navPhotos a:hover{color:#666666;}
 
#navPhotos #prev{float:left;}
 
#navPhotos #next{float:right;}
 
#description{position:absolute;top:390px;left:10px;height:30px;z-index:1000;line-height:30px;width:939px;background-color:#fff;}
 
#description p{margin:0;padding:0;text-transform:uppercase;color:#333;}
</style>
 
 
<script type="text/javascript" src="javascript/jquery.js"></script>
 
<script type="text/javascript" src="javascript/jquery_cycle.js"></script>
 
<script type="text/javascript">
 
$(document).ready(function() {
 
$('#photos').cycle({
 
fx:     'fade',
 
speed:  500,
 
timeout: 4000,
 
pager:  '#thumbnails ul',
 
next:   '#next',
 
prev:   '#prev',
 
before:  onBefore,
 
after:   onAfter,
 
pagerAnchorBuilder: function(idx, slide) {
 
return '
<li><a href="#" title="Thumbnail"><img src="' + slide.src + '"/></a></li>
 
';
 
}
 
});
 
function onBefore() {
 
$('#description p').fadeOut('1000');
 
}
 
function onAfter() {
 
$('#description p').fadeIn('1000');
 
$('#description').html('
 
' + this.alt + '
 
');
 
}
 
});
</script>
 
 
 
<body>
<div id="contenitore">
<div…

Continue Reading

1 2 3 »