image zoom full window (v2)

function changeProductImage(getMediumImagePath, getBigImagePath){

    jQuery('.product-image-zoom .modal-loader-zoom').show();
    jQuery(".product-image-zoom img").attr('big', getBigImagePath);
    if (navigator.appVersion.indexOf("MSIE 8.") != -1) {
        jQuery('.product-image-zoom .modal-loader-zoom').hide();
        jQuery('.product-image-zoom img#image').attr('src', getMediumImagePath);        
    }else{
        jQuery('<img src="'+ getMediumImagePath +'">').load(function() {
            if(this.complete){
                jQuery('.product-image-zoom .modal-loader-zoom').hide();
                jQuery('.product-image-zoom img#image').attr('src', getMediumImagePath);            
            }
        });
    }
}

function changeZoomImage(getBigImagePath){

    jQuery('.zoom-modal .modal-loader-zoom').show();
    //jQuery(".product-image-zoom a").attr('big', getBigImagePath);
    if (navigator.appVersion.indexOf("MSIE 8.") != -1) {
        jQuery('.zoom-modal .modal-loader-zoom').hide();
        jQuery('.zoom-modal .zoom-image img').attr('src', getBigImagePath);
        enableDisableArrows();
    }else{
        jQuery('<img src="'+ getBigImagePath +'">').load(function() {
            if(this.complete){
                jQuery('.zoom-modal .modal-loader-zoom').hide();
                jQuery('.zoom-modal .zoom-image img').attr('src', getBigImagePath);
                enableDisableArrows();
            }
        });
    }
}

function showModalZoom(){

    getBigImage = jQuery('.product-image-zoom img').attr('big');
    cloneMoreViews = jQuery('.more-views').clone();
    jQuery(cloneMoreViews).addClass('cloned');

    jQuery('.zoom-modal').show(function(){
        //jQuery('.zoom-modal .modal-loader-zoom').show();
        jQuery('.zoom-modal').prepend(cloneMoreViews);
        enableDisableArrows();
    });
    if (navigator.appVersion.indexOf("MSIE 8.") != -1) {
        jQuery('.zoom-modal .modal-loader-zoom').hide();
        jQuery('.zoom-modal .zoom-image img').attr('src', getBigImage);
        createZoom();        
    }else{    
        jQuery('<img src="'+ getBigImage +'">').load(function() {
            if(this.complete){
                jQuery('.zoom-modal .modal-loader-zoom').hide();
                jQuery('.zoom-modal .zoom-image img').attr('src', getBigImage);
                if( !isMobile.any() ){
                    createZoom();
                }else{
                    jQuery('.product-img-box').addClass('zoom-mobile');
                }
            }
        });
    }
    
    if (navigator.appVersion.indexOf("MSIE 7.") != -1) {
        jQuery('#sidebar').hide();
        jQuery('html').css('overflow', 'hidden');
        jQuery('body').css('overflow', 'hidden');
    }else{
        jQuery('body').css('overflow', 'hidden');
    }     
}

function createZoom(){
    
    var getScreenHeight;
    var getImageHeight;
    //var pathToCover;
    var centerScreen;
    var centerPosImage;
    var moveImage;
   
    jQuery(".zoom-modal .zoom-image img").on({

        mousemove: function(e){            
            getImageHeight = jQuery(this).height();
            getScreenHeight = jQuery(window).height();
            centerScreen = getScreenHeight / 2;
            centerPosImage = (getImageHeight - getScreenHeight) / 2;
            moveImage = (-centerPosImage * e.pageY) / centerScreen;
            jQuery(this).css('margin-top', moveImage+'px');

        },
        touchmove: function(e){            
            getImageHeight = jQuery(this).height();
            getScreenHeight = jQuery(window).height();
            centerScreen = getScreenHeight / 2;
            centerPosImage = (getImageHeight - getScreenHeight) / 2;
            moveImage = (-centerPosImage * e.originalEvent.touches[0].pageY) / centerScreen;
            jQuery(this).css('margin-top', moveImage+'px');
            e.preventDefault();

        }        

    });
   
}

