Mostra un’immagine specifica al clic

Sto cercando di ottenere un div da mostrare quando si fa clic su un’immagine. Questo div dovrebbe contenere solo l’immagine cliccata più grande. Non riesco a farlo funzionare comunque. Ho provato molte cose diverse e ora spero che qualcuno possa darmi una mano o darmi dei suggerimenti.

Per prima cosa ho la mia immagine html, che viene generata in un ciclo php while:

 

Poi ho il mio CSS per il div che voglio mostrare al click dell’immagine precedente:

 #showimagediv { display: none; width: 500px; height: 500px; margin-left: 100px; margin-top: -300px; position: fixed; background-color: #f00; z-index: 6; } 

E per ultimo ho un codice Jquery che ho provato a fare:

  $(document).ready(function() { $(\"#gallerythumbnail\").click(function( event ) { $(\".showimagediv\").show(); }); });  

So che posso ottenere che l’indirizzo dell’immagine selezionata utilizzi questa linea:

 $(this).attr('src') 

Non so come usarlo in un div, mostrato quando si fa clic su un’immagine

Spero che qualcuno capisca cosa intendo e può aiutarmi nella giusta direzione.

Ottieni la fonte dalla miniatura e crea una nuova immagine da inserire nel DIV in cui stai cercando di visualizzare l’immagine cliccata:

 $(document).ready(function() { $('.gallerythumbnail').on('click', function() { var img = $('', {src : this.src, 'class': 'fullImage' }); $('.showimagediv').html(img).show(); }); }); 

Poi ho il mio css per il div che voglio mostrare al click dell’immagine precedente

se è corretto quello che hai detto, quello precedente è l’immagine, il che significa che il DIV è .next() !

usa la class per il tuo DIV nel tuo CSS :

 .showimagediv { 

jQuery

 $(function() { // DOM ready shorthand $(".gallerythumbnail").click(function() { $(this).next('.showimagediv').show(); // or you want .toggle() ? }); }); 

Prima di tutto, il tuo codice CSS #showimagediv . # sta per attributo ID. Il tuo codice jQuery usa .showimagediv . . sta per attributo CLASS.

Quindi per prima cosa dovresti decidere se lo showimagediv è un ID o un DIV e correggere il tuo CSS o il tuo jQuery.

Poi, metti il ​​tuo tag img all’interno di uno in modo che diventi “cliccabile”. href = “#” significa che non succederà nulla quando lo fai clic.

    

E cambia la tua funzione jQuery (usa div.showimagediv se è un attributo di class o div # showimagediv se è un attributo id):

 $(function() { $("a#image").click(function() { $("div.showimagediv").css("display", "block"); }); }); 

Quindi, quando fai clic sull’immagine all’interno del link, cambierà il valore visualizzato da none a block . Questo non cambierà, mostrerà una volta e non si nasconderà più.

Se hai bisogno di cambiare devi controllarlo all’interno della funzione jQuery, in questo modo:

 $(function() { $("a#image").click(function() { var actualDivDisplay = $("div.showimagediv").css("display"); var newDivDisplay = ""; if (actualDivDisplay == "none") { newDivDisplay = "block"; } else { newDivDisplay = "none"; } $("div.showimagediv").css("display", newDivDisplay); }); });