My gallery starts from my first img,but at counter its number 2, and when go back to first picture it shows me nothing, just black window (at first it shows me "src undefined", but now just black window). I want my first picture to be number 1 in counter etc. i am not sure where is the problem, so i gave you js code from lightgallery here
(function() {
'use strict';
var defaults = {
mode: 'lg-slide',
// Ex : 'ease'
cssEasing: 'ease',
//'for jquery animation'
easing: 'linear',
speed: 600,
height: '100%',
width: '100%',
addClass: '',
startClass: 'lg-start-zoom',
backdropDuration: 150,
hideBarsDelay: 6000,
useLeft: false,
closable: true,
loop: true,
escKey: true,
keyPress: true,
controls: true,
slideEndAnimatoin: true,
hideControlOnEnd: false,
mousewheel: true,
getCaptionFromTitleOrAlt: true,
// .lg-item || '.lg-sub-html'
appendSubHtmlTo: '.lg-sub-html',
subHtmlSelectorRelative: false,
/**
* @desc number of preload slides
* will exicute only after the current slide is fully loaded.
*
* @ex you clicked on 4th image and if preload = 1 then 3rd slide and 5th
* slide will be loaded in the background after the 4th slide is fully loaded..
* if preload is 2 then 2nd 3rd 5th 6th slides will be preloaded.. ... ...
*
*/
preload: 0,
showAfterLoad: true,
selector: '',
selectWithin: '',
nextHtml: '',
prevHtml: '',
// 0, 1
index: false,
iframeMaxWidth: '100%',
download: true,
counter: true,
appendCounterTo: '.lg-toolbar',
swipeThreshold: 50,
enableSwipe: true,
enableDrag: true,
dynamic: false,
dynamicEl: [],
galleryId: 1
};
function Plugin(element, options) {
// Current lightGallery element
this.el = element;
// Current jquery element
this.$el = $(element);
// lightGallery settings
this.s = $.extend({}, defaults, options);
// When using dynamic mode, ensure dynamicEl is an array
if (this.s.dynamic && this.s.dynamicEl !== 'undefined' && this.s.dynamicEl.constructor === Array && !this.s.dynamicEl.length) {
throw ('When using dynamic mode, you must also define dynamicEl as an Array.');
}
// lightGallery modules
this.modules = {};
// false when lightgallery complete first slide;
this.lGalleryOn = false;
this.lgBusy = false;
// Timeout function for hiding controls;
this.hideBartimeout = false;
// To determine browser supports for touch events;
this.isTouch = ('ontouchstart' in document.documentElement);
// Disable hideControlOnEnd if sildeEndAnimation is true
if (this.s.slideEndAnimatoin) {
this.s.hideControlOnEnd = false;
}
// Gallery items
if (this.s.dynamic) {
this.$items = this.s.dynamicEl;
} else {
if (this.s.selector === 'this') {
this.$items = this.$el;
} else if (this.s.selector !== '') {
if (this.s.selectWithin) {
this.$items = $(this.s.selectWithin).find(this.s.selector);
} else {
this.$items = this.$el.find($(this.s.selector));
}
} else {
this.$items = this.$el.children();
}
}
// .lg-item
this.$slide = '';
// .lg-outer
this.$outer = '';
this.init();
return this;
}
Plugin.prototype.init = function() {
var _this = this;
// s.preload should not be more than $item.length
if (_this.s.preload > _this.$items.length) {
_this.s.preload = _this.$items.length;
}
// if dynamic option is enabled execute immediately
var _hash = window.location.hash;
if (_hash.indexOf('lg=' + this.s.galleryId) > 0) {
_this.index = parseInt(_hash.split('&slide=')[1], 10);
$('body').addClass('lg-from-hash');
if (!$('body').hasClass('lg-on')) {
setTimeout(function() {
_this.build(_this.index);
});
$('body').addClass('lg-on');
}
}
if (_this.s.dynamic) {
_this.$el.trigger('onBeforeOpen.lg');
_this.index = _this.s.index || 0;
// prevent accidental double execution
if (!$('body').hasClass('lg-on')) {
setTimeout(function() {
_this.build(_this.index);
$('body').addClass('lg-on');
});
}
} else {
// Using different namespace for click because click event should not unbind if selector is same object('this')
_this.$items.on('click.lgcustom', function(event) {
// For IE8
try {
event.preventDefault();
event.preventDefault();
} catch (er) {
event.returnValue = false;
}
_this.$el.trigger('onBeforeOpen.lg');
_this.index = _this.s.index || _this.$items.index(this);
// prevent accidental double execution
if (!$('body').hasClass('lg-on')) {
_this.build(_this.index);
$('body').addClass('lg-on');
}
});
}
};
Plugin.prototype.build = function(index) {
var _this = this;
_this.structure();
// module constructor
$.each($.fn.lightGallery.modules, function(key) {
_this.modules[key] = new $.fn.lightGallery.modules[key](_this.el);
});
// initiate slide function
_this.slide(index, false, false, false);
if (_this.s.keyPress) {
_this.keyPress();
}
if (_this.$items.length > 1) {
_this.arrow();
setTimeout(function() {
_this.enableDrag();
_this.enableSwipe();
}, 50);
if (_this.s.mousewheel) {
_this.mousewheel();
}
} else {
_this.$slide.on('click.lg', function() {
_this.$el.trigger('onSlideClick.lg');
});
}
_this.counter();
_this.closeGallery();
_this.$el.trigger('onAfterOpen.lg');
// Hide controllers if mouse doesn't move for some period
_this.$outer.on('mousemove.lg click.lg touchstart.lg', function() {
_this.$outer.removeClass('lg-hide-items');
clearTimeout(_this.hideBartimeout);
// Timeout will be cleared on each slide movement also
_this.hideBartimeout = setTimeout(function() {
_this.$outer.addClass('lg-hide-items');
}, _this.s.hideBarsDelay);
});
_this.$outer.trigger('mousemove.lg');
};
Plugin.prototype.structure = function() {
var list = '';
var controls = '';
var subHtmlCont = '';
var template;
var _this = this;
$('body').append('<div class="lg-backdrop"></div>');
$('.lg-backdrop').css('transition-duration', this.s.backdropDuration + 'ms');
// Create gallery items
for (var i = 0; i < this.$items.length; i++) {
list += '<div class="lg-item"></div>';
}
Plugin.prototype.isVideo = function(src, index) {
var html;
if (this.s.dynamic) {
html = this.s.dynamicEl[index].html;
} else {
html = this.$items.eq(index).attr('data-html');
}
if (!src) {
if(html) {
return {
html5: true
};
} else {
console.error('lightGallery :- data-src is not pvovided on slide item ' + (index + 1) + '. Please make sure the selector property is properly configured. More info - http://sachinchoolur.github.io/lightGallery/demos/html-markup.html');
return false;
}
}
var youtube = src.match(/\/\/(?:www\.)?youtu(?:\.be|be\.com|be-nocookie\.com)\/(?:watch\?v=|embed\/)?([a-z0-9\-\_\%]+)/i);
var vimeo = src.match(/\/\/(?:www\.)?vimeo.com\/([0-9a-z\-_]+)/i);
var dailymotion = src.match(/\/\/(?:www\.)?dai.ly\/([0-9a-z\-_]+)/i);
var vk = src.match(/\/\/(?:www\.)?(?:vk\.com|vkontakte\.ru)\/(?:video_ext\.php\?)(.*)/i);
if (youtube) {
return {
youtube: youtube
};
} else if (vimeo) {
return {
vimeo: vimeo
};
} else if (dailymotion) {
return {
dailymotion: dailymotion
};
} else if (vk) {
return {
vk: vk
};
}
};
/**
* @desc Create image counter
* Ex: 1/10
*/
Plugin.prototype.counter = function() {
if (this.s.counter) {
$(this.s.appendCounterTo).append('<div id="lg-counter"><span id="lg-counter-current">' + (parseInt(this.index, 10) + 1) + '</span> / <span id="lg-counter-all">' + this.$items.length + '</span></div>');
}
};
/**
* @desc add sub-html into the slide
* @param {Number} index - index of the slide
*/
Plugin.prototype.addHtml = function(index) {
var subHtml = null;
var subHtmlUrl;
var $currentEle;
if (this.s.dynamic) {
if (this.s.dynamicEl[index].subHtmlUrl) {
subHtmlUrl = this.s.dynamicEl[index].subHtmlUrl;
} else {
subHtml = this.s.dynamicEl[index].subHtml;
}
} else {
$currentEle = this.$items.eq(index);
if ($currentEle.attr('data-sub-html-url')) {
subHtmlUrl = $currentEle.attr('data-sub-html-url');
} else {
subHtml = $currentEle.attr('data-sub-html');
if (this.s.getCaptionFromTitleOrAlt && !subHtml) {
subHtml = $currentEle.attr('title') || $currentEle.find('img').first().attr('alt');
}
}
}
if (!subHtmlUrl) {
if (typeof subHtml !== 'undefined' && subHtml !== null) {
// get first letter of subhtml
// if first letter starts with . or # get the html form the jQuery object
var fL = subHtml.substring(0, 1);
if (fL === '.' || fL === '#') {
if (this.s.subHtmlSelectorRelative && !this.s.dynamic) {
subHtml = $currentEle.find(subHtml).html();
} else {
subHtml = $(subHtml).html();
}
}
} else {
subHtml = '';
}
}
if (this.s.appendSubHtmlTo === '.lg-sub-html') {
if (subHtmlUrl) {
this.$outer.find(this.s.appendSubHtmlTo).load(subHtmlUrl);
} else {
this.$outer.find(this.s.appendSubHtmlTo).html(subHtml);
}
} else {
if (subHtmlUrl) {
this.$slide.eq(index).load(subHtmlUrl);
} else {
this.$slide.eq(index).append(subHtml);
}
}
// Add lg-empty-html class if title doesn't exist
if (typeof subHtml !== 'undefined' && subHtml !== null) {
if (subHtml === '') {
this.$outer.find(this.s.appendSubHtmlTo).addClass('lg-empty-html');
} else {
this.$outer.find(this.s.appendSubHtmlTo).removeClass('lg-empty-html');
}
}
this.$el.trigger('onAfterAppendSubHtml.lg', [index]);
};
/**
* @desc Preload slides
* @param {Number} index - index of the slide
*/
Plugin.prototype.preload = function(index) {
var i = 1;
var j = 1;
for (i = 1; i <= this.s.preload; i++) {
if (i >= this.$items.length - index) {
break;
}
this.loadContent(index + i, false, 0);
}
for (j = 1; j <= this.s.preload; j++) {
if (index - j < 0) {
break;
}
this.loadContent(index - j, false, 0);
}
};
/**
* @desc Load slide content into slide.
* @param {Number} index - index of the slide.
* @param {Boolean} rec - if true call loadcontent() function again.
* @param {Boolean} delay - delay for adding complete class. it is 0 except first time.
*/
Plugin.prototype.loadContent = function(index, rec, delay) {
var _this = this;
var _hasPoster = false;
var _$img;
var _src;
var _poster;
var _srcset;
var _sizes;
var _html;
var getResponsiveSrc = function(srcItms) {
var rsWidth = [];
var rsSrc = [];
for (var i = 0; i < srcItms.length; i++) {
var __src = srcItms[i].split(' ');
// Manage empty space
if (__src[0] === '') {
__src.splice(0, 1);
}
rsSrc.push(__src[0]);
rsWidth.push(__src[1]);
}
var wWidth = $(window).width();
for (var j = 0; j < rsWidth.length; j++) {
if (parseInt(rsWidth[j], 10) > wWidth) {
_src = rsSrc[j];
break;
}
}
};
if (_this.s.dynamic) {
if (_this.s.dynamicEl[index].poster) {
_hasPoster = true;
_poster = _this.s.dynamicEl[index].poster;
}
_html = _this.s.dynamicEl[index].html;
_src = _this.s.dynamicEl[index].src;
if (_this.s.dynamicEl[index].responsive) {
var srcDyItms = _this.s.dynamicEl[index].responsive.split(',');
getResponsiveSrc(srcDyItms);
}
_srcset = _this.s.dynamicEl[index].srcset;
_sizes = _this.s.dynamicEl[index].sizes;
} else {
if (_this.$items.eq(index).attr('data-poster')) {
_hasPoster = true;
_poster = _this.$items.eq(index).attr('data-poster');
}
_html = _this.$items.eq(index).attr('data-html');
_src = _this.$items.eq(index).attr('href') || _this.$items.eq(index).attr('data-src');
if (_this.$items.eq(index).attr('data-responsive')) {
var srcItms = _this.$items.eq(index).attr('data-responsive').split(',');
getResponsiveSrc(srcItms);
}
_srcset = _this.$items.eq(index).attr('data-srcset');
_sizes = _this.$items.eq(index).attr('data-sizes');
}
if (_src || _srcset || _sizes || _poster) {
var iframe = false;
if (_this.s.dynamic) {
if (_this.s.dynamicEl[index].iframe) {
iframe = true;
}
} else {
if (_this.$items.eq(index).attr('data-iframe') === 'true') {
iframe = true;
}
}
var _isVideo = _this.isVideo(_src, index);
if (!_this.$slide.eq(index).hasClass('lg-loaded')) {
if (iframe) {
_this.$slide.eq(index).prepend('<div class="lg-video-cont lg-has-iframe" style="max-width:' + _this.s.iframeMaxWidth + '"><div class="lg-video"><iframe class="lg-object" frameborder="0" src="' + _src + '" allowfullscreen="true"></iframe></div></div>');
} else if (_hasPoster) {
var videoClass = '';
if (_isVideo && _isVideo.youtube) {
videoClass = 'lg-has-youtube';
} else if (_isVideo && _isVideo.vimeo) {
videoClass = 'lg-has-vimeo';
} else {
videoClass = 'lg-has-html5';
}
_this.$slide.eq(index).prepend('<div class="lg-video-cont ' + videoClass + ' "><div class="lg-video"><span class="lg-video-play"></span><img class="lg-object lg-has-poster" src="' + _poster + '" /></div></div>');
} else if (_isVideo) {
_this.$slide.eq(index).prepend('<div class="lg-video-cont "><div class="lg-video"></div></div>');
_this.$el.trigger('hasVideo.lg', [index, _src, _html]);
} else {
_this.$slide.eq(index).prepend('<div class="lg-img-wrap"><img class="lg-object lg-image" src="' + _src + '" /></div>');
}
_this.$el.trigger('onAferAppendSlide.lg', [index]);
_$img = _this.$slide.eq(index).find('.lg-object');
if (_sizes) {
_$img.attr('sizes', _sizes);
}
if (_srcset) {
_$img.attr('srcset', _srcset);
try {
picturefill({
elements: [_$img[0]]
});
} catch (e) {
console.warn('lightGallery :- If you want srcset to be supported for older browser please include picturefil version 2 javascript library in your document.');
}
}
if (this.s.appendSubHtmlTo !== '.lg-sub-html') {
_this.addHtml(index);
}
_this.$slide.eq(index).addClass('lg-loaded');
}
_this.$slide.eq(index).find('.lg-object').on('load.lg error.lg', function() {
// For first time add some delay for displaying the start animation.
var _speed = 0;
// Do not change the delay value because it is required for zoom plugin.
// If gallery opened from direct url (hash) speed value should be 0
if (delay && !$('body').hasClass('lg-from-hash')) {
_speed = delay;
}
setTimeout(function() {
_this.$slide.eq(index).addClass('lg-complete');
_this.$el.trigger('onSlideItemLoad.lg', [index, delay || 0]);
}, _speed);
});
// @todo check load state for html5 videos
if (_isVideo && _isVideo.html5 && !_hasPoster) {
_this.$slide.eq(index).addClass('lg-complete');
}
if (rec === true) {
if (!_this.$slide.eq(index).hasClass('lg-complete')) {
_this.$slide.eq(index).find('.lg-object').on('load.lg error.lg', function() {
_this.preload(index);
});
} else {
_this.preload(index);
}
}
}
};
Plugin.prototype.slide = function(index, fromTouch, fromThumb, direction) {
var _prevIndex = this.$outer.find('.lg-current').index();
var _this = this;
// Prevent if multiple call
// Required for hsh plugin
if (_this.lGalleryOn && (_prevIndex === index)) {
return;
}
var _length = this.$slide.length;
var _time = _this.lGalleryOn ? this.s.speed : 0;
if (!_this.lgBusy) {
if (this.s.download) {
var _src;
if (_this.s.dynamic) {
_src = _this.s.dynamicEl[index].downloadUrl !== false && (_this.s.dynamicEl[index].downloadUrl || _this.s.dynamicEl[index].src);
} else {
_src = _this.$items.eq(index).attr('data-download-url') !== 'false' && (_this.$items.eq(index).attr('data-download-url') || _this.$items.eq(index).attr('href') || _this.$items.eq(index).attr('data-src'));
}
if (_src) {
$('#lg-download').attr('href', _src);
_this.$outer.removeClass('lg-hide-download');
} else {
_this.$outer.addClass('lg-hide-download');
}
}
this.$el.trigger('onBeforeSlide.lg', [_prevIndex, index, fromTouch, fromThumb]);
_this.lgBusy = true;
clearTimeout(_this.hideBartimeout);
// Add title if this.s.appendSubHtmlTo === lg-sub-html
if (this.s.appendSubHtmlTo === '.lg-sub-html') {
// wait for slide animation to complete
setTimeout(function() {
_this.addHtml(index);
}, _time);
}
this.arrowDisable(index);
if (!direction) {
if (index < _prevIndex) {
direction = 'prev';
} else if (index > _prevIndex) {
direction = 'next';
}
}
if (!fromTouch) {
// remove all transitions
_this.$outer.addClass('lg-no-trans');
this.$slide.removeClass('lg-prev-slide lg-next-slide');
if (direction === 'prev') {
//prevslide
this.$slide.eq(index).addClass('lg-prev-slide');
this.$slide.eq(_prevIndex).addClass('lg-next-slide');
} else {
// next slide
this.$slide.eq(index).addClass('lg-next-slide');
this.$slide.eq(_prevIndex).addClass('lg-prev-slide');
}
// give 50 ms for browser to add/remove class
setTimeout(function() {
_this.$slide.removeClass('lg-current');
//_this.$slide.eq(_prevIndex).removeClass('lg-current');
_this.$slide.eq(index).addClass('lg-current');
// reset all transitions
_this.$outer.removeClass('lg-no-trans');
}, 50);
} else {
this.$slide.removeClass('lg-prev-slide lg-current lg-next-slide');
var touchPrev;
var touchNext;
if (_length > 2) {
touchPrev = index - 1;
touchNext = index + 1;
if ((index === 0) && (_prevIndex === _length - 1)) {
// next slide
touchNext = 0;
touchPrev = _length - 1;
} else if ((index === _length - 1) && (_prevIndex === 0)) {
// prev slide
touchNext = 0;
touchPrev = _length - 1;
}
} else {
touchPrev = 0;
touchNext = 1;
}
if (direction === 'prev') {
_this.$slide.eq(touchNext).addClass('lg-next-slide');
} else {
_this.$slide.eq(touchPrev).addClass('lg-prev-slide');
}
_this.$slide.eq(index).addClass('lg-current');
}
if (_this.lGalleryOn) {
setTimeout(function() {
_this.loadContent(index, true, 0);
}, this.s.speed + 50);
setTimeout(function() {
_this.lgBusy = false;
_this.$el.trigger('onAfterSlide.lg', [_prevIndex, index, fromTouch, fromThumb]);
}, this.s.speed);
} else {
_this.loadContent(index, true, _this.s.backdropDuration);
_this.lgBusy = false;
_this.$el.trigger('onAfterSlide.lg', [_prevIndex, index, fromTouch, fromThumb]);
}
_this.lGalleryOn = true;
if (this.s.counter) {
$('#lg-counter-current').text(index + 1);
}
}
_this.index = index;
};
$(document).ready(function() {
for(var i=0; i<10 ; i++){
$('#lightgallery' + i).lightGallery({
pager: true
});
}
});
HTML:
<section id="galler" style="display: flex; flex-wrap: wrap; justify-content:center;">
<div class="demo-gallery">
<ul id="lightgallery0">
<h4>First love 29.07.2018.</h4>
<li data-responsive="img/29.07.2018/1.jpg 375, img/29.07.2018/1.jpg 480, img/29.07.2018/1.jpg 800" data-src="img/29.07.2018/1.jpg" data-sub-html="<h4>Solar Matinee - First Love</h4> " style='display:inline-block;' data-pinterest-text="Pin it">
<a href="">
<img class="img-responsive" src="img/29.07.2018/1.jpg">
<div class="demo-gallery-poster">
<img src="img/zoom.png">
</div>
</a>
</li>
<li data-responsive="img/29.07.2018/2.jpg 375, img/29.07.2018/2.jpg 800" class="none" data-src="img/29.07.2018/2.jpg" data-pinterest-text="Pin it">
</li>
<li data-responsive="img/29.07.2018/3.jpg 375, img/29.07.2018/3.jpg 800" class="none" data-src="img/29.07.2018/3.jpg" data-pinterest-text="Pin it">
</li>
</ul>
</div>
</section>
