내 스크립트가 jquery의 이미지에만 영향을 미치게하려면 어떻게해야합니까?

Question

나는 SpaceGallery 스크립트를 구현하려고합니다. WWW : http://www.eyecon.ro/spacegallery/. #div에서 이미지를 가져 와서 온라인 데모 에서처럼 슬라이드를 만듭니다. 내 HTML 파일의 일부 : 나는 $ ('img.aaa')를 호출하고있을 때

<div id="myGallery0" class="spacegallery">  
<img class="imaz" src="ADDITIONAL.jpg" alt="" atr1="lupa" />  
<img class="aaa" src=images/bw1.jpg alt="" atr1="bw1" /> 
<img class="aaa" src=images/bw2.jpg alt="" atr1="bw2" /> 
<img class="aaa" src=images/bw3.jpg alt="" atr1="bw3" /> 
      </div> 

     <div id="myGallery1" class="spacegallery">  
<img class="imaz" src="ADDITIONAL.jpg" alt="" atr1="lupa" /> 
<img class="aaa" src=images3/bw1.jpg alt="" atr1="bw1" /> 
<img class="aaa" src=images3/bw2.jpg alt="" atr1="bw2" /> 
<img class="aaa" src=images3/lights2.jpg alt="" atr1="bw3" /> 
      </div> 

      <script> 
    var initLayout = function() { 
     $('#myGallery0').spacegallery({loadingClass: 'loading'}); 
     $('#myGallery1').spacegallery({loadingClass: 'loading'}); 
       }; 
     EYE.register(initLayout, 'init'); 
      </script> 

을 그리고 지금, 스크립트는 좋은 작품! 스크립트는 자신의 ID (mygallery0 또는 mygallery1)의 이미지 만 슬라이드합니다. 내 주 .js 파일에 다음과 같은 .onclick 항목이 있다고 가정 해 보겠습니다.

  $('img.imaz').fadeOut(); 

그리고 난 내 갤러리의 모든 내 갤러리 (mygaller0 또는 mygallery1)는 IMG "ADDITIONAL.jpg"(그것의 클래스 = imaz) fadeOuts 중 하나의 이미지를 슬라이딩있을 때! 왜 그런가요? 그것을 고치는 방법?

Spacegallery.js