function enableDisableArrows(){
    var getGroupID = jQuery(".more-views li.selected").attr("groupid");
    var countMoreViews = jQuery(".more-views.cloned li.image_option-"+getGroupID).length;

    jQuery( ".more-views.cloned li.image_option-"+getGroupID ).each(function( index ) {
        jQuery(this).attr("counter", index+1);
    });    
    if (jQuery(".more-views.cloned li.selected").attr("counter") == 1){
        jQuery(".left-arrow").addClass("disabled");
    }else{
        jQuery(".left-arrow").removeClass("disabled");
    }
    if (jQuery(".more-views.cloned li.selected").attr("counter") == countMoreViews){
        jQuery(".right-arrow").addClass("disabled");
    }else{
        jQuery(".right-arrow").removeClass("disabled");
    }
}


jQuery(document).ready(function() {
    // Change medium size image
    jQuery("div.more-views li a img").on({

        click: function(){            
            changeProductImage(jQuery(this).attr('rel'), jQuery(this).attr('big'));
            jQuery("div.more-views li").removeClass('selected');
            jQuery(this).parent().parent().addClass('selected');
        }        

    });
   
    // Show zoom
    jQuery(".product-image-zoom").on({

        click: function(){            
            showModalZoom();
        }        

    });
    if ( jQuery("#simple-more-views").length > 0){
        jQuery("#simple-more-views li a img").first().click();
    }
    if ( jQuery(".more-views li").hasClass("no-color") ){
        jQuery(".more-views li.no-color a img").click();
    }
//    jQuery(".show-modal-zoom").on({
//
//        click: function(){            
//            showModalZoom();
//        }        
//
//    });    

    // Change zoom image
    jQuery(".more-views.cloned img").live("click", function(){

        changeZoomImage(jQuery(this).attr('big'));
        jQuery('.more-views.cloned li').removeClass('selected');
        jQuery(this).parent().parent().addClass('selected');

    });
    

    
    jQuery(".right-arrow").live("click", function(){
        if (jQuery(this).hasClass("disabled")){
            return false;
        }else{
            jQuery(".more-views.cloned li.selected").next("li").children("a").children("img").click();
            enableDisableArrows();
        }            
    });
    jQuery(".left-arrow").live("click", function(){
        if (jQuery(this).hasClass("disabled")){
            return false;
        }else{        
            jQuery(".more-views.cloned li.selected").prev("li").children("a").children("img").click();
            enableDisableArrows();
        }
    });    
    
    
    // Close zoom
    jQuery(".close-zoom").live("click", function(){
        jQuery('.zoom-modal').fadeOut('slow',function(){

            jQuery('.cloned').remove();
            jQuery('.zoom-modal .zoom-image img').attr('src', '');
            jQuery(this).css('margin-top', 0);
            jQuery('.zoom-modal .modal-loader-zoom').show();


        });

        if (navigator.appVersion.indexOf("MSIE 7.") != -1) {
            jQuery('#sidebar').show();
            jQuery('body').css('overflow-y', 'visible');
            jQuery('html').css('overflow', 'auto');
        }else{
            jQuery('body').css('overflow', 'visible');
        }
    });
    jQuery(".zoom-image img").live("click", function(){
        jQuery('.zoom-modal').fadeOut('slow',function(){

            jQuery('.cloned').remove();
            jQuery('.zoom-modal .zoom-image img').attr('src', '');
            jQuery(this).css('margin-top', 0);
            jQuery('.zoom-modal .modal-loader-zoom').show();


        });

        if (navigator.appVersion.indexOf("MSIE 7.") != -1) {
            jQuery('#sidebar').show();
            jQuery('body').css('overflow-y', 'visible');
            jQuery('html').css('overflow', 'auto');
        }else{
            jQuery('body').css('overflow', 'visible');
        }
    });    

});



 

/**
 *  developed by Francesco Caruccio
 *  10-2013
 *  jquery 1.9+ required
 */
