wie Bild nach dem Klicken auf das Bild über den Bildschirm zu öffnen

Question

In meinem Code gibt es eine Menge Bild in einer Tabelle. Ich möchte auf ein Foto klicken & dann wird das Foto in einer großen Größe über den Bildschirm angezeigt. Aber ich habe nicht viel Ahnung von Javascript & jquery. Ich versuche das zu tun, aber das Problem ist, dass es eine Box öffnet, aber das Bild nicht zeigt. Ich weiß, dass es ein Problem im Skript gibt, um das Bild zu zeigen. kannst du mir bitte sagen, wo ist das falsch oder gib mir einen richtigen Code für das Popup-Bild nach dem Klick.

mein Header-Link ist unten. Gibt es noch einen weiteren Link?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 

    <link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.4.2.min.css" /> 
    <script type="text/javascript" src="http://w2ui.com/src/w2ui-1.4.2.min.js"></script> 

hier ist html Teil:

<div> 
    <td> <img class="btn" onclick="popup()" style="width:100px; height:100px; border-radius:4px;" src="upload/<?php echo $row['image'];?>"></img></td> 
</div> 

hier das Javascript ist:

<script type="text/javascript"> 
    function popup() { 
     w2popup.open({ 
      title: 'Image', 
      body: '<div class="w2ui-centered"><img src="upload/<?php echo $row['image'];?>"></img></div>' 
     }); 
    } 
</script> 

kann mir jemand bitte helfen, wie in dem Pop-up-Fenster Bild zu zeigen. Danke im Voraus.

Answer 1

Anstelle des onclick Attribut verwendet werden, könnten Sie eine Klasse popup_image zu Ihrem img zuweisen und einen Click-Handler anhängen, wenn das DOM bereit ist.

Ich nahm mir die Freiheit, Skripte und Tags zu entfernen, die nicht notwendig waren, um das Ergebnis zu demonstrieren.

$(document).ready(function() { 
 

 
    $(".popup_image").on('click', function() { 
 
    w2popup.open({ 
 
     title: 'Image', 
 
     body: '<div class="w2ui-centered"><img src="' + $(this).attr('src') + '"></img></div>' 
 
    }); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script type="text/javascript" src="http://w2ui.com/src/w2ui-1.4.2.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.4.2.min.css" /> 
 

 
<img class="btn popup_image" style="width:100px; height:100px; border-radius:4px;" src="http://lorempixel.com/g/200/200/"></img>

Answer 2

Ersetzen Sie Ihre jquery mit unter jedem Versuch:

<script type="text/javascript"> 
    function popup() { 
     var image = $(this).attr('src'); 
     w2popup.open({ 
      title: 'Image', 
      body: '<div class="w2ui-centered"><img src="'+image+'"></img></div>' 
     }); 
    } 
</script> 

Ich gehe davon aus die Bilder korrekt angezeigt werden, die Sie klicken

Answer 3

Ich würde mit Colorbox von Jack Moore empfehlen. Es verwendet JQuery und ist sehr anpassbar.

Colorbox: http://www.jacklmoore.com/colorbox/

Demo: http://www.jacklmoore.com/colorbox/example1/

Wenn Sie mit PHP nicht entgegengesetzt sind, können Sie auch prüfen, UberGallery möchten. Es nutzt colorbox intern und kann einfach mit

<?php include_once('UberGallery.php') UberGallery::init()->createGallery("path to dir","name of gallery"); ?>