Question

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.

Answer 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 🙂