2016-07-21 11 views
0

왼쪽 및 오른쪽 스크롤뿐만 아니라 스 와이프 및 해당 페이지의 여러 앨범에 각각 다른 ID가있는 한 행에 한 앨범의 이미지를로드하기 위해 내 php (Yii2) 웹 사이트에서 horizonSwiper를 구현했습니다. 이제 왼쪽/오른쪽으로 스크롤하거나 왼쪽/오른쪽으로 스 와이프 할 때 lazyloading을 추가해야합니다. 그러나 스크롤 이미지 앨범 ID를 찾기 위해 현재 선택된 div ID를 얻지 못했습니다.javascript에서 horizonSwiper 이벤트를 트리거 한 현재 요소 ID를 얻으려면 어떻게해야합니까?

내가 swiper을 구현하기위한 다음과 같은 링크를 사용했다

, http://horizon-swiper.sebsauer.de/

그리고 내 자바 스크립트 코드를 다음과 같이

내가 .horizon-swiper.fix- '하나 내 앨범 ID를 추가 한
$('.horizon-swiper.fix-item-width').horizonSwiper({ 
    showItems: 7, 
    arrows: true, 
    onSlideStart: function(){ 
    alert('slide started'); 
    }, 
    onDragStart: function(){ 
    alert('drag started'); 
    } 
}); 

항목 폭 '사업부와 onSlideStartonDragStart 함수 내에서

내 HTML이 있음을 얻을 사장님 전자는

<div class="horizon-swiper fix-item-width" id="alb_<?php echo $album['albumId']; ?>"> 
    <div class="horizon-item" data-horizon-index="0" id="img_<?php echo $album['albumId']; ?>_<?php echo $count; ?>"> 
    <div class="card view view-second"> 
     <img class="img responsive " src="<?php echo $baseurl; ?>/images/uploaded_images/profile/<?php echo $img['img']; ?>" width="100%;" height="350px;"> 
    </div> 
    </div> 
</div> 

이 HTML 누구의 도움이에 대한 하나 개의 솔루션을 찾을 수 루프

에 대한 에 있음을 유의하시기 바랍니다, 다음?

미리 감사드립니다 ...

+0

'onSlideStart'는 이벤트이기 때문에 기본 인수는'event'입니다. 요소에 액세스하려면'event.target'을 사용할 수 있습니다. 또한'$'이후에 jQuery가 있다고 가정합니다.그래서 당신은'$ (this) .attr ('id')'를 시도 할 수 있습니다. – Rajesh

+0

$ (this) .attr ('id')를 사용할 때 ** undefined **가됩니다 –

+0

바이올린을 만들 수 있습니까? 그렇게하면 디버그하기가 더 쉬울 것입니다. 또한'this'를 로그하고 그 요소 또는 다른 것이 있는지 확인하십시오. – Rajesh

답변

0

소스 코드 horizon-swiper.js를 보았습니다. 그러나 내가 생각하기에 그것은 당신이 swiper가 진행중인 현재 요소에 대한 참조를 얻을 수있는 어떤 기능도 가지고 있지 않다고 생각한다. (내가 틀렸을 수도 있기 때문에 미안하지만 충분히 점검 할 충분한 시간이 없다). 따라서 horizon-swiper.js 파일을 약간 수정 했으므로 이제 swiper가 작동중인 현재 요소에 대한 참조를 얻을 수 있습니다.

수평선 - swiper.js 파일의 상단에 난 그냥 설정에서 한 번 더 값이 "currentElm"

이름을 지정하고 추가 다음 개체 추가 한

var settings = { 

// Default settings 
item: '.horizon-item', 
showItems: 'auto', 
dots: false, 
numberedDots: false, 
arrows: true, 
arrowPrevText: '', 
arrowNextText: '', 
animationSpeed: 500, 
mouseDrag: true, 

// Methods and callbacks 
onStart: function onStart() {}, 
onEnd: function onEnd() {}, 
onSlideStart: function onSlideStart() {}, 
onSlideEnd: function onSlideEnd() {}, 
onDragStart: function onDragStart() {}, 
onDragEnd: function onDragEnd() {}, 

    }; 

var settings = { 

// Default settings 
item: '.horizon-item', 
showItems: 'auto', 
dots: false, 
numberedDots: false, 
arrows: true, 
arrowPrevText: '', 
arrowNextText: '', 
animationSpeed: 500, 
mouseDrag: true, 

// Methods and callbacks 
onStart: function onStart() {}, 
onEnd: function onEnd() {}, 
onSlideStart: function onSlideStart() {}, 
onSlideEnd: function onSlideEnd() {}, 
onDragStart: function onDragStart() {}, 
onDragEnd: function onDragEnd() {}, 
currentElm:"" 
    }; 

로 교체 기능

Plugin.prototype.getElem=function(){ 
    this.settings.currentElm=this.$element; 
} 

Plugin.prototype.init 기능 후에

그리고 지금 당신은 다음과 같은 요소의 참조를 얻을 수

Plugin.prototype.init = function() { 
    var that = this; 

    that._setWrapper(); 
    that._addArrows(); 
    that._addDots(); 
    that._mouseDrag(); 
    that._setSizes(); 
    that._resize(); 

    that._checkPosition(); 
    that.getElem(); //call here our newly made function 
    that.initialized = true; 
    }; 

Plugin.prototype.init = function() { 
    var that = this; 

    that._setWrapper(); 
    that._addArrows(); 
    that._addDots(); 
    that._mouseDrag(); 
    that._setSizes(); 
    that._resize(); 

    that._checkPosition(); 
    that.initialized = true; 
    }; 

를 교체합니다.

$('.horizon-swiper.fix-item-width').horizonSwiper({ 
    arrows: true, 
    dots:true, 
    onSlideStart: function(){ 
    console.log($(this)[0].currentElm.attr('id')); 
    }, 
    onDragStart: function(){ 

    } 
}); 

각 div에 대한 id 속성이 있는지 확인하십시오. 도움이되기를 바랍니다.