• Super User

    @gleenk said:

    uhm, ok gli do un'occhiata, non è che riesci a buttarmi giù 2 righe di codice? Solitamente capisco meglio XD se no nada cercherò di intuire dagli esempi sul sito ufficiale 😉

    Se mi fornisci l'HTML, anche uno di esempio su cui poter lavorare, l'esempio te lo faccio con piacere.


  • User Attivo

    Ecco qua 🙂

    [HTML]
    <div class="tabul">
    <ul>
    <li><a href="#" rel="voce1">Capra</a></li>
    <li><a href="#" rel="voce2">Lemure</a></li>
    <li><a href="#" rel="voce3">Zebra</a></li>
    <br style="clear:both;" />
    </ul>
    </div>
    <div class="tabsbob">
    <div id="voce1">
    <img src="capra.jpg" width="240" height="260" alt="Una capra simpatica" /><br />
    <a href="#" class="slideUp">SlideUp</a>
    </div>

    <div id="voce2">
    <img src="lemure.jpg" width="240" height="260" alt="Il lemure che medita" /><br />
    <a href="#" class="slideUp">SlideUp</a>
    

    </div>

    <div id="voce3">
    <img src="zebra.jpg" width="240" height="260" alt="La zebra sorridente" /><br />
    <a href="#" class="slideUp">SlideUp</a>
    </div>
    

    </div>
    [/HTML]


  • Super User

    Ecco l'esempio funzionante (testato sul tuo HTML):

    
    $(document).ready(function() {
        $('.tabsbob div').hide();
        $('.tabul a').each(function(){
            $(this).click(function(){
                var tabula = $(this).attr('rel');
                $('#' + tabula).slideDown();
            
                $('div#img-description').remove();
                var altImg = $('#'+tabula+' img').attr('alt');
                $('.tabsbob div').append('<div id="img-description">' +altImg+ '</div>');
                return false;
            });
        });
            
        $('a.slideUp').click(function(){
                $(this).parent().slideUp();
            });
    });
    
    

    In pratica con each (tradotto ogni) dai la funzione click per ogni '.tabul a'.


  • User Attivo

    uhm, se ti dicessi che non ho capito? 😛
    riesci a spiegarmi meglio che cosa fa l'each ed in particolare nel mio caso? sono niubbo ma magari così imparo qualcosa di utile XD
    cmq la modifica funziona solo che se ho i 3 tab aperti insieme continua a cambiarmi la descrizione 😉


  • Super User

    Nel caso in questione:
    per ogni '.tabul a' (come se fosse un ciclo for) assegno la funzione all'evento click.

    Anche prima i 3 tab erano aperti.
    La descrizione non vuoi che cambi?


  • User Attivo

    la descrizione deve essere univoca per ogni foto quando ho i 3 tab aperti simultaneamente 🙂


  • Super User

    @gleenk said:

    la descrizione deve essere univoca per ogni foto quando ho i 3 tab aperti simultaneamente 🙂
    Prova cosi:

    
    $(document).ready(function() {
        $('.tabsbob div').hide();
        $('.tabul a').each(function(){
            $(this).click(function(){
                var tabula = $(this).attr('rel');
                $('#' + tabula).slideDown();
            
                $('div#img-description_'+tabula).remove();
                var altImg = $('#'+tabula+' img').attr('alt');
                $('.tabsbob div').append('<div id="img-description_'+tabula+'">' +altImg+ '</div>');
                return false;
            });
        });
            
        $('a.slideUp').click(function(){
                $(this).parent().slideUp();
            });
    });
    
    

  • User Attivo

    nada de nada, si è impallinato tutto ^^
    ho caricato online la pagina di prova così vedi bene che cosa intendo 😉

    gleenk.com/test/testtab.html

    😉


  • Super User

    Non hai modificato come indicato nel mio ultimo post.
    Ti evidenzio in grassetto le modifiche

    
    $(document).ready(function() {
        $('.tabsbob div').hide();
        $('.tabul a').each(function(){
            $(this).click(function(){
                var tabula = $(this).attr('rel');
                $('#' + tabula).slideDown();
            
                **$('div#img-description_'+tabula).remove();**
                var altImg = $('#'+tabula+' img').attr('alt');
                **$('.tabsbob div').append('<div id="img-description_'+tabula+'">' +altImg+ '</div>');**
                return false;
            });
        });
            
        $('a.slideUp').click(function(){
                $(this).parent().slideUp();
            });
    });
    
    

  • User Attivo

    le ho provate in locale ma non andavano, saltava solo il css perchè modificavi la classe img-description 😉
    quindi ho rimesso com'era


  • Super User

    riprovo sul file di prova e ti faccio sapere.
    Riguardo al css del div con id img-description ricordati che in una pagina html gli id devono essere univoci.


  • Super User

    Questo dovrebbe andare al 99%.
    Riguardo al css applica al div img-description la classe omonima
    modificando la regola da "#img-description" a ".img-description".

    
    $(document).ready(function() {
        $('.tabsbob div').hide();
        $('.tabul a').each(function(){
            $(this).click(function(){
                var tabula = $(this).attr('rel');
                $('#' + tabula).slideDown();
            
                $('#img-description_'+tabula).remove();
                var altImg = $('#'+tabula+' img').attr('alt');
                $('.tabsbob #'+tabula).append('<div id="img-description_'+tabula+'" class="img-description">' +altImg+ '</div>');
                return false;
            });
        });
            
        $('a.slideUp').click(function(){
                $(this).parent().slideUp();
            });
    });
    
    

  • User Attivo

    evviva! così funziona! mi sto ancora chiedendo come faccia a funzionare... come fa ad identificare le immagini in modo univoco?


  • Super User

    :campione:

    Perchè agisce per ogni '.tabul a', dunque per ogni id voceX (voce1, voce2, etc...), creando anche un div con id univoco 'img-description_'+tabula' (img-description_voce1, img-description_voce2, etc...).


  • User Attivo

    scusa la mia ignoranza, ma mi sfugge ancora il nocciolo... in che punto del codice lui capisce che quell'immagine è associata al mio click su quella voce di menù senza confondersi con le altre?
    nn riesco a capire... il div con ID img-description_ viene aggiunto alla fine del nostro codice e prima non c'è nulla che gli dica che quella "tabula" è proprio quella (che casino!).

    PS: mi sa che mi sorge il dubbio che lo faccia perchè io ho creato 3 div con id diverso per le 3 voci (non avevo visto!), se non avessi fatto così? sarebbe stato impossibile?
    grazie uomini pazienti ^^


  • Super User

    @gleenk said:

    scusa la mia ignoranza, ma mi sfugge ancora il nocciolo... in che punto del codice lui capisce che quell'immagine è associata al mio click su quella voce di menù senza confondersi con le altre?
    nn riesco a capire... il div con ID img-description_ viene aggiunto alla fine del nostro codice e prima non c'è nulla che gli dica che quella "tabula" è proprio quella (che casino!).

    Lo permette l'each

    @gleenk said:

    PS: mi sa che mi sorge il dubbio che lo faccia perchè io ho creato 3 div con id diverso per le 3 voci (non avevo visto!), se non avessi fatto così? sarebbe stato impossibile?
    grazie uomini pazienti ^^
    Si, ma sarebbe stato un po' più complicato