jQuery mostrare alt immagine al click...

[gleenk]

jQuery mostrare alt immagine al click...

Ciao ragazzi, quello che sto cercando di fare è che quando clicco su una tab mi si apre il corrispettivo box e mi viene mostrato l'alt dell'immagine presente sotto forma di descrizione in piccolo sotto la foto. Quello che non riesco a fare è far apparire la descrizione corrispondente all'immagine presente nel box. Vi posto il codice intero...
Così com'è fa (ovviamente) apparire TUTTE le descrizioni delle immagini presenti nei tab.

[HTML]
$(document).ready(function() {
$('.tabsbob div').hide();
$('.tabul a').click(function(){
var tabula = $(this).attr('rel');
$('#' + tabula).slideDown();

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

});
[/HTML]

[ayrton2001]

Ciao gleenk,
Dovresti usare each.
Infatti attualmente esegui una medesima funzione per tutti i '.tabul a'.

[gleenk]

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

[ayrton2001]

@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.

[gleenk]

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]

[ayrton2001]

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'.

[gleenk]

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

[ayrton2001]

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?

[gleenk]

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

[ayrton2001]

@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();
        });
});

[gleenk]

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

gleenk.com/test/testtab.html

[ayrton2001]

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();
        });
});

[gleenk]

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

[ayrton2001]

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.

[ayrton2001]

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();
        });
});

[gleenk]

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

[ayrton2001]

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...).

[gleenk]

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 ^^

[ayrton2001]

@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