(function ($) {

    $.fn.imagezoom_fullwindow = function (options) {

        var methods, cloned_thumb_container, big_images_container_css_top;
        var defaults = {
            show_effect: "fadeIn",
            hide_effect: "hide",
            animation_speed_in: 'fast',
            animation_speed_out: 0,
            gallery_container_id: "#gallery_fullscreen",
            original_thumbnails_container_id: "#product-thumbnails",
            cloned_thumbnails_container_id: "#gallery_thumbs",
            big_images_container_id: "#gallery_big_img",
            main_image: "#main-image",
            thumbs_margin_bottom: 3,
            thumbs_margin_right: 10,
            first_thumbs_ul_margin_left: 10,
            big_images_container_css_top: 20,
            thumb_selected_class: "selected"
        };

        var is_gallery_visible = false;

        // stili per gallery container e immagini grandi
        var gallery_style = "display: none; z-index: 100; position: fixed; width: 100%; top: 0; left: 0;";
        var big_images_style = "width: " + $(window).width() + "px;" + " height: " + $(window).height() + "px; z-index: 10;";

        methods = {
            init: function () {
                // informazioni su altezza finestra, numero di thumbnail, altezza thumbnail, margine bottom per una thumbnail
                var window_h = parseInt($(window).height());
                var thumb_list_length = $(defaults.original_thumbnails_container_id).find("li").length;
                var thumb_list_item_h = parseInt($(defaults.original_thumbnails_container_id).find("li").first().outerHeight());
                var thumb_list_item_mar_b = parseInt($(defaults.original_thumbnails_container_id).find("li").first().css("margin-bottom"));

                var gallery_container = $("<div />", {
                    id: defaults.gallery_container_id.replace("#", ""),
                    style: gallery_style
                });

                var span_close = $("<span />", {
                    class: "close",
                    style: "z-index: 30"
                });

                cloned_thumb_container = $("<div />", {
                    id: defaults.cloned_thumbnails_container_id.replace("#", ""),
                    style: "z-index: 20",
                    height: $(window).height()
                });

                var images_container = $("<ul />", {
                    id: defaults.big_images_container_id.replace('#', ''),
                    style: big_images_style
                });

                $("body").append(gallery_container);
                gallery_container.append([span_close, cloned_thumb_container]);
                gallery_container.append(images_container);

                // altezza di una thumb come riferimento per calcolare il numero di thumb per colonna
                var thumb_item_final_h = thumb_list_item_h + thumb_list_item_mar_b;
                // calcolo numero di thumb per colonna
                var thumb_items_per_column = parseInt(window_h / thumb_item_final_h);

                // calcolo il numero di colonne
                var num_of_columns = 1;
                if (thumb_list_length > thumb_items_per_column) {
                    num_of_columns = parseInt(thumb_list_length / thumb_items_per_column);
                    if (num_of_columns * thumb_items_per_column < thumb_list_length) {
                        num_of_columns += 1;
                    }
                }

                // riempio l'array multidimensionale con immagini grandi e thumbnails
                var array_thumb = [];
                var final_array = [];
                $(defaults.original_thumbnails_container_id).find("li a").each(function (i) {
                    array_thumb[i] =
                    {
                        big: $(this).attr("href"),
                        small: $(this).find("img").attr("src")
                    }
                });

                // divido gli items nelle colonne
                var slice_start = 0;
                var slice_end_counter = 1;
                for (i = 0; i < num_of_columns; i++) {
                    final_array.push(array_thumb.slice(slice_start, thumb_items_per_column * slice_end_counter));
                    slice_start = thumb_items_per_column * slice_end_counter;
                    slice_end_counter += 1;
                }

//                console.log({
//                    "num items": thumb_list_length,
//                    "altezza thumb": thumb_item_final_h,
//                    "window h": window_h,
//                    "items per column": thumb_items_per_column,
//                    "num of columns": num_of_columns
//                });

                // costruisco le thumbnail clonate nel full window zoom
                for (var i = 0; i < final_array.length; i++) {
                    var tmp_ul =
                        $("<ul />", {
                            id: "imagezoom_column_" + i,
                            class: "imagezoom_column"
                        });
                    $(defaults.cloned_thumbnails_container_id).append(tmp_ul);
                    for (var j = 0; j < final_array[i].length; j++) {

                        var tmp_li = $("<li />");
                        var tmp_img =
                            $("<img />", {
                                src: final_array[i][j].small
                            });

                        tmp_ul.append(tmp_li);
                        tmp_li.append(tmp_img);
                        // costruisco le immagini grandi
                        var li_big = $("<li />");
                        var img_big =
                            $("<img />", {
                                src: final_array[i][j].big
                            });
                        images_container.append(li_big);
                        li_big.append(img_big);

                    }
                }

                methods.calculate_ul_thumbs_position();

                $(defaults.cloned_thumbnails_container_id).find("li img").each(function (i) {
                    $(this).data("imagezoom_handle", "elem_" + i);
                });

                if ($(defaults.original_thumbnails_container_id).find("li").length > 0) {
                    $(defaults.main_image).find("img").css({
                        cursor: "pointer"
                    });
                }

                big_images_container_css_top = $(defaults.big_images_container_id).css("top");
                // setta la proprietà css "top" se nel css non è settata
                if (big_images_container_css_top == "auto" || big_images_container_css_top == "inherit") {
                    big_images_container_css_top = defaults.big_images_container_css_top;
                    $(defaults.big_images_container_id).css("top", big_images_container_css_top);
                }

                methods.calculate_big_img_height_and_assign_handle();

                $(defaults.gallery_container_id).find(".close").on({
                    click: function () {
                        methods.hide_gallery();
                    }
                });

                $(document).keyup(function (e) {
                    if (e.keyCode == 27) {
                        methods.hide_gallery();
                    }
                });

            },
            calculate_ul_thumbs_position: function () {
                // posiziono le colonne delle thumbs
                var first_thumb_li_mar_b = parseInt(cloned_thumb_container.find("ul").find("li").first().css("margin-bottom"));
                var first_thumb_img_h = parseInt(cloned_thumb_container.find("ul").find("li img").first().prop("height"));
                var single_thumb_li_h = first_thumb_li_mar_b + defaults.thumbs_margin_bottom + first_thumb_img_h;
                var first_ul_total_h = single_thumb_li_h * cloned_thumb_container.find("ul").first().find("li").length;

                cloned_thumb_container.find("ul").each(function (i) {
                    var $ul_width = parseInt($(this).find("li img").first().prop("width")) + defaults.thumbs_margin_right;
                    $(this).css({
                        top: ($(window).height() - first_ul_total_h) / 2,
                        left: ( $ul_width * i ) + defaults.first_thumbs_ul_margin_left
                    });
                });
            },
            calculate_big_img_height_and_assign_handle: function () {
                $(defaults.big_images_container_id).find("li img").each(function (i) {
                    $(this)
                        .data("imagezoom_handle", "elem_" + i)
                        .css({
                            height: $(window).height() - ( parseInt(big_images_container_css_top) * 2 )
                        });
                });
            },
            resize_gallery_container: function (jquery_obj) {
                jquery_obj.css({
                    height: $(window).height()
                });
            },
            show_selected_item: function (item) {
                $(defaults.big_images_container_id)
                    .find(item)
                    .show(0)
                    .siblings()
                    .hide(0);
            },
            show_gallery: function (clicked_thumb) {
                methods.calculate_big_img_height_and_assign_handle();
                methods.resize_gallery_container($(defaults.gallery_container_id));
                $(defaults.gallery_container_id).show(defaults.animation_speed_in, function () {
                    is_gallery_visible = true;
                });
                methods.show_selected_item($(defaults.big_images_container_id).find("." + clicked_thumb.data("imagezoom_handle")));
            },
            hide_gallery: function () {
                $(defaults.gallery_container_id).hide(defaults.animation_speed_out, function () {
                    is_gallery_visible = false;
                });
            }
        };

        $.extend(defaults, options);

        methods.init();

        // assegno la handle alle thumb
        $(defaults.original_thumbnails_container_id).find("li a").each(function (i) {
            $(this)
                .data("imagezoom_handle", "elem_" + i)
                .on({
                    click: function (e) {
                        e.preventDefault();
                        methods.show_gallery($(this));
                    }
                });
        });

        // assegno la handle alle immagini grandi
        $(defaults.big_images_container_id).find("li").each(function (i) {
            $(this).addClass("elem_" + i);
        });

        $(defaults.main_image).on({
            click: function () {
                $(defaults.original_thumbnails_container_id)
                    .find("li img")
                    .first()
                    .trigger("click");
            }
        });

        var selected_thumb_class = defaults.thumb_selected_class;
        cloned_thumb_container.find("ul").each(function () {
            $(this).find("li img").on({
                click: function (e) {
                    e.preventDefault();

                    cloned_thumb_container
                        .find("ul")
                        .each(function () {
                            $(this)
                                .find("li")
                                .removeClass(selected_thumb_class);
                        });

                    $(this)
                        .parent("li")
                        .addClass(selected_thumb_class);

                    cloned_thumb_container.css({
                        height: $(window).height()
                    });

                    methods.show_selected_item($(defaults.big_images_container_id).find("." + $(this).data("imagezoom_handle")));
                }
            })
        });

        return this;

    };

}(jQuery));