自動スケーリング画像注釈

Question

スケーライズは、カスタムのポップオーバーやアニメーションをコンテナや画像に付加してカスタムマーカー（ホットスポット）を追加するためのjQueryプラグインです。

しかし、今私が1つずつポインタをクリックすると、1つずつ表示されますが、別のポインタをクリックすると既に開いているものを閉じるように1つだけ表示しようとしています。ここで

は私が動作するようにあなたのjsFiddleを変更した私のEXAMPLE

(function(jQuery) { 
    "use strict"; 

    //----------------------------------------// 
    // Variable 
    //----------------------------------------// 
    var variable = { 
     width : 0, 
     height : 0, 
     selector : '.item-point', 
     styleSelector : 'circle', 
     animationSelector : 'pulse2', 
     animationPopoverIn : 'flipInY', 
     animationPopoverOut : 'flipOutY', 
     onInit : null, 
     getSelectorElement : null, 
     getValueRemove : null 
    } 

    //----------------------------------------// 
    // Scaling 
    //----------------------------------------// 
    var scaling = { 
     settings : null, 
     //----------------------------------------// 
     // Initialize 
     //----------------------------------------// 
     init: function(el, options){ 
      this.settings = jQuery.extend(variable, options); 
      this.event(el);    

      scaling.layout(el); 
      jQuery(window).on('load', function(){ 
       scaling.layout(el); 
      }); 
      jQuery(el).find('.target').on('load', function(){ 
       scaling.layout(el); 
      }); 
      jQuery(window).on('resize', function(){ 
       scaling.layout(el); 
      }); 
     }, 

     //----------------------------------------// 
     // Event 
     //----------------------------------------// 
     event : function(elem){ 
      // Set Style Selector 
      if (this.settings.styleSelector) { 
       jQuery(this.settings.selector).addClass(this.settings.styleSelector); 
      } 

      // Set Animation 
      if (this.settings.animationSelector) { 
       if(this.settings.animationSelector == 'marker'){ 
        jQuery(this.settings.selector).addClass(this.settings.animationSelector); 
        jQuery(this.settings.selector).append('<div class="pin"></div>') 
        jQuery(this.settings.selector).append('<div class="pulse"></div>') 
       }else{ 
        jQuery(this.settings.selector).addClass(this.settings.animationSelector); 
       } 
      } 

      // Event On Initialize 
      if (jQuery.isFunction(this.settings.onInit)) { 
       this.settings.onInit(); 
      } 

      // Content add class animated element 
      jQuery(elem).find('.content').addClass('animated'); 

      // Wrapper selector 
      jQuery(this.settings.selector).wrapAll("<div class='wrap-selector' />"); 

      // Event Selector 
      jQuery(this.settings.selector).each(function(){ 

       // Toggle 
       jQuery('.toggle', this).on('click', function(e){ 
        e.preventDefault(); 
        jQuery(this).closest(scaling.settings.selector).toggleClass('active'); 

        // Selector Click 
        var content = jQuery(this).closest(scaling.settings.selector).data('popover'), 
         id = jQuery(content); 

        if(jQuery(this).closest(scaling.settings.selector).hasClass('active') && !jQuery(this).closest(scaling.settings.selector).hasClass('disabled')){ 
         if (jQuery.isFunction(scaling.settings.getSelectorElement)) { 
          scaling.settings.getSelectorElement(jQuery(this).closest(scaling.settings.selector)); 
         } 
         id.fadeIn(500,function(){ 

          if(getBrowserName() == "Safari"){ 
           setTimeout(function(){ 
            id.removeClass('flipInY'); 
           },125); 

          } 
         }); 
         scaling.layout(elem); 
         id.removeClass(scaling.settings.animationPopoverOut); 
         id.addClass(scaling.settings.animationPopoverIn); 
        }else{ 
         if(jQuery.isFunction(scaling.settings.getValueRemove)){ 
          scaling.settings.getValueRemove(jQuery(this).closest(scaling.settings.selector)); 
         } 
         id.removeClass(scaling.settings.animationPopoverIn); 
         id.addClass(scaling.settings.animationPopoverOut); 
         id.delay(500).fadeOut(); 
        } 
       }); 

       // Exit 
       var target = jQuery(this).data('popover'), 
        idTarget = jQuery(target); 
       idTarget.find('.exit').on('click', function(e){ 
        e.preventDefault(); 
        // selector.removeClass('active'); 
        jQuery('[data-popover="'+ target +'"]').removeClass('active'); 
        idTarget.removeClass(scaling.settings.animationPopoverIn); 
        idTarget.addClass(scaling.settings.animationPopoverOut); 
        idTarget.delay(500).fadeOut(); 
       }); 
      }); 
     }, 

     //----------------------------------------// 
     // Layout 
     //----------------------------------------// 
     layout : function(elem){ 

      // Get Original Image 
      var image = new Image(); 
      image.src = elem.find('.target').attr("src"); 

      // Variable 
      var width = image.naturalWidth, 
       height = image.naturalHeight, 
       getWidthLess = jQuery(elem).width(), 
       setPersenWidth = getWidthLess/width * 100, 
       setHeight = height * setPersenWidth/100; 

      // Set Heigh Element 
      jQuery(elem).css("height", setHeight); 

      // Resize Width 
      if(jQuery(window).width() < width){ 
       jQuery(elem).stop().css("width","100%"); 
      }else{ 
       jQuery(elem).stop().css("width",width); 
      } 

      // Set Position Selector 
      jQuery(this.settings.selector).each(function(){ 
       if(jQuery(window).width() < width){ 
        var getTop = jQuery(this).data("top") * setPersenWidth/100, 
         getLeft = jQuery(this).data("left") * setPersenWidth/100; 
       }else{ 
        var getTop = jQuery(this).data("top"), 
         getLeft = jQuery(this).data("left"); 
       } 
       jQuery(this).css("top", getTop + "px"); 
       jQuery(this).css("left", getLeft + "px"); 

       // Target Position 
       var target = jQuery(this).data('popover'), 
        allSize = jQuery(target).find('.head').outerHeight() + jQuery(target).find('.body').outerHeight() + jQuery(target).find('.footer').outerHeight(); 
       jQuery(target).css("left", getLeft + "px"); 
       jQuery(target).css("height", allSize + "px"); 

       if(jQuery(target).hasClass('bottom')){ 
        var getHeight = jQuery(target).outerHeight(), 
         getTopBottom = getTop - getHeight; 
        jQuery(target).css("top", getTopBottom + "px"); 
       }else if(jQuery(target).hasClass('center')){ 
        var getHeight = jQuery(target).outerHeight() * 0.50, 
         getTopBottom = getTop - getHeight; 
        jQuery(target).css("top", getTopBottom + "px"); 
       }else{ 
        jQuery(target).css("top", getTop + "px"); 
       } 

       jQuery('.toggle', this).css('width', jQuery(this).outerWidth()); 
       jQuery('.toggle', this).css('height', jQuery(this).outerHeight()); 

       // Toggle Size 
       if(jQuery(this).find('.pin')){ 
        var widthThis = jQuery('.pin', this).outerWidth(), 
         heightThis = jQuery('.pin', this).outerHeight(); 
        jQuery('.toggle', this).css('width', widthThis); 
        jQuery('.toggle', this).css('height', heightThis);      
       } 
      }); 
     } 

    }; 

    //----------------------------------------// 
    // Scalize Plugin 
    //----------------------------------------// 
    jQuery.fn.scalize = function(options){ 
     return scaling.init(this, options); 
    }; 

}(jQuery)); 

