Ajoin – Lunardi Loris

8dic/110

Simple Slide 1.0 (JQuery plugin)

Ciao a tutti!
dopo moltissimo tempo torno con un semplicissimo ma utilissimo plugin .Non è scataflescioso come 3D Gallery view, però a sua volta sa essere molto utile quando serve.
Questo plugin è facilissimo da usare ma soprattutto non aggiunge fronzoli qua e la per la pagina. Semplicemente prende degli elementi e li fa scorrere con effetto cross fade senza influenzare il resto dei contenuti. Utile per fare header dinamiche, sfondi animati, sequenze di foto e chi più ne ha più ne metta .

COME FUNZIONA?

Prendete un qualsiasi contenitore (div,span,body,etc.) dategli un volume e buttateci dentro altri elementi con la classe ".elSlide". Richiamate la funzione per l'elemento padre e automaticamente lo script inizierà a far scorrere gli elementi al suo interno con la classe ".elSlide" con uno semplice cross fade slide. (P.S. qualsiasi tipo di elemento, non solo immagini )

CODICE:

<script type="text/javascript" src="inc/jquery.min.js"></script>
<script type="text/javascript" src="inc/simpleFade.js"></script>

<script>
$(document).ready(function(){
    $('#fade').simpleFade();
});
</script>
<div id="fade">
	<img src="img/1.jpg" class="elSlide">
	<img src="img/2.jpg" class="elSlide">
	<img src="img/3.jpg" class="elSlide">
	<img src="img/4.jpg" class="elSlide">
	<img src="img/5.jpg" class="elSlide">
	<div>
	    <!-- Qualsiasi altro contentuto della pagina (P.S.Gestite gli elementi con z-index e position per dargli un rilievo)-->
	</div>
</div>

MODIFICA VARIABILI:

Per non farci mancare niente ho aggiunto un bel po' di variabili da impostare per gli utilizzi più estremi (tempo, velocità, callback, inizio, etc.)

Ecco la lista delle impostazioni:

<script>
$(document).ready(function(){
   $('#fade').simpleFade({
    //VELOCITA' e TIMEOUT
     velocita: 1500, //Velocità del cross fade
     timeout: 7000, //Intervallo tra un sequenza e un'altra
    //START
     start: 1, //Elemento di inizio sequenza
    //RESTART
     restart: true, //Se false si ferma all'utlimo elemento
     restart_to : 1, // Se restart è impostato su true, definisce in quale elemento far ripartire lo slide
    //USCITA
     goout: false, //a differenza del restart impostato su false questa impostazione farà si che lo script finisca con il fade out dell'ultima immagine
    //RANDOM
     random: false, //impostando true lo script inizierà a far scorrere gli elementi con sequenza casuale stando attento a non ripetere due elementi uguali in successione.
    //CALLBACK
     callback : function(){} //impostare qui eventuali funzioni di callback che verranno eseguite al termine della sequenza se restart è impostato in false o se goout è true.
 });
});

</script>

Tutti i parametri qui sopra elencati corrispondono ai parametri di default del plugin.

Sbizzarritevi pure e non esitate a darmi consigli per migliorarlo.
Per qualsiasi richiesta rimango a vostra completa disposizione!

Ciao,
Loris.

Inserito in: Jquery Plugin, Simple Fade Nessun commento

20feb/111

3D Gallery View v.1.1 (JQuery plugin)

Ecco a voi il nuovo aggiornamento della galleria con effetto 3d.

Gli aggiornamenti comprendo:

Aggiunta del ridimensionamento
Apertura immagini con doppio click
Supporto immagini verticali
Miglioramenti vari

Il principio di funzionamento rimane il medesimo presentato nella versione 1.0 (3D Gallery View v.1.0 (JQuery plugin)). Cambia l'aggiunta di nuove variabili che possono essere modificate dalle impostazioni di default semplicemente in questo modo:

I valori, come sono scritti nell'esempio corrispondono ai valori di default.

<script>
$(document).ready(function(){
$('#ddd').dddgallery({

//RESIZE
resize: true,

//LARGHEZZA BOX PRINCIPALE
p_height: 700,

//IMPOSTAZIONI MINI BOX
min_height: 250, //larghezza minima box(in pixel)
max_height: 400, //larghezza massima box(in pixel)

});
});
</script>

Inserito in: 3D Gallery view, Jquery Plugin 1 commento

20gen/1111

3D Gallery View v.1.0 (JQuery plugin)

Ecco a voi il mio primo Plugin per jquery e anche il mio primo post.. non che prima pagina o prima volta che scrivo 'Ecco a voi il mio primo Plugin per jquery e anche il mio primo post.. non che prima pagina o prima volta che scrivo'...

Beh, finito il prologo partiamo con il plugin ..

3D Gallery View v.1.0!!!

Un mirabolante sistema di visualizzazioni di immagini con effetto 3d. Il plugin permette di visualizzare una serie di immagini in un box definito in ordine casuale e editabile. Le immagini verrano disposte nello spazio in modo da impedire che vengano celate completamente (se non una sovrapposizione rara tra le immagini più piccole), esse poi allo spostamento del mouse si sposteranno creando un grazioso effetto 3D. Vi sarà un gioco di ombre e di trasparenze per rendere il tutto più realistico possibile.

Le immagini potranno essere spostate e ingrandite per visualizzarle nel box principale.

COME FUNZIONA?

Non dovrete fare altro che inserire le vostre immagini all'interno di contenitori (div con classe "box") a loro volta racchiusi all'interno di un'altro contenitore. Richiamate la funzione dddgallery() per il contenitore padre e il tutto si animerà da solo.

CODICE:

<script type="text/javascript">
$(document).ready(function(){
$('#ddd').dddgallery();
});
</script>
<div id="ddd">
<div class="box box_principale"><img src="immagini/DSC_0410_DxO.jpg" /></div> //aggiungere la classe principale se si vuole che questa sia la prima immagine a comparire in centro
<div class="box"><img src="immagini/DSC_0373_DxO.jpg" /></div>
<div class="box"><img src="immagini/DSC_0306_DxO.jpg" /></div>
</div>

MODIFICA VARIABILI:
É possibile modificare le impostazioni di default (es. dimensione immagine principale, miniature etc.). Vediamo come..

I valori, come sono scritti nell'esempio corrispondono ai valori di default.

<script>
$(document).ready(function(){
$('#ddd').dddgallery({

//DRAG & DROP
drag : true,

//OMBRE
shadow: true, //se disabilitare l'effetto ombra
dist_shadow : 30, //distanza massima ombra (in pixel)
dim_shadow: 10, //dimensione massima ombra (in pixel)
col_shadow: '#111', //colore ombra

//SPOSTAMENTO FINESTRE PER L'EFFETTO 3D
max_spost: 300, //spostamento immagini più lontane (in pixel)
min_spost: 5, //spostamento immagini più vicine (in pixel) (praticamente l'immagine principale)

//LARGHEZZA BOX PRINCIPALE
p_width: 700,

//IMPOSTAZIONI MINI BOX
min_width: 250, //larghezza minima box(in pixel)
max_width: 400, //larghezza massima box(in pixel)
min_opacity: 0.2, //opacità box più lontanto (quello più vicino sarà a livello 1)
livel_range: 20 // numero di livelli

});
});
</script>