Come realizzare uno slider di contenuti in una finestra modale

Un altro esempio delle finestre modale stavolta con uno slider con contenuti vari.   

Non entreremo nel profondo per quanto riguarda la realizzazione di una finestra modale,  per questo potresti consultare altri articoli sul nostro sito. Io invece mi concentrerò  su realizzazione di uno slider semplice e con poco codice.

Semplice slider di contenuti in una finestra modale.

Slideshow di contenuti

Vediamo subito cosa realizeremo oggi

 

 

Clicare per aprire finestra modale con contenuto scorevole e larghezza 500px

 

 

Markup HTML

 

Il nostro slideshow è costruito sotto forma di un elenco e nulla più, al tag <ul> iniziale è assegnato identificatore      id = "tips", ogni nuovo contenuto sia una immagine o altro tipo di contenuto del nostro slider sara inserito fra i tag   <li> e </ li>,  e assomigliera a questo:

<ul id="tips">
        <li><img style="float: left; margin: 5px 10px 5px 0;" src="/albero.png" alt="" /> ... Stai vedendo la finestra modale fatta con aiuto di css e jQuery con la possibilità di inserire immagini </li>
        <li>... In questo esempio vediamo una finestra modale con 500px di larghezza .</li>
        <li>...Per mostrare altre finestre dovremo semplicemente assegnare ad esse un nuovo nome e nel attributo  <strong>rel</strong>, indichiamo  <strong>popup1,2,3</strong> e cosi via,</li>
        <li>... e non dimentichiamo di assegnare anche un nuovo identificatore id  che combacia con il numero indicato in precedenza.</li>
        <li>... Impostiamo la larghezza della finestra nel tag  <a href=> e con grande orgoglio di se stessi guardiamo il risultato.</li>
</ul>
    

 

Inserire slider nella finestra modale

 

Ora dobbiamo inserire tutta questa costruzione nel blocco della finestra modale, la finestra è un contenitore div standard, nascosto per il momento (leggi i dettagli), è in esso che piazeremo il slideshow:

<div id="popup_name" class="popup_block">
<h2>slideshow o slider del testo</h2>
<ul id="tips">
        <li><img style="float: left; margin: 5px 10px 5px 0;" src="/klen.png" alt="" /> ... Stai vedendo finestra modale fatta con aiuto di css e jQuery con la possibilità di inserire immagini </li>
        <li>... In questo esempio vediamo una finestra con 500px di larghezza .</li>
        <li>...Per mostrare altre finestre dovremo semplicemente assegnare ad esse un nuovo nome e nel attributo  <strong>rel</strong>, indichiamo  <strong>popup1,2,3</strong> e cosi via,</li>
        <li>... e non dimentichiamo di assegnare anche un nuovo identificatore id   che combaci con il numero indicato in precedenza.</li>
        <li>... Impostiamo la larghezza della finestra nel tag  <code>&lt;a&gt;</code> e con grande orgoglio di se stessi guardiamo il risultato.</li>
</ul>
<p style="text-align: right;"><a href="http://ioeweb.it">Fonte ioeweb.it</a></p>
</div>

 

Impostazioni di finestra modale

Per richiamare e far funzionare la nostra finestra dovremo impostrae il nostro link in modo come segue

<a class="poplight" href="#?w=500" rel="popup_name">Aprire finestra - Larghezza = 500px</a>

La larghezza della finestra si imposta direttamente al interno del link  href="#?w=500 e viene gestito da plugin di jQuery, vorrei ricordare alcune parametri che posiamo gestire

href="#?w=500" indichiamo larhezza della finestra
    rel attributo unico per ogni finestra
   class="poplight" classe per mostrare  finestra modale

 

Decorare slideshow coi css

CSS

Ipostiamo aspetto dello slideshow attraverso il foglio di stile e sara  ridotto al minimo, ma se qualcuno ha un  forte desiderio, può sperimentare con i parametri quanto vuole, e invece, tutto e molto semplice e laconico:

