Visualizzazione dei risultati da 1 a 2 su 2
  1. #1

    Assegnare una variabile

    Ciao, sto realizzando il mio sito web ed ho bisogno di un aiuto.
    Ho creato una galleria di immagini che si dovrebbero aprire più grandi in overlay.
    Sono riuscita a farla funzionare ma il problema è che ho più immagini da aprire... vediamo se in codice mi spiego meglio.

    HTML

    [img]img/img01.jpg[/img]
    <div class="overlay" id="overlay" style="display:none;"></div>

    <div id="box">
    <div class="contenuto_box">
    [img]img/portfolio_big/piaggio.jpg[/img]


    testo</p>
    </div>
    <p class="chiudi">X</p>
    </div>


    JS

    $(document).ready(function() {

    $(".apri").click(
    function(){
    $('#overlay').fadeIn('fast');
    $('#box').fadeIn('slow');
    });

    $(".chiudi").click(
    function(){
    $('#overlay').fadeOut('fast');
    $('#box').hide();
    });

    //chiusura emergenza
    $("#overlay").click(
    function(){
    $(this).fadeOut('fast');
    $('#box').hide();
    });

    });

    Mi chiedevo quindi se esiste un modo per far si che possa creare dei box1,2,3,4,5... senza dover copia/incollare per ogni overlay lo script, quindi se si può implementare una variabile.

    Grazie mille

  2. #2

    Re: Assegnare una variabile

    Bisogna parametrizzare le tre funzioni.

    codice:
    [img]img/img01.jpg[/img]
    <div class="overlay" id="overlay" style="display:none;"></div>
    
    <div id="piaggio">
        <div class="contenuto_box">
            [img]img/portfolio_big/piaggio.jpg[/img]
            
    
    testo</p>
        </div>
            <p class="chiudi">X</p>
    </div>
    
    
    [img]img/img01.jpg[/img]
    <div class="overlay" id="overlay" style="display:none;"></div>
    
    <div id="ennesimo">
        <div class="contenuto_box">
            [img]img/portfolio_big/piaggio.jpg[/img]
            
    
    testo</p>
        </div>
            <p class="chiudi">X</p>
    </div>
    
    var activeBox; //per chiudere dall'overlay 
    $(document).ready(function() {
    
        $(".apri").click(
            function(){
                 var idToOpen=$(this).className().replace('apri ','');
                 activeBox=idToOpen;
                $('#overlay').fadeIn('fast');
                $('#'+idToOpen).fadeIn('slow');
            });
            
            $(".chiudi").click(
            function(){
                var idToOpen=$(this).parent().className().replace('apri ','');
            $('#overlay').fadeOut('fast');
            $('#'+idToOpen) .hide();
            });
            
            //chiusura emergenza 
            $("#overlay").click(
            function(){
            $(this).fadeOut('fast');
            $('#'+activeBox).hide();
            })
     
       });
    PS: Non sarebbe meglio usare un plugin tipo http://fancyapps.com/fancybox/ ?

    Ciao

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.