Archivi tag: jQuery

Ridimensionare immagini con jQuery

Voglio condividere un piccolo script jQuery che permette di ridurre le dimesioni di un ‘immagine con jQuery.

$(window).bind("load", function() {
	// IMAGE RESIZE
	$('#product_cat_list img').each(function() {
		var maxWidth = 120;
		var maxHeight = 120;
		var ratio = 0;
		var width = $(this).width();
		var height = $(this).height();

		if(width > maxWidth){
			ratio = maxWidth / width;
			$(this).css("width", maxWidth);
			$(this).css("height", height * ratio);
			height = height * ratio;
		}
		var width = $(this).width();
		var height = $(this).height();
		if(height > maxHeight){
			ratio = maxHeight / height;
			$(this).css("height", maxHeight);
			$(this).css("width", width * ratio);
			width = width * ratio;
		}
	});
	//$("#contentpage img").show();
	// IMAGE RESIZE
});

Realizzare anteprime di prodotti con jQuery

Oggi voglio proprorvi dei plugin per jQuery che permettono di realizzare delle anteprime di prodotti, di un eventuale sistema di e-commerce, in modo davvero particolare.
productColorizer è una semplice e utile soluzione che permette di visualizzare l’anteprima di un prodotto in diversi colori. Demo

threesixty è un fantastico plugin che permette di visualizzare immagini a 360 gradi. Demo

Utilissimi Tutorial jQuery

Di seguito una collezione di tutorial per jQuery.

Check Boxes con jQuery e CSS

jQuery Tutorials

Effetto shutter con jQuery and Canvas

jQuery Tutorials

Slideshow con immagini di flicker

jQuery Tutorials

Personalizzare il muro di Facebook con un template jQuery

jQuery Tutorials

Slider con immagini a rotazione con jQuery

jQuery Tutorials

Semplice  Slideshow con JQuery

jQuery Tutorials

Muovere il contenuto con jQuery

jQuery Tutorials

Creare menu animanto in  jQuery

jQuery Tutorials

Diagrammi animati

jQuery Tutorials

Espandere immagini come menu in  jQuery

jQuery Tutorials

Menu animato in jQuery

jQuery Tutorials

Semplice menu con tooltip simi a quello di Flickr

jQuery Tutorials

Effetto Overlay

jQuery Tutorials

Galleria Fullscreen Gallery con Thumbnail Flip

jQuery Tutorials

Shuffle tra immagini usado  JQuery

jQuery Tutorials

Slider per preview di Thumbnails in  jQuery

jQuery Tutorials

Galleria in jQuery

jQuery Tutorials

Convertire codice jQuery in un plugin

jQuery Tutorials

Parallax Slider con  jQuery

jQuery Tutorials

Form animato con  jQuery

jQuery Tutorials

Semplicissima pagina per profilo

jQuery Tutorials

Spotlight

jQuery Tutorials

Carrello usando drag and drop

jQuery Tutorials

Votazioni con jQuery

jQuery Tutorials

Sistema di taggin similea quello di Delicious

jQuery Tutorials

jQuery teamplate e AJAX

jQuery Tutorials

Form Ajax con jQuery e PHP

jQuery Tutorials

Caricare animazioni con jQuery

jQuery Tutorials

Elegante galleria di Immagini

jQuery Tutorials

Gioco di Memoria con jQuery

jQuery Tutorials

Scroll con Collaps

jQuery Tutorials

Galleria Photografica Skitter

jQuery Tutorials

Mostrare e nascondere contenuto con un bottone

jQuery Tutorials

Creare un kaleidoscopio usando jQuery e CSS

jQuery Tutorials

Carta interattiva con  jParallax

jQuery Tutorials

Visualizzare miniatura della pagina uploadata con jQuery

Circa un mese fa vi proposi un articolo, molto interessate che permetteva di uplodare contemporaneamente più file sul vostro server;

Upload di più file in PHP [Multiple file PHP]

Adesso invece, quello che vi propongo, è uno script che permette di visualizzare una miniatura dell’immagine caricata sul server.

Penso che sia possibile anche una integrazione tra i due script.

Tale script, e la guida è possibile visionarla su: http://www.zurb.com/playground/ajax_upload

Realizzare un widget: Chi è online con PHP, jquery e Mysql

Vi segnalo un link interessante per tutti gli sviluppatori che stanno realizzando un sito web.

Potrebbe essere utile, soprattuto per chi sta realizzando una sorta di social network, magari utilizzando buddypress, un widget per conoscere chi è online ( chi è collegato) e mostrando da quale nazione. Se si usa buddypress bisogna creare un plugin apposito ed effettuare l’embed del codice.

LINK