jQuery - das ausführen einer Funktion auf ein neues Bild

Ich bin jQuery Anfänger, so dass die Antwort möglicherweise ganz einfach:

Ich habe ein Bild, und ich möchte einige Dinge mit ihm.
Klickt ein Nutzer auf eine "Zoom" - Symbol, ich bin mit den 'manuell' - plugin (http://code.google.com/p/jquery-imagetool/) zum laden einer größeren version des Bildes. Das plugin erstellt einen neuen div um das Bild und ermöglicht dem Benutzer zu verschieben.

Klickt ein Benutzer auf einem anderen Bild, ich bin das entfernen der alten ein und laden Sie die neue ein.

Das problem kommt, wenn ein Benutzer auf eine alternative Bild, und klickt dann auf die Schaltfläche "zoom" - das imagetool plugin erstellt das neue div-Element, aber das Bild erscheint, nachdem es...

Der code ist wie folgt:

//Product Zoom (jQuery)
$(document).ready(function(){
$("#productZoom").click(function() {

    //Set new image src
    var imageSrc = $("#productZoom").attr("href");
    $("#productImage").attr('src', imageSrc);   

    //Run the imagetool plugin on the image
    $(function() {
        $("#productImage").imagetool({
            viewportWidth: 300,
            viewportHeight: 300,
            topX: 150,
            topY: 150,
            bottomX: 450,
            bottomY: 450
        });
    });
    return false;
});
});


//Alternative product photos (jQuery)
$(document).ready(function(){
$(".altPhoto").click(function() {

    $('#productImageDiv div.viewport').remove();
    $('#productImage').remove();

    //Set new image src
    var altImageSrc = $(this).attr("href");

    $("#productZoom").attr('href', altImageSrc);

    var img = new Image();
    $(img).load(function () {
        $(this).hide();
        $('#productImageDiv').append(this);
        $(this).fadeIn();
    }).error(function () {
        //notify the user that the image could not be loaded
    }).attr({
        src: altImageSrc,
        id: "productImage"
        });

    return false;       
});
});

Scheint es mir, dass das Image Tool plugin kann nicht mehr sehen, die #productImage Bild, sobald es wurde ersetzt durch ein neues Bild... Also ich denke, das hat etwas zu tun mit der Bindung? Wie denn das neue Bild Hinzugefügt wird, um die dom -, nachdem die Seite geladen wurde, wird die iamgetool plugin nicht mehr verwenden können, es richtig... ist das richtig?
Wenn ja, irgendwelche Ideen, wie man mit ihm umgehen?

InformationsquelleAutor Gary Stanton | 2008-09-25
  1. 6

    Wehey! Ich habe es aussortiert mich...

    Stellt sich heraus, wenn ich entfernen Sie die mit div komplett aus, und dann schreiben Sie mit .html, das imagetool plugin erkennt es wieder.

    Geänderten code für alle die es interessiert:

    $(document).ready(function(){

  //Product Zoom (jQuery)
  $("#productZoom").click(function() {

    $('#productImage').remove();
    $('#productImageDiv').html('<img src="" id="productImage">');

    //Set new image src
    var imageSrc = $("#productZoom").attr("href");
    $("#productImage").attr('src', imageSrc);   

    //Run the imagetool plugin on the image
    $(function() {
        $("#productImage").imagetool({
            viewportWidth: 300,
            viewportHeight: 300,
            topX: 150,
            topY: 150,
            bottomX: 450,
            bottomY: 450
        });
    });

    return false;
  });


  //Alternative product photos (jQuery)
  $(".altPhoto").click(function() {

    $('#productImageDiv div.viewport').remove();
    $('#productImage').remove();

    //Set new image src
    var altImageSrc = $(this).attr("href");

    //Set new image Zoom link (from the ID... is that messy?)
    var altZoomLink = $(this).attr("id");

    $("#productZoom").attr('href', altZoomLink);

    var img = new Image();
    $(img).load(function () {
        $(this).hide();
        $('#productImageDiv').append(this);
        $(this).fadeIn();
    }).error(function () {
        //notify the user that the image could not be loaded
    }).attr({
        src: altImageSrc,
        id: "productImage"
        });

    return false;       
  });
});
    InformationsquelleAutor Gary Stanton
  2. 1

    Könnten Sie versuchen, die Abstraktion der productZoom.klicken Sie auf() Funktion eine benannte Funktion, und dann re-Bindung nach dem Wechsel zu einem alternativen image. So etwas wie: 

    //Product Zoom (jQuery)
$(document).ready(function(){
$("#productZoom").click(bindZoom);

//Alternative product photos (jQuery)
$(".altPhoto").click(function() {

        $('#productImageDiv div.viewport').remove();
        $('#productImage').remove();

        //Set new image src
        var altImageSrc = $(this).attr("href");

        $("#productZoom").attr('href', altImageSrc);

        var img = new Image();
    $(img).load(function () {
                $(this).hide();
        $('#productImageDiv').append(this);
        $(this).fadeIn();
    }).error(function () {
        //notify the user that the image could not be loaded
    }).attr({
                src: altImageSrc,
                id: "productImage"
                });
        $("#productZoom").click(bindZoom);
        return false;

});  
});

function bindZoom() {
        //Set new image src
        var imageSrc = $("#productZoom").attr("href");
        $("#productImage").attr('src', imageSrc);       

        //Run the imagetool plugin on the image
        $(function() {
                $("#productImage").imagetool({
                        viewportWidth: 300,
                        viewportHeight: 300,
                        topX: 150,
                        topY: 150,
                        bottomX: 450,
                        bottomY: 450
                });
        });
        return false;
}

    Auch, gerollt, sowohl Ihre ready () - Blöcke in dem gleichen block.

    • Danke, aber das hat nicht funktioniert... habe die gleiche Sache, obwohl es wahrscheinlich einen besseren Weg, das zu tun, was ich Tat, war zunächst. 😉
    InformationsquelleAutor Adam Bellaire
  3. 0

    Erstmal, ich habe eine Frage, sind die .altPhoto links oder Bilder? Verursachen, wenn seine Bilder, dann wird diese Zeile ist falsch

    var altImageSrc = $(this).attr("href");

    sollte es

    var altImageSrc = $(this).attr("src");

    seine die einzige Sache, die ich finden konnte, einen Blick

    • Die alt-Fotos sind von links... so jemand ohne aktiviertes javascript wird nur gehen, um das neue Bild.
    InformationsquelleAutor Juan
Schreibe einen Kommentar