Adding arrows buttons to the image lightbox plugin

Hi,

Download the code from Github and add the below CSS to the demo.css and update the script in your html file.

Add the below CSS and script to your code

CSS:

/* ARROWS */

.imagelightbox-arrow
{
width: 3.75em; /* 60 */
height: 7.5em; /* 120 */
background-color: #444;
background-color: rgba( 0, 0, 0, .5 );
vertical-align: middle;
position: fixed;
z-index: 10001;
top: 50%;
margin-top: -3.75em; /* 60 */
}
.imagelightbox-arrow:hover,
.imagelightbox-arrow:focus
{
background-color: #666;
background-color: rgba( 0, 0, 0, .75 );
}
.imagelightbox-arrow:active
{
background-color: #111;
}
.imagelightbox-arrow-left
{
left: 2.5em; /* 40 */
}
.imagelightbox-arrow-right
{
right: 2.5em; /* 40 */
}
.imagelightbox-arrow:before
{
width: 0;
height: 0;
border: 1em solid transparent;
content: ”;
display: inline-block;
margin-bottom: -0.125em; /* 2 */
}
.imagelightbox-arrow-left:before
{
border-left: none;
border-right-color: #fff;
margin-left: -0.313em; /* 5 */
}
.imagelightbox-arrow-right:before
{
border-right: none;
border-left-color: #fff;
margin-right: -0.313em; /* 5 */
}

#imagelightbox-loading,
#imagelightbox-overlay,
#imagelightbox-close,
#imagelightbox-caption,
#imagelightbox-nav,
.imagelightbox-arrow
{
-webkit-animation: fade-in .25s linear;
animation: fade-in .25s linear;
}


Script :

$(function () {
var activityIndicatorOn = function () {
$(‘

‘).appendTo(‘body’);
},
activityIndicatorOff = function () {
$(‘#imagelightbox-loading’).remove();
},

overlayOn = function () {
$(‘

‘).appendTo(‘body’);
},
overlayOff = function () {
$(‘#imagelightbox-overlay’).remove();
},

closeButtonOn = function (instance) {
$(‘‘).appendTo(‘body’).on(‘click’, function () {
$(this).remove();
instance.quitImageLightbox();
return false;
});
},
closeButtonOff = function () {
$(‘#imagelightbox-close’).remove();
},

captionOn = function () {
var description = $(‘a[href=”‘ + $(‘#imagelightbox’).attr(‘src’) + ‘”] img’).attr(‘alt’);
if (description.length > 0)
$(‘

‘ + description + ‘

‘).appendTo(‘body’);
},
captionOff = function () {
$(‘#imagelightbox-caption’).remove();
},

navigationOn = function (instance, selector) {
var images = $(selector);
if (images.length) {
var nav = $(‘

‘);
for (var i = 0; i ‘);

nav.appendTo(‘body’);
nav.on(‘click touchend’, function () {
return false;
});

var navItems = nav.find(‘a’);
navItems.on(‘click touchend’, function () {
var $this = $(this);
if (images.eq($this.index()).attr(‘href’) != $(‘#imagelightbox’).attr(‘src’))
instance.switchImageLightbox($this.index());

navItems.removeClass(‘active’);
navItems.eq($this.index()).addClass(‘active’);

return false;
})
.on(‘touchend’, function () {
return false;
});
}
},
navigationUpdate = function (selector) {
var items = $(‘#imagelightbox-nav a’);
items.removeClass(‘active’);
items.eq($(selector).filter(‘[href=”‘ + $(‘#imagelightbox’).attr(‘src’) + ‘”]’).index(selector)).addClass(‘active’);
},
navigationOff = function () {
$(‘#imagelightbox-nav’).remove();
};

// ARROWS

arrowsOn = function (instance, selector) {
var $arrows = $(”);

$arrows.appendTo(‘body’);

$arrows.on(‘click touchend’, function (e) {
e.preventDefault();

var $this = $(this),
$target = $(selector + ‘[href=”‘ + $(‘#imagelightbox’).attr(‘src’) + ‘”]’),
index = $target.index(selector);

if ($this.hasClass(‘imagelightbox-arrow-left’)) {
index = index – 1;
if (!$(selector).eq(index).length)
index = $(selector).length;
}
else {
index = index + 1;
if (!$(selector).eq(index).length)
index = 0;
}

instance.switchImageLightbox(index);
return false;
});
},
arrowsOff = function () {
$(‘.imagelightbox-arrow’).remove();
};

//    WITH ACTIVITY INDICATION

$(‘a[data-imagelightbox=”a”]’).imageLightbox(
{
onLoadStart: function () {
activityIndicatorOn();
},
onLoadEnd: function () {
activityIndicatorOff();
},
onEnd: function () {
activityIndicatorOff();
}
});

//    WITH OVERLAY & ACTIVITY INDICATION

$(‘a[data-imagelightbox=”b”]’).imageLightbox(
{
onStart: function () {
overlayOn();
},
onEnd: function () {
overlayOff();
activityIndicatorOff();
},
onLoadStart: function () {
activityIndicatorOn();
},
onLoadEnd: function () {
activityIndicatorOff();
}
});

//    WITH “CLOSE” BUTTON & ACTIVITY INDICATION

var instanceC = $(‘a[data-imagelightbox=”c”]’).imageLightbox(
{
quitOnDocClick: false,
onStart: function () {
closeButtonOn(instanceC);
},
onEnd: function () {
closeButtonOff();
activityIndicatorOff();
},
onLoadStart: function () {
activityIndicatorOn();
},
onLoadEnd: function () {
activityIndicatorOff();
}
});

//    WITH CAPTION & ACTIVITY INDICATION

$(‘a[data-imagelightbox=”d”]’).imageLightbox(
{
onLoadStart: function () {
captionOff();
activityIndicatorOn();
},
onLoadEnd: function () {
captionOn();
activityIndicatorOff();
},
onEnd: function () {
captionOff();
activityIndicatorOff();
}
});

//    WITH DIRECTION REFERENCE

var selectorE = ‘a[data-imagelightbox=”e”]’;
var instanceE = $(selectorE).imageLightbox(
{
onStart: function () {
navigationOn(instanceE, selectorE);
},
onEnd: function () {
navigationOff();
activityIndicatorOff();
},
onLoadStart: function () {
activityIndicatorOn();
},
onLoadEnd: function () {
navigationUpdate(selectorE);
activityIndicatorOff();
}
});

//    ALL COMBINED
var selectorF = ‘a[data-imagelightbox=”f”]’;
var instanceF = $(‘a[data-imagelightbox=”f”]’).imageLightbox(
{
onStart: function () {
overlayOn();
closeButtonOn(instanceF);
arrowsOn(instanceF, selectorF);
},
onEnd: function () {
overlayOff();
captionOff();
closeButtonOff();
arrowsOff();
activityIndicatorOff();
},
onLoadStart: function () {
captionOff();
activityIndicatorOn();
},
onLoadEnd: function () {
captionOn();
activityIndicatorOff();
}
});

});