Posts contrassegnato dai tag ‘sliding’

Oggi prleremo di un plug-in Jquery da me ideato.

Si tratta di una slideshow di immagini di fondo ai nostri siti.

Per il momento gli unici parametri configurabili sono il tempo di permanenza delle immagini e il loro fade di ingresso.

Il tutto è molto semplice.

Poche mosse ed è tutto pronto.

Scaricate Jquery 1.4.2 o superiore , il foglio di stile (CSS) e lo script (javascript) di fadebackground (link in fondo).

Inserite il tutto all’interno del tag head della vostra masterPage in questo modo:


<head>
<title></title>
<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/fadeBackground.js" type="text/javascript"></script>
<link href="css/fadebackground.css" rel="stylesheet" type="text/css" />
</head>

Benissimo ora siamo pronti a posizionare le immagini.

Immettiamo subito dopo il tag body un tag DIV con le immagini nel seguente modo:


<div id="bgFader"><img src="immagini/rotazione/panorama.jpg" alt="" />
<img src="immagini/rotazione/panorama-piazzola.jpg" alt="" />
<img src="immagini/rotazione/pescatori.jpg" alt="" />
<img src="immagini/rotazione/piazzola.jpg" alt="" />
<img src="immagini/rotazione/solarium.jpg" alt="" />
</div>

Si faccia particolare attenzione all’ID del tag DIV. DEVE ESSERE SCRITTO COME IN ESEMPIO

Benissimo.

Ora sempre all’interno della nostra pagina master dobbiamo identificare il contenitore base.

Per una msterpage aspx il contenitore sarà identificato da una cosa del genere:


<div id="content"  >
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>

Ecco. Noi dobbiamo identificare il tag DIV contenitore del ContentPlaceHolder con l’ID content.

Ultimo passo e avviare lo script.

Come?

Semplice.

A fine masterpage inserite lo script cosi come segue:


<script>
fadebackground.init();

</script>

Dopo ciò abbiamo finito il vostro fade dovrebbe partire senza alcun problema.

Come sopra anticipato si possono cofigurare, er l momento, solo 2 parametri:

time – tempo di permanenza

fade – tempo di ingresso dell’immagine

Di default il tempo di permanenza è di 5 secondi e quello di fade e 3 secondi ma cambiabile a piacmento.

esempio di codice:


<script>
fadebackground.init({
fadeIn: 5000,
time:15000
});
</script>

Con questo esempio abbiamo impostato un tmo di permanenza delle foto  a 15 secondi e un fade di 5.

Spero di essere stato abbastanza chiaro nell’esprimermi.

Per qualsiasi chiarimento sono qui.

Saluti.

Link dowload JQUERY

Link download CSS fadeBackground

Link download Script fadeBackground

La sezione BUG e MIGLIORAMENTI è qui per dargli maggiore visibilità

Allora cominciamo con le modifiche:

E stato aggiornato un BUG sulla trasparenza del DIV MASTER. Scaricate il nuovo file


Buongiorno,

oggi sono qui a presentarvi un nuovo plugin JQuery: SLIDING.

SLIDING è un plugin che vi permette di creare uno splendido effetto movimento per il vostro sito.

In pratica si è pensato di creare un vero e proprio menu grande quanto tutto la pagina(questa la mia idea) ma ovviamente lui si regola in base al suo contenitore.

Nel caso in cui il contenitore non abbia un altezza impostata, SLIDING prenderà l’altezza della finestra del browser come impostazione base.

Infatti il plugin è auto regolabile in base alle dimensioni di risoluzione.

Scaricate la demo in fondo alla pagina prima di continuare a leggere.

Per questo plugin è stata utilizzara la versione 1.7 di Jquery scaricabile dal sito stesso di Jquery 🙂 .

Allora cominciamo.

Per prima cosa aprimo la nostra bella pagina HTML/ASP/ASPX/PHP ec…….

Andiamo ad inserire all’interno dell’head in nostri file JS di jquery e quello del plugin SLIDING.

In più aggiungiamo il CSS del plugin SLIDING.

In tutto ci dovremmo trovare in questa situazione:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
  <link href="css/sliding.css" rel="stylesheet" type="text/css" />
  <script src="scripts/jquery-1.7.min.js" type="text/javascript"></script>
  <script src="scripts/sliding.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" ">

</form>
</body>
</html>

Dopo di che andiamo a inserire il codice HTML necessario al funzionamento del plugin:

<div>
  <div class='piccoli'></div>
  <div class='piccoli'></div>
  <div class='piccoli'></div>
  <div class='piccoli'></div>
  <div id="master">
  </div>
</div>

Spieghiamo:ogni DIV con classe PICCOLO rappresenta l’unita cliccabile di piccole dimensioni, mentre il DIV MASTER rappresenta il contenitore del contenuto.

Bisogna guardare la DEMO per capirne bene il funzionamento e le specifiche.

Continuiamo:

Ora non resta che avviare il nostro script subito dopo il caricamento dell’intera pagina in questo modo:


<script>
$(document).ready(function () {
sliding.init();
});
</script>

Solo creando e impostando queste piccole cose il plugin funziona correttamente, ma ci sonoun po di parametri che e possibile impostare:

  • time (ms)  :  numerico – imposta il tempo di spostamento degli element. Di default è impostato a 1500 ms
  • childrenHover :  0/1 – setta o meno l’effetto del passaggio sui DIV con classe PICCOLI. Di default = 1
  • segnaPosto : 0/1 – setta o meno l’effetto di elemento DIV selezionato
  • segnaPostoHTML : stringa – HTML da passare per impostare il segnaposto. Necessario segnaPosto=1.  Di default = <div></div> in modalità trasparente bianco
  • classPiccoli : stringa – classe assegna ai DIV PICCOLI se impostate una classe diversa da”piccoli”.Di default ovviamente è “piccoli”
  • IDmaster : stringa – ID del DIV MASTER se gli assegnate un’ID diverso da “master”. Di default ovviamente è “master”
  • marginElement (px) : numerico – setta la spaziatura tra tutti i DIV nel contesto.
  • diffHeight (px) : numerico – setta una spaziatura in altezza per rimpicciolire le dimensioni del plugin.
  • piccoliWidth : stringa – setta la dimensione dei DIV PICCOLI. si può inpostare in qualsiasi unità o percentuale.

Potete scaricare tutti gli script con una pagina di esempio QUI

Se avente miglioire da comunicare o critiche , sono qui ad aspettare

Ciaooooo