Develop Reference

Lottie animations and hovers: simpler way?

I am new to coding, and trying to learn as much as i can while working on real projects.
I have 8 divs, and each div has it's individual lottie animation (each animation has its .json file). I want to play the respective div's animation on hover.
so my html looks like this
var containerHorloge = document.getElementById("anim-horloge");
var containerBalance = document.getElementById("anim-balance");
var containerOrdi = document.getElementById("anim-ordi");
var containerFamille = document.getElementById("anim-famille");
var containerLunettes = document.getElementById("anim-lunettes");
var containerBonhomme = document.getElementById("anim-bonhomme");
var containerCoupes = document.getElementById("anim-coupes");
var containerPinpoint = document.getElementById("anim-pinpoint");
var animHorloge = bodymovin.loadAnimation({
container: containerHorloge,
renderer: 'svg',
autoplay: false,
loop: true,
path : '/wp-content/uploads/svg/anim-horloge.json'
});
var animBalance = bodymovin.loadAnimation({
container: containerBalance,
renderer: 'svg',
autoplay: false,
loop: true,
path : '/wp-content/uploads/svg/anim-balance.json'
});
var animation = bodymovin.loadAnimation({
container: containerOrdi,
renderer: 'svg',
autoplay: false,
loop: true,
path : '/wp-content/uploads/svg/anim-ordi.json'
});
var animation = bodymovin.loadAnimation({
container: containerFamille,
renderer: 'svg',
autoplay: false,
loop: true,
path : '/wp-content/uploads/svg/anim-famille.json'
});
var animation = bodymovin.loadAnimation({
container: containerLunettes,
renderer: 'svg',
autoplay: false,
loop: true,
path : '/wp-content/uploads/svg/anim-lunettes.json'
});
var animation = bodymovin.loadAnimation({
container: containerBonhomme,
renderer: 'svg',
autoplay: false,
loop: true,
path : '/wp-content/uploads/svg/anim-bonhomme.json'
});
var animation = bodymovin.loadAnimation({
container: containerCoupes,
renderer: 'svg',
autoplay: false,
loop: true,
path : '/wp-content/uploads/svg/anim-coupes.json'
});
var animation = bodymovin.loadAnimation({
container: containerPinpoint,
renderer: 'svg',
autoplay: false,
loop: true,
path : '/wp-content/uploads/svg/anim-pinpoint.json'
});
$(".section-cases .vc_col-sm-3.div-horloge").on('mouseenter', function(event) {
event.preventDefault();
onEnter:animHorloge.play();
})
<div class="vc_col-sm-3 div-horloge"></div>
<div class="vc_col-sm-3"></div>
<div class="vc_col-sm-3"></div>
<div class="vc_col-sm-3"></div>
<div class="vc_col-sm-3"></div>
<div class="vc_col-sm-3"></div>
<div class="vc_col-sm-3"></div>
<div class="vc_col-sm-3"></div>
(For the example, i just gave one div a specific class, but every div would have it's own specific class.. maybe. lol)
Now i know i could just call each animation on each div separately, but i'm trying to figure out if there's a cleaner / shorter way to do this? A loop? I thought of a forEach loop, but i don't even know how i would associate each animation with each div. Maybe arrays ?
Again, i am fairly new to coding, and know some basics, but not much of loop, arrays, etc..
Thanks a lot!
EDIT
So this is how i got it to work (thanks to #sam-osb's answer)
var lottiePlayer = document.getElementsByTagName("lottie-player");
$(lottiePlayer).on('mouseenter', function(event) {
console.log(this);
this.setDirection(1)
this.play()
}).on('mouseleave', function(event) {
this.setDirection(-1)
this.play()
});
<div class="box">
<lottie-player src="/wp-content/uploads/svg/SOURCE_HERE.json"></lottie-player>
<p>Lorem ipsum</p>
</div>
<div class="box">
<lottie-player src="/wp-content/uploads/svg/SOURCE_HERE.json"></lottie-player>
<p>Lorem ipsum</p>
</div>
The problem is that i want to hover on the PARENT (.box div...)
So i've tried:
$(lottiePlayer).closest(".box")on('mouseenter', function(event) {
$(this).find(lottiePlayer).play();
})
// or
$(lottiePlayer).closest(".box")on('mouseenter', function(event) {
this.find(lottiePlayer).play();
})
// or even
$(lottiePlayer).closest(".box")on('mouseenter', function(event) {
lottiePlayer.play();
})
// and then
$(".box")on('mouseenter', function(event) {
this.find(lottiePlayer).play();
})
And it always returns that .play() is not a function...
i know i'm doing something stupidly wrong, but don't know what LOL

You can use this library with the 'hover' attribute to play animations on hover, and let it load the animations for you so you could remove all the bodymovin calls:
https://github.com/LottieFiles/lottie-player
Just include the CDN in the head of your HTML file:
<script src="https://unpkg.com/#lottiefiles/lottie-player#latest/dist/lottie-player.js"></script>
then declare your element:
<lottie-player src="URL" hover></lottie-player>

So after getting very useful answers here and in other questions, the correct way to do this:
var lottiePlayer = document.getElementsByTagName("lottie-player");
$(".vc_col-sm-3").on('mouseover', function(event) {
$(this).find(lottiePlayer)[0].play();
});

Swiper slide custom counter (fractions)

I use swiper slider and have counter fractions. Its counting well but I need to count = (all slides - 1). For example if I have 20 slides, I want to show the total number 19.Any ideas how I can do this? I use regular js from their website. Here what I have:
var gallery = new Swiper('.left-side-slider-gallery', {
slidesPerView: '1',
pagination: {
el: '.jail-app-left-side-fractions',
type: 'fraction',
},
});
Thanks!

You can use the custom type, and a renderCustom function, as mentioned in the docs:
var gallery = new Swiper('.left-side-slider-gallery', {
slidesPerView: 1,
pagination: {
el: '.jail-app-left-side-fractions',
type: 'custom',
renderCustom: function (swiper, current, total) {
return current + '/' + (total - 1);
}
}
});

How to handle layers on slider using LayerSlider?

I using LayerSlider to make carousel on my website. Now when I click to Prev/Next button, the slider move to the first layer automatically.
I want to custom my Javascript. Click next to get next layer, not get the first layer. Here is my code:
var sliderObject = lsjQuery("#layerslider_6").layerSlider({
// height : __height,
responsive: false,
responsiveUnder: 1900,
layersContainer: 1900,
pauseOnHover: false,
navStartStop: false,
twoWaySlideshow: true,
navButtons: false,
// skin : 'fullwidth',
showCircleTimer: false,
cbInit: function (data) {
matchSizeLayerElement();
},
cbAnimStart: function (data) {
matchSizeLayerElement();
// console.log('Animate Start' + (new Date().getTime() / 1000));
},
cbAnimStop: function (data) {
matchSizeLayerElement();
// console.log('Animate Stop' + (new Date().getTime() / 1000));
},
cbPrev : function(data){
console.log('Click Prev');
},
cbNext : function(data){
console.log('Click Next');
},
});
lsjQuery("#layerslider_6").layerSlider('start');
I was searching more and more times, but I counln't any solutions.
Sorry for my bad English.
Each answers will become the God save my life!

Check out the API Methods section of the LayerSlider documentation, I believe it has the information you're looking for.
// moves to the layer after the current layer:
lsjQuery("#layerSlider_6").layerSlider('next');
// moves to the layer before the current layer:
lsjQuery("#layerSlider_6").layerSlider('prev');
// moves to the 4th layer (regardless of current layer):
lsjQuery("#layerSlider_6").layerSlider(4);

How can I create a slideshow using jQuery by looping images through an array?

I am new and still learning so if you notice anything basic that I should know, please call it out.
Firstly, this is what I have:
$(function () {
$.ajax({
url: "",
dataType: 'jsonp',
success: function (results) {
var photosArray = new Array();
var allPix = results.data._included.media;
for (var i = 0; i < allPix.length; i++) {
var mediaNumber = allPix[i];
var photosHtml = "<div>";
photosHtml += "<img src='{0}'/>".replace("{0}", mediaNumber.photos.largest);
photosHtml += "</div>";
photosArray.push(mediaNumber.photos.rectangle);
$(".images").append(photosHtml);
}
}
});
});
In the above code, I am accessing an API call to get images.
Secondly, I want to use the image url's I get from that call to create this slideshow:
http://jsfiddle.net/SxN8g/17/
The problem is that in that slide show everything is in an array and that's how images are being shown. How can I use the above solution in my function to create this slideshow for my images?

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
var mygallery2=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [978, 308], //width/height of gallery in pixels. Should reflect dimensions
of largest image
imagearray: [
["images/1.jpg", "#", "", "","test1"],
["images/2.jpg", "#", "", "","test2"],
["images/3.jpg", "#", "", "","test3"],
["images/4.jpg", "#", "", "","test4"]
],
displaymode: {type:'auto', pause:3000, cycles:10, wraparound:true, randomize:true},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "always",
togglerid: "fadeshow2toggler"
});
as you can see this runs off of an array that you could manipulate. hope this helps.

