CODEWITHSUNDEEP
javascriptphpslideyii2-advanced-appswiper.js
Saritha Ks
Saritha Ks

Reputation: 89

How do I get the current element id which triggered horizonSwiper event in javascript?

I have implemented horizonSwiper in my php(Yii2) website for loading images of one album in one row with left and right scroll as well as swipe and having multiple albums in that page each have different id. And now I need to add lazyloading when scroll to left/right or swipe to left/right. But I didn't get the current selected div id to find the scrolling images album id.

I have used the following link for implementing swiper, http://horizon-swiper.sebsauer.de/

And my javascript code as follows,

$('.horizon-swiper.fix-item-width').horizonSwiper({
  showItems: 7,
  arrows: true,
  onSlideStart: function(){
    alert('slide started');
  },
  onDragStart: function(){
    alert('drag started');
  }
});

I have added my album id with one '.horizon-swiper.fix-item-width' div and to get that inside onSlideStart and onDragStart function

My html is like follows,

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

Please note that this html is in a for loop

Can anyone help to find out one solution for this?

Thank you in advance...

Upvotes: 0

Views: 725

Answers (1)

localhost
localhost

Reputation: 513

I have seen the source code horizon-swiper.js. But as far as I think It doesn't have any functionality by which you can get the reference of current element on which swiper is going on (Sorry I may be wrong, I didn't have enough time to check it deeply). So I have slightly modified the horizon-swiper.js file, and now you can get the reference of current element on which swiper is going on.

in top of horizon-swiper.js file replace 

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() {},

  };

with 

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:""
  };

I have just added one more value in settings object named "currentElm"

and add following function

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

after Plugin.prototype.init function

and replace 

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

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

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

with

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;
    };

Now you can get the reference of element like following.

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

  }
});

ensure that you have id attribute for each div. I hope this will help.

Upvotes: 0

Related Questions