function getBrowserName() { 
    var name = "Unknown"; 
    if(navigator.userAgent.indexOf("MSIE")!=-1){ 
     name = "MSIE"; 
    } 
    else if(navigator.userAgent.indexOf("Firefox")!=-1){ 
     name = "Firefox"; 
    } 
    else if(navigator.userAgent.indexOf("Opera")!=-1){ 
     name = "Opera"; 
    } 
    else if(navigator.userAgent.indexOf("Chrome") != -1){ 
     name = "Chrome"; 
    } 
    else if(navigator.userAgent.indexOf("Safari")!=-1){ 
     name = "Safari"; 
    } 
    return name; 
} 

Answer 1

あなたの初期にこれを追加します。

 getSelectorElement: function(el) { 
      $('.item-point.active').not($(el)[0]).find('.toggle').click(); 
     } 

これはScalizeプラグインでgetSelectorElement方法にフックとほとんど一致していない任意のアクティブな（オープン）の要素をクリックしをトリガー最近アイテムをクリックしました。

ので、同じようにそれを追加します。これはプラグインでは、既存の方法にフックされているので、それは（何も予測できない副作用、プラスあなたは消失要素の意図トランジションアウトを取得する）少し安全ですしない、

$(document).ready(function(){ 
     $('.scalize').scalize({ 
      styleSelector: 'circle', 
      animationPopoverIn: 'fadeIn', 
      animationPopoverOut: 'fadeOut', 
      animationSelector: 'pulse2', 
      getSelectorElement: function(el) { 
       $('.item-point.active').not($(el)[0]).find('.toggle').click(); 
      } 
     });   
    }); 

注意。 Fiddle。

Answer 2

です。

TL; DR：ポイントがクリックされたときに、アクティブな他の兄弟がいる場合はいつでも、それらをループしてポップアップを非表示にします。

これはかなりの方法ではありませんが、それはフィドルで働いています。

$('.scalize').on('click', '.item-point', (function() { 
    $(this).siblings('.item-point.active').each(function() { 
    var popover = $(this).data('popover'); 
    $(popover).removeClass('fadeIn').css({ 
     'display': 'none' 
    }); 
    $(this).removeClass('active'); 
    }); 
}));