How to call sly scroller plugin effects multiple times in a single page?

I am new to Jquery and my problem is like, I am not able to call the plugin effect in different parts of the page..I have an html component like below...
<div class="frame" class="basic" style="overflow: hidden;">
<ul class="slidee" style="-webkit-transform: translateZ(0px) translateX(-4788px); width: 6840px;">
<li>
<div class="thumbnail">
<img src="Files/a6.jpg" class="zthumb">
<div class="caption">
<p><small>Car 6</small></p><p>
</p><p><strong>10 EUR</strong></p>
</div>
</div>
<li>
<div class="thumbnail">
<img src="Files/a6.jpg" class="zthumb">
<div class="caption">
<p><small>Car 6</small></p><p>
</p><p><strong>10 EUR</strong></p>
</div>
</div>
</li>
</div>
im using 3 scripts
<script src="sly.js" type="text/javascript" ></script>
<script src="horizontal.js"></script>
<script src="plugins.js"></script>
horizontal.js has the following components
jQuery(function($){
'use strict';
(function () {
var $frame = $('#basic');
var $slidee = $frame.children('ul').eq(0);
var $wrap = $frame.parent();
// Call Sly on frame
$frame.sly({
horizontal: 1,
itemNav: 'basic',
smart: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 3,
scrollBar: $wrap.find('.scrollbar'),
scrollBy: 1,
pagesBar: $wrap.find('.pages'),
activatePageOn: 'click',
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,
// Buttons
forward: $wrap.find('.forward'),
backward: $wrap.find('.backward'),
prev: $wrap.find('.prev'),
next: $wrap.find('.next'),
prevPage: $wrap.find('.prevPage'),
nextPage: $wrap.find('.nextPage')
});
// To Start button
$wrap.find('.toStart').on('click', function () {
var item = $(this).data('item');
// Animate a particular item to the start of the frame.
// If no item is provided, the whole content will be animated.
$frame.sly('toStart', item);
});
// To Center button
$wrap.find('.toCenter').on('click', function () {
var item = $(this).data('item');
// Animate a particular item to the center of the frame.
// If no item is provided, the whole content will be animated.
$frame.sly('toCenter', item);
});
// To End button
$wrap.find('.toEnd').on('click', function () {
var item = $(this).data('item');
// Animate a particular item to the end of the frame.
// If no item is provided, the whole content will be animated.
$frame.sly('toEnd', item);
});
// Add item
$wrap.find('.add').on('click', function () {
$frame.sly('add', '<li>' + $slidee.children().length + '</li>');
});
// Remove item
$wrap.find('.remove').on('click', function () {
$frame.sly('remove', -1);
});
}());
});
how can i have the similar effect in a div in the same page like another frame ...What is the method for calling a same plugin in different parts of a single page?
i had included the other files here http://jsfiddle.net/renmathew/34RV3/2/