#tips, #tips li {
        margin:0;
        padding:0;
        list-style:none;
        }
#tips {
        width:100%;
        font-size:14px;
        line-height:1.3em;
        }
#tips li {
        padding:20px;
        display:none; 
}

 

Javascript per far funzionere lo slideshow

Diciamo che è quasi tutto, rimane solo di far funzionare l'intero meccanismo con aiuto di jQuery. Per fare questo, colleghiamo la libreria jQuery al documento, a mio parere, è meglio farlo direttamente dalla rete attraverso CDN:

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

E sempre meglio collegarla la libreria di jQuery in fondo della pagina prima della chiusura del tag  </ body>. Dopo di che inseriamo il nostro script per far funzionare slideshow al interno della finestra modale:

<script type="text/javascript">
    // finestra modale
$(document).ready(function(){
//Clicando sul link con la classe poplight e href del tag <a> con  #
    $('a.poplight[href^=#]').click(function() {
        var popID = $(this).attr('rel'); //ricevimo il nome della finestra , importandi di non dimenticare , con l'agiunta di finestre nuove , cambiare nome nel atributo rel del link
        var popURL = $(this).attr('href'); //ricevimo larghezza dal atributo href  del link 
 
        //domande e variabili da href url
        var query= popURL.split('?');
        var dim= query[1].split('&');
        var popWidth = dim[0].split('=')[1]; //primo valore della stringa della domanda
 
        //l'aggiunta del bottone di chiusura alla finestra 
        $('#' + popID).fadeIn().css({ 'max-width': Number( popWidth ) }).prepend('<a href="#" title="Chiudere" class="close"></a>');
 
        //Definiamo margine per centrare al centro (in verticale e orizzontale)  - aggiungiamo 80 al altezza / larghezza che includono padding e larghezza del bordo indicati nel foglio css
        var popMargTop = ($('#' + popID).height() + 80) / 2;
        var popMargLeft = ($('#' + popID).width() + 80) / 2;
 
        //Impostiamo la grandezza del margine 
        $('#' + popID).css({ 
            'margin-top' : -popMargTop,
            'margin-left' : -popMargLeft
        });
 
        //Aggiungo lo sfondo semitrasparente 
        $('body').append('<div id="fade"></div>'); //div-container sara iscritto prima del tag </body>.
        $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //semitrasparenza dello sfondo, filtro per IE 
 
        return false;
    });
 
    //Chiusura della finestra e lo sfondo oscurante 
    $(document).on('click', 'a.close, #fade', function() { //chiusura al clic fuori dalla finestra cio e sullo sfondo oscurante...
    $('#fade , .popup_block').fadeOut(function() {
        $('#fade, a.close').remove();  //Sparizione graduale 
    });
    return false;
   });
});
// slideshow del contenuto
this.randomtip = function(){
 
    var pause = 5000; // pausa fra la visualizzazione del contenuto (in mille secondi) aumentando o abbassando regoliamo la velocità di rotazione :)
    var length = $("#tips li").length; 
    var temp = -1;              
 
    this.getRan = function(){
        // ottenere un numero casuale 
        var ran = Math.floor(Math.random()*length) + 1;
        return ran;
    };
    this.show = function(){
        var ran = getRan();
        // per evitare la ripetizione bisogna verificare,
        while (ran == temp){
            ran = getRan();
        }; 
        temp = ran;
        $("#tips li").hide();   
        $("#tips li:nth-child(" + ran + ")").fadeIn("fast");            
    };
    // inizializzare lo scenario, ed impostare l'intervallo
    show(); setInterval(show,pause);
 
};
 
$(document).ready(function(){   
    randomtip();
});        
</script>

Si possa inserire tutto javascript  in un file separato, chiamarlo come main-script.js e quindi connetterlo alla pagina.
È così, l'integrazione del slider di contenuti nella finestra modale è stata eseguita con successo e un altro elemento utile è pronto per usare nei tuoi progetti.

Letto 714 volte