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

});

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s