مسج - تشغيل وظيفة على صورة جديدة

Question

أنا مسج المبتدئ ، وبالتالي فإن الجواب على هذا قد تكون بسيطة جدا:

لدي صورة, وأود أن تفعل عدة أشياء معها.عندما ينقر المستخدم على 'التكبير' الرمز ، أنا تشغيل 'imagetool' البرنامج المساعد (http://code.google.com/p/jquery-imagetool/) لتحميل نسخة أكبر من الصورة.البرنامج المساعد يخلق شعبة جديدة حول الصورة و يسمح للمستخدم بان جميع أنحاء.

عندما ينقر المستخدم على صورة بديلة ، أنا إزالة القديمة و التحميل في واحدة جديدة.

المشكلة تأتي عندما ينقر المستخدم على صورة بديلة ، ثم ينقر على زر التكبير - في imagetool البرنامج المساعد يخلق الجديدة div لكن الصورة يظهر بعد ذلك...

التعليمات البرمجية كما يلي:

// 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;       
});
});

يبدو لي أن imagetool البرنامج المساعد يمكن أن يعد رؤية #productImage صورة مرة واحدة وقد تم استبدال صورة جديدة...لذلك أنا أعتقد أن هذا له علاقة ملزمة ؟ كما في صورة جديدة تضاف إلى dom بعد تم تحميل الصفحة ، iamgetool المساعد لم يعد يمكن استخدامه بشكل صحيح...هل هذا صحيح ؟ إذا كان الأمر كذلك, أي فكرة عن كيفية التعامل معها ؟

Answer 1

Wehey!لقد فرز بها نفسي...

يتبين إن إزالة تحتوي div تماما ثم إعادة كتابتها مع .html ، imagetool المساعد تدرك ذلك مرة أخرى.

تعديل رمز لمن هو مهتم:

$(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;       
  });
});

Answer 2

قد تتمكن من محاولة التلخيص في productZoom.انقر فوق() وظيفة إلى وظيفة اسمه ، ومن ثم إعادة الربط بعد تغيير صورة بديلة.شيء من هذا القبيل:

// 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;
}

كما توالت على حد سواء الخاصة بك جاهزة() كتل في نفس الحي.

Answer 3

أولا لدي سؤال واحد،.altPhoto الروابط أو الصور ؟ لأنه إذا وصورها ثم هذا الخط هو الخطأ

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

ينبغي أن يكون

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

لها الشيء الوحيد الذي يمكن أن تجد في لمحة