0

I have a two function that work only when i click on some element. For example:

$(".item-image").click(function() {

    $('#close-zoom').show();
    $('.item-image-box').attr('class', 'item-image-box-zoom');
    $('.item-image').attr('class', 'item-image-zoom');
    var main_img_src = document.getElementById('main_image_src').src;
    start_srt_index = main_img_src.lastIndexOf(".");
    main_img_src_ext = main_img_src.substring(start_srt_index, start_srt_index + 4);
    var new_main_img_src;
    if (main_img_src_ext == '.jpg') new_main_img_src = main_img_src.substring(start_srt_index, 0) + '.jpg';
    else if (main_img_src_ext == '.jpe') new_main_img_src = main_img_src.substring(start_srt_index, 0) + '.jpeg';
    else if (main_img_src_ext == '.png') new_main_img_src = main_img_src.substring(start_srt_index, 0) + '.png';
    $('#main_image_src').attr('id', 'draggable')

    $('#draggable').attr("src", new_main_img_src);


    $('#draggable').load(function() {

        if ($("#draggable").width() > 980 && $("#draggable").height() > 480) {
            var width_marg = ($("#draggable").width() - 980);
            var height_marg = ($("#draggable").height() - 480);
            $("#containment-wrapper").width($("#draggable").width() + width_marg);
            $("#containment-wrapper").height($("#draggable").height() + height_marg);
            $("#containment-wrapper").css('marginLeft', -width_marg);
            $("#containment-wrapper").css('marginTop', -height_marg);


            $("#draggable").draggable({
                containment: "#containment-wrapper",
                scroll: false
            });
        }
        else {
            var width_marg = ($("#draggable").width() - 980) / 2;
            var height_marg = ($("#draggable").height() - 480) / 2;
            $("#containment-wrapper").width($("#draggable").width());
            $("#containment-wrapper").height($("#draggable").height());
            $("#containment-wrapper").css('marginLeft', -width_marg);
            $("#containment-wrapper").css('marginTop', -height_marg);
        }
    });

    $('.item-previews-box').attr('class', 'item-big-previews-box');
    $('.preview').attr('class', 'preview-zoom');
    $('.item-big-description').attr('class', 'item-big-description item-big-description-zoom');

});​

This work change the image to a bigger one, I have a second function has a reverse action, it load a normal size image

$("#close-zoom").click(function() {
    $('#close-zoom').hide();
    $('.item-image-box-zoom').attr('class', 'item-image-box');
    $('.item-image-zoom').attr('class', 'item-image');
    var main_img_src = document.getElementById('draggable').src;
    start_srt_index = main_img_src.lastIndexOf(".");
    main_img_src_ext = main_img_src.substring(start_srt_index, start_srt_index + 4);
    var new_main_img_src;
    if (main_img_src_ext == '.jpg') new_main_img_src = main_img_src.substring(start_srt_index, 0) + '.jpg';
    else if (main_img_src_ext == '.jpe') new_main_img_src = main_img_src.substring(start_srt_index, 0) + '.jpeg';
    else if (main_img_src_ext == '.png') new_main_img_src = main_img_src.substring(start_srt_index, 0) + '.png';
    $('#draggable').attr('id', 'main_image_src')


    $('#main_image_src').attr("src", new_main_img_src);
    $("#containment-wrapper").css('marginLeft', 0);
    $("#containment-wrapper").css('marginTop', 0);

    $('.item-big-previews-box').attr('class', 'item-previews-box');
    $('.preview-zoom').attr('class', 'preview');
    $('.item-big-description-zoom').attr('class', 'item-big-description');

});​

this functions are located in

$(document).ready(function(){
});

The big question for my is: why when i use function close-zoom the part that located in first function: 

$('#draggable').load(function() {...});

is executing, and change my parameters in id #containment-wrapper. I thought that this functions independent. May be i lost some important aspect? How i could make that functions don't relative on each other (in this current situation function .item-image relate to .close-zoom). This my first complex (for me of course) jQuery based set of functions. Thanks for attention.

4

2 に答える 2

1

It is because the .load() is bound to draggable. Anytime the draggable is reloaded, it will trigger the load function again.

In your first function, you have this...

$('#draggable').load(function() {});

Then in your second function, you have this...which is triggering the $('#draggable').load(function() {}); function again

    // This is loading $('#draggable') which is triggering the .load() function again
    $('#draggable').attr('id', 'main_image_src')
    $('#main_image_src').attr("src", new_main_img_src);

Don't bind .load() to the draggable element. Make a separate function for the .load()

   function resizedraggable() {

    if ($("#draggable").width() > 980 && $("#draggable").height() > 480) {
        var width_marg = ($("#draggable").width() - 980);
        var height_marg = ($("#draggable").height() - 480);
        $("#containment-wrapper").width($("#draggable").width() + width_marg);
        $("#containment-wrapper").height($("#draggable").height() + height_marg);
        $("#containment-wrapper").css('marginLeft', -width_marg);
        $("#containment-wrapper").css('marginTop', -height_marg);


        $("#draggable").draggable({
            containment: "#containment-wrapper",
            scroll: false
        });
    }
    else {
        var width_marg = ($("#draggable").width() - 980) / 2;
        var height_marg = ($("#draggable").height() - 480) / 2;
        $("#containment-wrapper").width($("#draggable").width());
        $("#containment-wrapper").height($("#draggable").height());
        $("#containment-wrapper").css('marginLeft', -width_marg);
        $("#containment-wrapper").css('marginTop', -height_marg);
    }
}

Then call this function within the other functions when necessary

于 2012-11-12T18:14:10.870 に答える
1

If you want to keep your original function structure, do this..

Instead of

$('#draggable').load(function() {});

Bind the load function this way

$('body').on('load', '#draggable', function() {});

Then as the first line in your second function, unbind the .on('load') function like so..

$('body').off('load', '#draggable');

Ultimitely this will toggle the .on('load') function (on and off) between your two main functions :)

于 2012-11-12T19:05:48.013 に答える