(function($){ 
    EYE.extend({ 

     spacegallery: { 

      //default options (many options are controled via CSS) 
      defaults: { 
       border: 6, // border arround the image 
       perspective: 100, // perpective height 
       minScale: 0.1, // minimum scale for the image in the back 
       duration: 800, // aimation duration 
       loadingClass: null, // CSS class applied to the element while looading images 
       before: function(){ 
        $('img.imaz').fadeOut(); 
        return false 
        }, 
       after: function(el){  
        $('img.imaz').fadeIn();     
        return false 
        } 
      }, 

      animated: false, 

      //position images 
      positionImages: function(el) { 

       var top = 0; 

       EYE.spacegallery.animated = false; 
       $(el) 
        .find('a') 
         .removeClass(el.spacegalleryCfg.loadingClass) 
         .end() 
         .find('img.aaa') 
         .each(function(nr){ 

          console.log('WYSOKOSC ' + $(this).attr('height')); 

          var newWidth = this.spacegallery.origWidth - (this.spacegallery.origWidth - this.spacegallery.origWidth * el.spacegalleryCfg.minScale) * el.spacegalleryCfg.asins[nr]; 

          $(this) 
           .css({ 
            top: el.spacegalleryCfg.tops[nr] + 'px', 
            marginLeft: - parseInt((newWidth + el.spacegalleryCfg.border)/2, 10) + 'px', 
            opacity: 1 - el.spacegalleryCfg.asins[nr] 
           }) 
           .attr('width', parseInt(newWidth)); 
          this.spacegallery.next = el.spacegalleryCfg.asins[nr+1]; 
          this.spacegallery.nextTop = el.spacegalleryCfg.tops[nr+1] - el.spacegalleryCfg.tops[nr]; 
          this.spacegallery.origTop = el.spacegalleryCfg.tops[nr]; 
          this.spacegallery.opacity = 1 - el.spacegalleryCfg.asins[nr]; 
          this.spacegallery.increment = el.spacegalleryCfg.asins[nr] - this.spacegallery.next; 
          this.spacegallery.current = el.spacegalleryCfg.asins[nr]; 
          this.spacegallery.width = newWidth; 
         }) 

      }, 

      //animate to nex image 
      next: function(e) { 
       if (EYE.spacegallery.animated === false) { 
        EYE.spacegallery.animated = true; 

        var el = this.parentNode; 


        el.spacegalleryCfg.before.apply(el); 
        $(el) 
         .css('spacegallery', 0) 
         .animate({ 
          spacegallery: 100 
         },{ 
          easing: 'easeOut', 
          duration: el.spacegalleryCfg.duration, 
          complete: function() { 


           $(el) 
            .find('img.aaa:last') 
            .prependTo(el); 

           EYE.spacegallery.positionImages(el); 
           el.spacegalleryCfg.after.apply(el); 
          }, 

          step: function(now) { 

           $('img.aaa', this) 
            .each(function(nr){ 

             console.log('step: ' + $(this).attr('atr1')); 

             var newWidth, top, next; 
             if (nr + 1 == el.spacegalleryCfg.images) { 
              top = this.spacegallery.origTop + this.spacegallery.nextTop * 4 * now /100; 
              newWidth = this.spacegallery.width * top/this.spacegallery.origTop; 
              $(this) 
               .css({ 
                top: top + 'px', 
                opacity: 0.7 - now/100, 
                marginLeft: - parseInt((newWidth + el.spacegalleryCfg.border)/2, 10) + 'px' 
               }) 
               .attr('width', newWidth); 
             } 

             else { 
              next = this.spacegallery.current - this.spacegallery.increment * now /100; 
              newWidth = this.spacegallery.origWidth - (this.spacegallery.origWidth - this.spacegallery.origWidth * el.spacegalleryCfg.minScale) * next; 
              $(this).css({ 
               top: this.spacegallery.origTop + this.spacegallery.nextTop * now /100 + 'px', 
               opacity: 1 - next, 
               marginLeft: - parseInt((newWidth + el.spacegalleryCfg.border)/2, 10) + 'px' 
              }) 
              .attr('width', newWidth); 
             } 
            }); 
          } 
         }); 
       } 

       this.blur(); 
       return false; 
      }, 

      //constructor 
      init: function(opt) { 
       opt = $.extend({}, EYE.spacegallery.defaults, opt||{}); 
       return this.each(function(){ 
        var el = this; 
        if ($(el).is('.spacegallery')) { 
         $('<a href="#"></a>') 
          .appendTo(this) 
          .addClass(opt.loadingClass) 
          .bind('click', EYE.spacegallery.next); 

         el.spacegalleryCfg = opt; 
         el.spacegalleryCfg.images = 3;        
         el.spacegalleryCfg.loaded = 0; 
         el.spacegalleryCfg.asin = Math.asin(1); 
         el.spacegalleryCfg.asins = {}; 
         el.spacegalleryCfg.tops = {}; 
         el.spacegalleryCfg.increment = parseInt(el.spacegalleryCfg.perspective/el.spacegalleryCfg.images, 10); 
         var top = 0; 

         $('img.aaa', el) 
          .each(function(nr){ 
           var imgEl = new Image(); 
           var elImg = this; 


           el.spacegalleryCfg.asins[nr] = 1 - Math.asin((nr+1)/el.spacegalleryCfg.images)/el.spacegalleryCfg.asin; 
           top += el.spacegalleryCfg.increment - el.spacegalleryCfg.increment * el.spacegalleryCfg.asins[nr]; 
           el.spacegalleryCfg.tops[nr] = top; 
           elImg.spacegallery = {}; 
           imgEl.src = this.src; 
           if (imgEl.complete) { 

            el.spacegalleryCfg.loaded ++; 
            elImg.spacegallery.origWidth = imgEl.width; 
            elImg.spacegallery.origHeight = imgEl.height 
           } else { 
            imgEl.onload = function() { 
             el.spacegalleryCfg.loaded ++; 
             elImg.spacegallery.origWidth = imgEl.width; 
             elImg.spacegallery.origHeight = imgEl.height 
             if (el.spacegalleryCfg.loaded == el.spacegalleryCfg.images) { 

              EYE.spacegallery.positionImages(el); 
             } 
            }; 
           } 
          }); 

         el.spacegalleryCfg.asins[el.spacegalleryCfg.images] = el.spacegalleryCfg.asins[el.spacegalleryCfg.images - 1] * 1.3; 
         el.spacegalleryCfg.tops[el.spacegalleryCfg.images] = el.spacegalleryCfg.tops[el.spacegalleryCfg.images - 1] * 1.3; 
         if (el.spacegalleryCfg.loaded == el.spacegalleryCfg.images) { 
          EYE.spacegallery.positionImages(el); 
         } 
        } 
       }); 
      } 
     } 
    }); 

    $.fn.extend({ 

     /** 
     * Create a space gallery 
     * @name spacegallery 
     * @description create a space gallery 
     * @option int   border   Images' border. Default: 6 
     * @option int   perspective  Perpective height. Default: 140 
     * @option float  minScale  Minimum scale for the image in the back. Default: 0.2 
     * @option int   duration  Animation duration. Default: 800 
     * @option string  loadingClass CSS class applied to the element while looading images. Default: null 
     * @option function before   Callback function triggered before going to the next image 
     * @option function after   Callback function triggered after going to the next image 
     */ 
     spacegallery: EYE.spacegallery.init 
    }); 
    $.extend($.easing,{ 
     easeOut:function (x, t, b, c, d) { 
      return -c *(t/=d)*(t-2) + b; 
     } 
    }); 
})(jQuery); 

Answer 1

당신은 그가 선택 TOT 두 번째 인수로 this를 전달하여 현재 요소의 문맥에 일치하는 이미지를 제한하는 시도 할 수 있습니다.

defaults: { 
    /* options */ 
    before: function(){ 
     $('img.imaz', this).fadeOut(); 
    }, 
    after: function(el){  
     $('img.imaz', this).fadeIn(); 
    } 
} 

우리는 선택의 두 번째 인수로, 우리는 "img.imaz"을 대상으로 jQuery를 이야기하고, this 전달 갔지 만이 현재의 요소를 의미 this 내에서 발견 때만

이 처리되고. 프로젝트에서이 값은 #myGallery0 또는 #myGallery1입니다.

당신은 http://api.jquery.com/jQuery/