Archivi tag: javascript

Creare una galleria sul proprio sito da Picasa con pwa.js

Screenshot: Sample implementation of pwa.js from bostonironsidesrfc.org

Screenshot

Se volete visualizzare foto e video di Google Picasa Web Album nel vostro sito web, dinamicamente basta aggiungere solo due righe di codice al sito web esistente.

Il link dell’utility java-script è: http://sourceforge.net/projects/pwa/

Per utilizzarlo basterà fare l’ap-loade del file che potete scaricare pwa.js dal sito precedente e inserire nella pagina dove volete visualizzare la galleria le seguenti righe di codice:

<script type="text/javascript">username='YourPicasawebUsername'; photosize='800'; 
columns='4';</script>
       <script type="text/javascript" src="http://www.yoursite.com/pwa.js"></script>

Assicurandovi di modificare YourPicasawebUsername al proprio nome utente Picasaweb noltre, www.yoursite.com dovrebbe essere modificato in maniera tale da avere il path completo dove è stato inserito il file pwa.js.

Lo script cerca le immagini back.jpg, next.jpg, e home.jpg, nel stessa directory dove è presente il file pwa.js, per creare le frecce di navigazione. Assicurati che esistano! Sono presenti alcuni nel repository di SourceForge ma potete sostituirle con delle vostre immagini personalizzate.

“Photosize” è la dimensione dell’immagine per essere visualizzato durante la visualizzazione di singole immagini, mentre, “colonne” è il numero di colonne di foto da visualizzare sul tuo sito nella galleria di album.
È possibile omettere uno di questi valori, se lo si fa, le impostazioni di default sono 800 per photosize e 4 per colonne.

Sempre su SourceForge allo stesso indirizzo è possibile scaricare anche una seconda versione di questo script con il nome:pwa-no-picasa-links.js

Funziona allo stesso modo di pwa.ja solo che questa versione nasconde tutti i link-back a Picasa.

Effetti Javascript

Oggi voglio presentarvi alcuni dei tanti effetti, che potrete

applicare alle vostre foto/immagini…utili per chi volesse inserirle in un blog-myspace.

Corner.js, che permette di aggiungere bordi arrotondati, ombre ed effetti di rilievo alle imagini
Glossy.js, pulsantoni in stile 2.0 fatti unicamente in javascript
Loupe.js: un effetto “lente”
gamecasino machine a sous interessante da utilizzare per gallerie di immagini (effetto polaroid)
Curl.js, per creare il risvolto delle immagini
Reflex.js, che aggiunge il riflesso alle immagini e le mette anche in prospettiva
Edge.js, per effetti vari sui bordi
Mapper.js, per le mappe (ve lo lascio scoprire da soli)
Immagine sfumata con link
Cambio immagine per bottoni, utilissimo per creare menu
Una immagine a caso
Una immagine al giorno – Settimanale
Una immagine al giorno – Settimanale – Creata per la segreteria di anamilano.it
Cambio immagine automatico random (no link)
Background random – uno sfondo a caso
Immagine passa sul monitor
Bottoni con cambio immagine jpg o gif animata, utile per indirizzare a pagine web.
Bottone con cambio immagine (utilizzabile uno solo)
Occhi che seguono il tuo mouse
Bollicine azzurre che salgono dal monitor
Bollicine nere che salgono dal monitor
Immagini offuscate
Pallone che rimbalza sullo schermo
Pallone che rimbalza sullo schermo 2 (altra Javascript)
Palloni che rimbalzano sullo schermo (altre 2 versioni con bolle)
Foglie che cadono
Immagini fluttuanti cliccabili (senza barra scorrimento)
Immagine spezzata che si compone
Immagine scomposta cliccabile
immagini volano sullo schermo “mosca” (altre versioni con “logo Ana”, “occhi”, “telefono”, “under construction”, “cellulare”.
Scroller pagina verticale
Scroller pagina orizzontale
Sfondo fisso
Sfondo dinamico (con altri 12 esempi di sfondi)
Sfondo dinamico elicottero
Sfondo sfumato
Rose che scendono dal monitor
Cuoricini che salgono
Gocce d’acqua che scendono dal monitor
Allarga immagine con doppio click

Continua la lettura di Effetti Javascript