L’ho chiamato ImgVideo JS (che fantasia )

A cosa serve?

Molto spesso sui pc vecchi avere una pagina piena di video di youtube, seppur sia una semplice anteprima, può rallentare di molto la visualizzazione dell’utente.

Questo script permette di impostare un immagine, al click sull’immagine essa scomparirà per dar posto al video…

Funziona con Jquery 1.3+ e basta inserire nell’header il seguente codice:

$(function(){

	$('a.imgvideojs').click(function(){

		var link = $(this).attr('rel').split("|")[0];
		var width = $(this).attr('rel').split("|")[1];
		var height = $(this).attr('rel').split("|")[2];

		 $(this).append('<object>');
		 $(this).attr({ "width":width, "height":height });
		 $(this).append('<param value="'+link+'" name="movie"/>');
		 $(this).append('<param value="true" name="allowFullScreen"/>');
		 $(this).append('<param value="always" name="allowscriptaccess"/>');
		 $(this).append('<embed width="'+width+'" height="'+height+'" allowfullscreen="true" allowscriptaccess="always" type="application/x-shockwave-flash" src="'+link+'"/>');
		 $(this).append('</object>');
		 $(this).find("img").remove();

	});

});

Dopodichè potrete usarlo cosi:

<a rel=”LINK-DI-YOUTUBE|LARGHEZZA-PX|ALTEZZA-PX” class=”imgvideojs” href=”javascript:void(0)”><img src=”img.png” alt=”prova” title=”Immagine di Prova” /></a>

Articolo postato da: Stefano Venneri - S.V. Design - Tutto il design che ti circonda...

Articoli correlati:

1. [YouTube]: Il Fenomeno…
2. Primo Video per PES 2009
3. Video sulle funzioni del nuovo Samsung Omnia i900!

Oggi stavo finendo un sito web, ma mi è rimasto da fare la parte amministrativa per l’utente che vorrà personalizzare il tutto…

Allora essendo un pò a corto di creatività, ho trovato questa raccolta di Skin per Admin.

Questo è il link: http://themeforest.net/category/site-templates/admin-skins

Purtroppo le skin non sono gratuite, ma non credo che pagare 12 dollari sia cosi molto, visto che il template è pieno di effetti carini e funzionali…

Articolo postato da: Stefano Venneri - S.V. Design - Tutto il design che ti circonda...

Articoli correlati:

1. Lutto per Colombo-bt.
2. Aggiornamento del 16/09/2010 …

L’utilizzo è semplicissimo, basta includere il file JS nella pagina web dove si intende usarlo:

<script type=”text/javascript” src=”reflection.js”></script>

Quindi aggiungere all’immagine la classe “reflect”:

<img src=”image.jpg” alt=”image” width=”352″ height=”258″ class=”reflect” />

E’ anche possibile settare alcuni parametri come ad esempio l’opacità!

Articolo postato da: Stefano Venneri - S.V. Design - Tutto il design che ti circonda...

Articoli correlati:

1. Photo Tagger, ovvero taggare le foto di facebook automaticamente!!
2. ImgVideo JS: L’immagine si trasforma in Video!!!
3. [PHOTOSHOP]: Come creare l’effetto grafico sul profilo di Facebook

In anzitutto iniziamo a dire cos’è AJAX e cosa significa l’acronimo:

AJAX significa Asynchronous JavaScript and XML ed è una tecnica di sviluppo web per creare applicazioni web interattice (come riporta Wikipedia).

L’intento di tale tecnica è quello di ottenere pagine web che rispondono in maniera più rapida, grazie allo scambio in background di piccoli pacchetti di dati con il server, così che l’intera pagina web non debba essere ricaricata ogni volta che l’utente effettua una modifica. Questa tecnica riesce, quindi, a migliorare l’interattività, la velocità e l’usabilità di una pagina web.

Quindi, con AJAX noi possiamo richiamare delle pagine esterne, modificando una parte della pagina che stiamo visualizzando sul browser, ma tutto ciò senza aggiornare la Pagina!!!

Articolo postato da: Stefano Venneri - S.V. Design - Tutto il design che ti circonda...

Articoli correlati:

1. WordPress T&T: Come inserire i post in una pagina personalizzata.
2. PHP: Misurare le Prestazioni del Codice
3. Dormire Poco fa ricordare cose mai accadute!