Klicken Sie auf das Bild, um es zu vergrößern

Ich benutze Thumbnail aus Bootstrap und ich möchte, dass wenn ich auf das Thumbnail klicken, um das Bild mit Originalgrößen zu erscheinen und wenn ich irgendwo das Bild mit Originalgrößen zu verschwinden klicken. Ich hoffe, Sie können mich verstehen, was ich versuche zu erklären .. Dies ist ein Beispiel für meine Miniatur CodeKlicken Sie auf das Bild, um es zu vergrößern

<div class="row"> 
    <div class="col-xs-6 col-md-3"> 

     <a href="#" class="thumbnail"> 
      <img src="..." alt="..."> 
     </a> 
     </div> 
     ... 
    </div>

Quelle

2016-04-25 Dimas

Ich suchte auf Google und ich fand nur Methoden mit Javascript :) aber ich möchte wissen, ob es möglich ist, es ohne Javascript zu machen – Dimas

Was ist falsch mit JavaScript? Ohne sie ist Ihre beste Wette "" auf die URL des Bildes in voller Größe, um es in einem neuen Fenster zu öffnen. – ceejayoz

@ceejayoz Ha! Sie können es nicht ohne JavaScript arbeiten lassen. –

Vielleicht können Sie die CSS:onfocus versuchen.

a.thumbnail:focus > img.small { 
     visibility: hidden; 
} 
a.thumbnail:focus > img.large{ 
     visibility: visible; 
}

Html:

<a href="#" class="thumbnail" tabindex="0"> 
     <img class="small" src="..." alt="..."></img> 
     <img class="large" src="..." alt="..."></img> 
    </a>

Beachten Sie, dass tabindex="0" ist hier notwendig <a> fokussierbar zu machen.

Quelle

2016-04-25 12:51:25 gdlmx

Was Sie hier wollen, ist ein modales Plugin. Bootstrap hat einen, aber es ist nicht für diese Art der Verwendung geeignet.

Sie können eine Implementierung und Beispiele finden, wie es zu benutzen hier: http://fancyapps.com/fancybox/

Diese für Ihre Lösung zu viel des Guten, aber es gibt es viele Alternativen.

Quelle

2016-04-25 12:53:54 beerwin

Klicken Sie auf das Bild, um es zu vergrößern

Antwort

Verwandte Themen