Zeigen Sie einem bestimmten Bild klicken

Ich versuche ein div-Element zu zeigen, wenn ein Bild angeklickt wird. Dieses div-Element enthält die angeklickte Bild, nur größer. Ich kann nicht ankommen dieses zu wirken obwohl. Ich habe versucht eine Menge verschiedener Dinge und nun hoffe ich, jemand kann mir helfen oder geben Sie mir einige Hinweise.

Zuerst habe ich meine html-Bild, das erzeugt wird in einer php-while-Schleife:

<img src='".$picsarray[$picsfrom]."' class='gallerythumbnail'>

Dann habe ich meine CSS für die div möchte ich angezeigt, klicken Sie auf das Vorherige Bild:

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

Und Letzte habe ich einige Jquery code, den ich versuchte zu machen:

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

Ich weiß, ich kann die Adresse der angeklickten Bild über dieser Zeile:

$(this).attr('src')

Ich weiß nicht, wie es in einem div angezeigt, wenn ein Bild angeklickt wird

Ich hoffe jemand versteht was ich meine und kann mir helfen, in die richtige Richtung.

Warum ist dein jQuery entkommen?
dein CSS hat ID #showimagediv (was ist falsch, wenn du mehr von Ihnen) --- während du KLASSE $(".showimagediv").show(); in Ihre jQuery
oh, das ist, weil es ein Teil von einem php-Skript. Ist das falsch? Und ich kann sehen, dass meine Frage wurde gewählt, habe ich geschrieben was falsch oder ?
Zusätzlich gibt es keine Notwendigkeit, zu entkommen \" als Sie brauchen, um zu erklären, wo genau das DIV ist, ist es einem oder viele etc etc. Sein präziser, wenn Sie wollen eine schnelle und präzise Antwort
Ich weiß nicht, warum es nach unten gestimmt, wahrscheinlich dazu führen, dass Sie verpasst einige details... wie sieht das zurückgegebene Bild-URL und der Teil, der Sie interessiert etc etc

InformationsquelleAutor Langkiller | 2013-09-09

6

Holen Sie sich die Quelle von dem thumbnail und erstellen Sie ein neues Bild eingefügt werden, in dem DIV, wo Sie versuchen zum anzeigen der angeklickten Bild :
```
$(document).ready(function() {
    $('.gallerythumbnail').on('click', function() {
        var img = $('<img />', {
                      src     : this.src,
                      'class' : 'fullImage'
                  });

        $('.showimagediv').html(img).show();
    });
});
```
Das ist genau das, was ich gesucht habe 🙂 vielen Dank
kein problem !
Gibt es eine Möglichkeit die Größe des Bildes, wenn wir füllen es in ein div? derzeit ist das Bild, das immer angezeigt, auf der div ist wirklich klein, im Grunde die Größe der Miniaturansicht.
Sicher, die Klasse fullImage wird Hinzugefügt, um das vollständige Bild, so dass nur die Größe ändern mit CSS.
können Sie haben einen Blick auf diese Frage: stackoverflow.com/questions/54530797/.... Das Bild verliert seine Klarheit beim Zoomen in sehr verschwommen..

InformationsquelleAutor adeneo
1

Dann habe ich meine css für das div zu sein möchte ich zeigte auf auf der vorherigen Bild

wenn es richtig ist, was Sie sagte, vorherigen ist das Bild, das bedeutet, dass das DIV-Element .next()!

verwenden Klasse für das DIV in Ihrem CSS:
```
.showimagediv {
```
jQuery
```
$(function() { //DOM ready shorthand

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

});
```
InformationsquelleAutor Roko C. Buljan
0

Zunächst, Ihren CSS-code #showimagediv. # steht für ID-Attribut.
Ihre jQuery-code verwendet .showimagediv. . steht für CLASS-Attribut.

Also als erstes solltest du dich entscheiden, ob dieser showimagediv ist eine ID oder ein DIV und als richtige CSS oder Ihre jQuery.

Als, put Ihre img-tag in eine so es wird 'anklickbar'. href="#" bedeutet, dass nichts passieren wird, wenn Sie darauf klicken.
```
<a href="#" id="image">
    <img src='".$picsarray[$picsfrom]."' class='gallerythumbnail'>
</a>
```
Und ändern Sie Ihre jQuery-Funktion (Verwendung div.showimagediv wenn es ein class-Attribut oder div#showimagediv wenn es ein id-Attribut):
```
$(function() {
    $("a#image").click(function() {
        $("div.showimagediv").css("display", "block");
    });
});
```
So, wenn Sie auf das Bild im link, es wird sich ändern, den display-Wert aus keine zu block. Dies wird nicht wechseln, es wird sich einmal zeigen und nicht verstecken Sie wieder.

Wenn Sie brauchen, um umzuschalten, müssen Sie kontrollieren, dass innerhalb der jQuery-Funktion, wie diese:
```
$(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);
    });
});
```
InformationsquelleAutor Edson Horacio Junior

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.