srinivas gowda
Reputation: 496
How to add prev and next link in bootstrap to change image in bootstrap modal
Hi everyone i am trying to display image and video in bootstrap modal popup with prev and next link for getting next image or i want to back to see image.
this perfectly working with below code but here arrow is there to move image forward or backward.
but i dont want that arrow instead of that i need prev and next link change image
i refer this link http://michaelsoriano.com/next-and-previous-buttons-bootstrap-photo-gallery/ to add prev and next link instead of arrow its not working
in the same way to display videos what are the changes i have to do
(function($) {
"use strict";
$.fn.bsPhotoGallery = function(options) {
var settings = $.extend({}, $.fn.bsPhotoGallery.defaults, options);
var id = generateId();
var classesString = settings.classes;
var classesArray = classesString.split(" ");
var clicked = {};
function getCurrentUl() {
return 'ul[data-bsp-ul-id="' + clicked.ulId + '"][data-bsp-ul-index="' + clicked.ulIndex + '"]';
}
function generateId() {
//http://fiznool.com/blog/2014/11/16/short-id-generation-in-javascript/
var ALPHABET = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
var ID_LENGTH = 4;
var out = '';
for (var i = 0; i < ID_LENGTH; i++) {
out += ALPHABET.charAt(Math.floor(Math.random() * ALPHABET.length));
}
return 'bsp-' + out;
}
function createModalWrap() {
if ($('#bsPhotoGalleryModal').length !== 0) {
return false;
}
var modal = '';
modal += '<div class="modal fade" id="bsPhotoGalleryModal" tabindex="-1" role="dialog"';
modal += 'aria-labelledby="myModalLabel" aria-hidden="true">';
modal += '<div class="modal-dialog modal-lg"><div class="modal-content">';
modal += '<div class="modal-body"></div></div></div></div>';
$('body').append(modal);
}
function showHideControls() {
var total = $(getCurrentUl() + ' li[data-bsp-li-index]').length;
if (total === clicked.nextImg) {
$('a.next').hide();
} else {
$('a.next').show()
}
if (clicked.prevImg === -1) {
$('a.previous').hide();
} else {
$('a.previous').show()
}
}
function showModal() {
var src = $(this).find('img').attr('src');
var largeImg = $(this).find('img').attr('data-bsp-large-src');
if (typeof largeImg === 'string') {
src = largeImg;
}
var index = $(this).attr('data-bsp-li-index');
var ulIndex = $(this).parent('ul').attr('data-bsp-ul-index');
var ulId = $(this).parent('ul').attr('data-bsp-ul-id');
var theImg = $(this).find('img');
var pText = $(this).find('.text').html();
var modalText = typeof pText !== 'undefined' ? pText : 'undefined';
var alt = typeof theImg.attr('alt') == 'string' ? theImg.attr('alt') : null;
clicked.img = src;
clicked.prevImg = parseInt(index) - parseInt(1);
clicked.nextImg = parseInt(index) + parseInt(1);
clicked.ulIndex = ulIndex;
clicked.ulId = ulId;
$('#bsPhotoGalleryModal').modal();
var html = '';
var img = '<img src="' + clicked.img + '" class="img-responsive"/>';
html += img;
html += '<span class="' + settings.iconClose + ' bsp-close"></span>';
html += '<div class="bsp-text-container">';
if (alt !== null) {
html += '<h6>' + alt + '</h6>'
}
if (typeof pText !== 'undefined') {
html += '<p class="pText">' + pText + '</p>'
}
html += '</div>';
html += '<a class="bsp-controls next" data-bsp-id="' + clicked.ulId + '" href="' + (clicked.nextImg) + '"><span class="' + settings.iconRight + '"></span></a>';
html += '<a class="bsp-controls previous" data-bsp-id="' + clicked.ulId + '" href="' + (clicked.prevImg) + '"><span class="' + settings.iconLeft + '"></span></a>';
$('#bsPhotoGalleryModal .modal-body').html(html);
$('.bsp-close').on('click', closeModal);
showHideControls();
}
function closeModal() {
$('#bsPhotoGalleryModal').modal('hide');
}
function nextPrevHandler() {
var ul = $(getCurrentUl());
var index = $(this).attr('href');
var src = ul.find('li[data-bsp-li-index="' + index + '"] img').attr('src');
var largeImg = ul.find('li[data-bsp-li-index="' + index + '"] img').attr('data-bsp-large-src');
if (typeof largeImg === 'string') {
src = largeImg;
}
var pText = ul.find('li[data-bsp-li-index="' + index + '"] .text').html();
var modalText = typeof pText !== 'undefined' ? pText : 'undefined';
var theImg = ul.find('li[data-bsp-li-index="' + index + '"] img');
var alt = typeof theImg.attr('alt') == 'string' ? theImg.attr('alt') : null;
$('#bsPhotoGalleryModal .modal-body img').attr('src', src);
var txt = '';
if (alt !== null) {
txt += '<h6>' + alt + '</h6>'
}
if (typeof pText !== 'undefined') {
txt += '<p class="pText">' + pText + '</p>'
}
$('.bsp-text-container').html(txt);
clicked.prevImg = parseInt(index) - 1;
clicked.nextImg = parseInt(clicked.prevImg) + 2;
if ($(this).hasClass('previous')) {
$(this).attr('href', clicked.prevImg);
$('a.next').attr('href', clicked.nextImg);
} else {
$(this).attr('href', clicked.nextImg);
$('a.previous').attr('href', clicked.prevImg);
}
// console.log(clicked);
showHideControls();
return false;
}
function clearModalContent() {
$('#bsPhotoGalleryModal .modal-body').html('');
clicked = {};
}
function insertClearFix(el, x) {
var index = (x + 1);
$.each(classesArray, function(e) {
switch (classesArray[e]) {
//large
case "col-lg-1":
if ($(el).next('li.clearfix').length == 0) {
$(el).after('<li class="clearfix visible-lg-block"></li>');
}
break;
case "col-lg-2":
if (index % 6 === 0) {
$(el).after('<li class="clearfix visible-lg-block"></li>');
}
break;
case "col-lg-3":
if (index % 4 === 0) {
$(el).after('<li class="clearfix visible-lg-block"></li>');
}
break;
case "col-lg-4":
if (index % 3 === 0) {
$(el).after('<li class="clearfix visible-lg-block"></li>');
}
break;
case "col-lg-5":
case "col-lg-6":
if (index % 2 === 0) {
$(el).after('<li class="clearfix visible-lg-block"></li>');
}
break;
//medium
case "col-md-1":
if ($(el).next('li.clearfix').length == 0) {
$(el).after('<li class="clearfix visible-md-block"></li>');
}
break;
case "col-md-2":
if (index % 6 === 0) {
$(el).after('<li class="clearfix visible-md-block"></li>');
}
break;
case "col-md-3":
if (index % 4 === 0) {
$(el).after('<li class="clearfix visible-md-block"></li>');
}
break;
case "col-md-4":
if (index % 3 === 0) {
$(el).after('<li class="clearfix visible-md-block"></li>');
}
break;
case "col-md-5":
case "col-md-6":
if (index % 2 === 0) {
$(el).after('<li class="clearfix visible-md-block"></li>');
}
break;
//small
case "col-sm-1":
if ($(el).next('li.clearfix').length == 0) {
$(el).after('<li class="clearfix visible-sm-block"></li>');
}
break;
case "col-sm-2":
if (index % 6 === 0) {
$(el).after('<li class="clearfix visible-sm-block"></li>');
}
break;
case "col-sm-3":
if (index % 4 === 0) {
$(el).after('<li class="clearfix visible-sm-block"></li>');
}
break;
case "col-sm-4":
if (index % 3 === 0) {
$(el).after('<li class="clearfix visible-sm-block"></li>');
}
break;
case "col-sm-5":
case "col-sm-6":
if (index % 2 === 0) {
$(el).after('<li class="clearfix visible-sm-block"></li>');
}
break;
//x-small
case "col-xs-1":
if ($(el).next('li.clearfix').length == 0) {
$(el).after('<li class="clearfix visible-xs-block"></li>');
}
break;
case "col-xs-2":
if (index % 6 === 0) {
$(el).after('<li class="clearfix visible-xs-block"></li>');
}
break;
case "col-xs-3":
if (index % 4 === 0) {
$(el).after('<li class="clearfix visible-xs-block"></li>');
}
break;
case "col-xs-4":
if (index % 3 === 0) {
$(el).after('<li class="clearfix visible-xs-block"></li>');
}
break;
case "col-xs-5":
case "col-xs-6":
if (index % 2 === 0) {
$(el).after('<li class="clearfix visible-xs-block"></li>');
}
break;
}
});
}
this.each(function(i) {
//ul
var items = $(this).find('li');
$(this).attr('data-bsp-ul-id', id);
$(this).attr('data-bsp-ul-index', i);
items.each(function(x) {
var theImg = $(this).find('img');
insertClearFix(this, x);
$(this).addClass(classesString);
$(this).attr('data-bsp-li-index', x);
theImg.addClass('img-responsive');
if (settings.fullHeight) {
theImg.wrap('<div class="imgWrapper"></div>')
}
if (settings.hasModal === true) {
$(this).addClass('bspHasModal');
$(this).on('click', showModal);
}
});
})
if (settings.hasModal === true) {
//this is for the next / previous buttons
$(document).on('click', 'a.bsp-controls[data-bsp-id="' + id + '"]', nextPrevHandler);
$(document).on('hidden.bs.modal', '#bsPhotoGalleryModal', clearModalContent);
//start init methods
createModalWrap();
}
return this;
};
/*defaults*/
$.fn.bsPhotoGallery.defaults = {
'classes': 'col-lg-2 col-md-2 col-sm-3 col-xs-4',
'hasModal': true,
'fullHeight': true,
'iconClose': 'glyphicon glyphicon-remove-circle',
'iconLeft': 'glyphicon glyphicon-chevron-left',
'iconRight': 'glyphicon glyphicon-chevron-right'
}
}(jQuery));#bsPhotoGalleryModal .modal-content {
border-radius: 0;
}
#bsPhotoGalleryModal .modal-dialog img {
text-align: center;
margin: 0 auto;
width: 100%;
}
#bsPhotoGalleryModal .modal-body {
padding: 0px !important;
}
#bsPhotoGalleryModal .bsp-close {
position: absolute;
right: -14px;
top: -11px;
font-size: 30px;
color: #fff;
text-shadow: 1px 1px 18px #000;
}
#bsPhotoGalleryModal .bsp-close:hover {
cursor: pointer;
opacity: .6;
text-shadow: none;
}
.bspHasModal {
cursor: pointer;
}
.bspHasModal .text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.imgWrapper {
overflow: hidden;
max-height: 99px;
}
a.bsp-controls,
a.bsp-controls:visited,
a.bsp-controls:active {
position: absolute;
top: 44%;
font-size: 26px;
color: #fff;
text-shadow: 1px 1px 18px #000;
}
a.bsp-controls.next {
right: -10px;
}
a.bsp-controls.previous {
left: -10px;
}
a.bsp-controls:hover {
opacity: .6;
text-shadow: none;
}
.bsp-text-container {
clear: both;
display: block;
padding-bottom: 5px;
}
#bsPhotoGalleryModal h6 {
margin-bottom: 0;
font-weight: bold;
color: #000;
font-size: 14px;
padding-left: 12px;
padding-right: 12px;
margin-bottom: 5px;
}
#bsPhotoGalleryModal .pText {
font-size: 11px;
margin-bottom: 0px;
padding: 0 12px 5px;
}
@media screen and (max-width: 380px) {
.col-xxs-12 {
width: 100%;
}
.col-xxs-12 img {
width: 100%;
}
}**Html page**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Bootstrap Photo Gallery Demo</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="jquery.bsPhotoGallery.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="jquery.bsPhotoGallery.js"></script>
<script>
$(document).ready(function() {
$('ul.first').bsPhotoGallery({
"classes": "col-lg-2 col-md-4 col-sm-3 col-xs-4 col-xxs-12",
"hasModal": true,
// "fullHeight" : false
});
});
</script>
</head>
<style>
@import url(https://fonts.googleapis.com/css?family=Bree+Serif);
body {
background: #ebebeb;
}
ul {
padding: 0 0 0 0;
margin: 0 0 40px 0;
}
ul li {
list-style: none;
margin-bottom: 10px;
}
.text {
/*font-family: 'Bree Serif';*/
color: #666;
font-size: 11px;
margin-bottom: 10px;
padding: 12px;
background: #fff;
}
</style>
<body>
<div class="container">
<div class="row" style="text-align: center; border-bottom: 1px dashed #ccc; padding: 0 0 20px 0; margin-bottom: 40px;">
<h3 style="font-family: 'Bree Serif', arial; font-weight: bold; font-size: 30px;">
<a style="text-decoration: none; color: #666;" href="http://michaelsoriano.com/create-a-responsive-photo-gallery-with-bootstrap-framework/">Bootstrap
Photo Gallery jQuery plugin <span style="color: red;">Demo</span>
</a>
</h3>
<p>
Resize your browser and watch the gallery adapt to the view port size. Clicking on an image will activate the Modal. Click <strong><a
style="color: red"
href="http://michaelsoriano.com/create-a-responsive-photo-gallery-with-bootstrap-framework/">Here</a></strong> to go back to the tutorial
</p>
</div>
<ul class="row first">
<li><img alt="Rocking the night away" src="http://demo.michaelsoriano.com/images/photodune-3552322-insurance-xs.jpg"></li>
<li>
<img alt="Food Explosion" src="http://demo.michaelsoriano.com/images/photodune-3807845-food-s.jpg">
<div class="text">Eiusmod tempor enim ad minim veniam</div>
</li>
<li>
<img alt="Office worker sad" src="http://demo.michaelsoriano.com/images/photodune-3835655-down-office-worker-xs.jpg">
<div class="text">Ut enim ad minim veniam</div>
</li>
<li>
<img alt="" src="http://demo.michaelsoriano.com/images/photodune-4619216-ui-control-knob-regulators-xs.jpg">
<div class="text">Do eiusmod tempor</div>
</li>
</ul>
</div>
<!-- /container -->
<body>
</html>Another way https://jsfiddle.net/vrgy0vs2/
Upvotes: 0
Views: 1149
Answers (3)
Bharatsing Parmar
Reputation: 2455
You can check updated code that show Next-Prev link implementation.
(function($) {
"use strict";
$.fn.bsPhotoGallery = function(options) {
var settings = $.extend({}, $.fn.bsPhotoGallery.defaults, options);
var id = generateId();
var classesString = settings.classes;
var classesArray = classesString.split(" ");
var clicked = {};
function getCurrentUl() {
return 'ul[data-bsp-ul-id="' + clicked.ulId + '"][data-bsp-ul-index="' + clicked.ulIndex + '"]';
}
function generateId() {
//http://fiznool.com/blog/2014/11/16/short-id-generation-in-javascript/
var ALPHABET = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
var ID_LENGTH = 4;
var out = '';
for (var i = 0; i < ID_LENGTH; i++) {
out += ALPHABET.charAt(Math.floor(Math.random() * ALPHABET.length));
}
return 'bsp-' + out;
}
function createModalWrap() {
if ($('#bsPhotoGalleryModal').length !== 0) {
return false;
}
var modal = '';
modal += '<div class="modal fade" id="bsPhotoGalleryModal" tabindex="-1" role="dialog"';
modal += 'aria-labelledby="myModalLabel" aria-hidden="true">';
modal += '<div class="modal-dialog modal-lg"><div class="modal-content">';
modal += '<div class="modal-body"></div></div></div></div>';
$('body').append(modal);
}
function showHideControls() {
var total = $(getCurrentUl() + ' li[data-bsp-li-index]').length;
if (total === clicked.nextImg) {
$('a.next').hide();
} else {
$('a.next').show()
}
if (clicked.prevImg === -1) {
$('a.previous').hide();
} else {
$('a.previous').show()
}
}
function showModal() {
var src = $(this).find('img').attr('src');
var largeImg = $(this).find('img').attr('data-bsp-large-src');
if (typeof largeImg === 'string') {
src = largeImg;
}
var index = $(this).attr('data-bsp-li-index');
var ulIndex = $(this).parent('ul').attr('data-bsp-ul-index');
var ulId = $(this).parent('ul').attr('data-bsp-ul-id');
var theImg = $(this).find('img');
var pText = $(this).find('.text').html();
var modalText = typeof pText !== 'undefined' ? pText : 'undefined';
var alt = typeof theImg.attr('alt') == 'string' ? theImg.attr('alt') : null;
clicked.img = src;
clicked.prevImg = parseInt(index) - parseInt(1);
clicked.nextImg = parseInt(index) + parseInt(1);
clicked.ulIndex = ulIndex;
clicked.ulId = ulId;
$('#bsPhotoGalleryModal').modal();
var html = '';
var img = '<img src="' + clicked.img + '" class="img-responsive"/>';
html += img;
html += '<span class="' + settings.iconClose + ' bsp-close"></span>';
html += '<div class="bsp-text-container">';
if (alt !== null) {
html += '<h6>' + alt + '</h6>'
}
if (typeof pText !== 'undefined') {
html += '<p class="pText">' + pText + '</p>'
}
html += '</div>';
html += '<p style="clear: both;display: flow-root;"><a class="bsp-controls next" data-bsp-id="' + clicked.ulId + '" href="' + (clicked.nextImg) + '"><span >Next</span></a>';
html += '<a class="bsp-controls previous" data-bsp-id="' + clicked.ulId + '" href="' + (clicked.prevImg) + '"><span>Prev</span></a></p>';
$('#bsPhotoGalleryModal .modal-body').html(html);
$('.bsp-close').on('click', closeModal);
showHideControls();
}
function closeModal() {
$('#bsPhotoGalleryModal').modal('hide');
}
function nextPrevHandler() {
var ul = $(getCurrentUl());
var index = $(this).attr('href');
var src = ul.find('li[data-bsp-li-index="' + index + '"] img').attr('src');
var largeImg = ul.find('li[data-bsp-li-index="' + index + '"] img').attr('data-bsp-large-src');
if (typeof largeImg === 'string') {
src = largeImg;
}
var pText = ul.find('li[data-bsp-li-index="' + index + '"] .text').html();
var modalText = typeof pText !== 'undefined' ? pText : 'undefined';
var theImg = ul.find('li[data-bsp-li-index="' + index + '"] img');
var alt = typeof theImg.attr('alt') == 'string' ? theImg.attr('alt') : null;
$('#bsPhotoGalleryModal .modal-body img').attr('src', src);
var txt = '';
if (alt !== null) {
txt += '<h6>' + alt + '</h6>'
}
if (typeof pText !== 'undefined') {
txt += '<p class="pText">' + pText + '</p>'
}
$('.bsp-text-container').html(txt);
clicked.prevImg = parseInt(index) - 1;
clicked.nextImg = parseInt(clicked.prevImg) + 2;
if ($(this).hasClass('previous')) {
$(this).attr('href', clicked.prevImg);
$('a.next').attr('href', clicked.nextImg);
} else {
$(this).attr('href', clicked.nextImg);
$('a.previous').attr('href', clicked.prevImg);
}
// console.log(clicked);
showHideControls();
return false;
}
function clearModalContent() {
$('#bsPhotoGalleryModal .modal-body').html('');
clicked = {};
}
function insertClearFix(el, x) {
var index = (x + 1);
$.each(classesArray, function(e) {
switch (classesArray[e]) {
//large
case "col-lg-1":
if ($(el).next('li.clearfix').length == 0) {
$(el).after('<li class="clearfix visible-lg-block"></li>');
}
break;
case "col-lg-2":
if (index % 6 === 0) {
$(el).after('<li class="clearfix visible-lg-block"></li>');
}
break;
case "col-lg-3":
if (index % 4 === 0) {
$(el).after('<li class="clearfix visible-lg-block"></li>');
}
break;
case "col-lg-4":
if (index % 3 === 0) {
$(el).after('<li class="clearfix visible-lg-block"></li>');
}
break;
case "col-lg-5":
case "col-lg-6":
if (index % 2 === 0) {
$(el).after('<li class="clearfix visible-lg-block"></li>');
}
break;
//medium
case "col-md-1":
if ($(el).next('li.clearfix').length == 0) {
$(el).after('<li class="clearfix visible-md-block"></li>');
}
break;
case "col-md-2":
if (index % 6 === 0) {
$(el).after('<li class="clearfix visible-md-block"></li>');
}
break;
case "col-md-3":
if (index % 4 === 0) {
$(el).after('<li class="clearfix visible-md-block"></li>');
}
break;
case "col-md-4":
if (index % 3 === 0) {
$(el).after('<li class="clearfix visible-md-block"></li>');
}
break;
case "col-md-5":
case "col-md-6":
if (index % 2 === 0) {
$(el).after('<li class="clearfix visible-md-block"></li>');
}
break;
//small
case "col-sm-1":
if ($(el).next('li.clearfix').length == 0) {
$(el).after('<li class="clearfix visible-sm-block"></li>');
}
break;
case "col-sm-2":
if (index % 6 === 0) {
$(el).after('<li class="clearfix visible-sm-block"></li>');
}
break;
case "col-sm-3":
if (index % 4 === 0) {
$(el).after('<li class="clearfix visible-sm-block"></li>');
}
break;
case "col-sm-4":
if (index % 3 === 0) {
$(el).after('<li class="clearfix visible-sm-block"></li>');
}
break;
case "col-sm-5":
case "col-sm-6":
if (index % 2 === 0) {
$(el).after('<li class="clearfix visible-sm-block"></li>');
}
break;
//x-small
case "col-xs-1":
if ($(el).next('li.clearfix').length == 0) {
$(el).after('<li class="clearfix visible-xs-block"></li>');
}
break;
case "col-xs-2":
if (index % 6 === 0) {
$(el).after('<li class="clearfix visible-xs-block"></li>');
}
break;
case "col-xs-3":
if (index % 4 === 0) {
$(el).after('<li class="clearfix visible-xs-block"></li>');
}
break;
case "col-xs-4":
if (index % 3 === 0) {
$(el).after('<li class="clearfix visible-xs-block"></li>');
}
break;
case "col-xs-5":
case "col-xs-6":
if (index % 2 === 0) {
$(el).after('<li class="clearfix visible-xs-block"></li>');
}
break;
}
});
}
this.each(function(i) {
//ul
var items = $(this).find('li');
$(this).attr('data-bsp-ul-id', id);
$(this).attr('data-bsp-ul-index', i);
items.each(function(x) {
var theImg = $(this).find('img');
insertClearFix(this, x);
$(this).addClass(classesString);
$(this).attr('data-bsp-li-index', x);
theImg.addClass('img-responsive');
if (settings.fullHeight) {
theImg.wrap('<div class="imgWrapper"></div>')
}
if (settings.hasModal === true) {
$(this).addClass('bspHasModal');
$(this).on('click', showModal);
}
});
})
if (settings.hasModal === true) {
//this is for the next / previous buttons
$(document).on('click', 'a.bsp-controls[data-bsp-id="' + id + '"]', nextPrevHandler);
$(document).on('hidden.bs.modal', '#bsPhotoGalleryModal', clearModalContent);
//start init methods
createModalWrap();
}
return this;
};
/*defaults*/
$.fn.bsPhotoGallery.defaults = {
'classes': 'col-lg-2 col-md-2 col-sm-3 col-xs-4',
'hasModal': true,
'fullHeight': true,
'iconClose': 'glyphicon glyphicon-remove-circle',
'iconLeft': 'glyphicon glyphicon-chevron-left',
'iconRight': 'glyphicon glyphicon-chevron-right'
}
}(jQuery));#bsPhotoGalleryModal .modal-content {
border-radius: 0;
}
#bsPhotoGalleryModal .modal-dialog img {
text-align: center;
margin: 0 auto;
width: 100%;
}
#bsPhotoGalleryModal .modal-body {
padding: 0px !important;
}
#bsPhotoGalleryModal .bsp-close {
position: absolute;
right: -14px;
top: -11px;
font-size: 30px;
color: #fff;
text-shadow: 1px 1px 18px #000;
}
#bsPhotoGalleryModal .bsp-close:hover {
cursor: pointer;
opacity: .6;
text-shadow: none;
}
.bspHasModal {
cursor: pointer;
}
.bspHasModal .text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.imgWrapper {
overflow: hidden;
max-height: 99px;
}
a.bsp-controls,
a.bsp-controls:visited,
a.bsp-controls:active {
position: absolute;
top: 44%;
font-size: 26px;
color: #fff;
text-shadow: 1px 1px 18px #000;
}
a.bsp-controls.next {
right: -10px;
}
a.bsp-controls.previous {
left: -10px;
}
a.bsp-controls:hover {
opacity: .6;
text-shadow: none;
}
.bsp-text-container {
clear: both;
display: block;
padding-bottom: 5px;
}
#bsPhotoGalleryModal h6 {
margin-bottom: 0;
font-weight: bold;
color: #000;
font-size: 14px;
padding-left: 12px;
padding-right: 12px;
margin-bottom: 5px;
}
#bsPhotoGalleryModal .pText {
font-size: 11px;
margin-bottom: 0px;
padding: 0 12px 5px;
}
@media screen and (max-width: 380px) {
.col-xxs-12 {
width: 100%;
}
.col-xxs-12 img {
width: 100%;
}
}
a.bsp-controls, a.bsp-controls:visited, a.bsp-controls:active{
position:relative;
}
.bsp-controls.next{
float:right;
margin-right:50px;
color:blue;
}
.bsp-controls.previous{
float:left;
margin-left:50px;
color:blue;
}**Html page**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Bootstrap Photo Gallery Demo</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="jquery.bsPhotoGallery.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="jquery.bsPhotoGallery.js"></script>
<script>
$(document).ready(function() {
$('ul.first').bsPhotoGallery({
"classes": "col-lg-2 col-md-4 col-sm-3 col-xs-4 col-xxs-12",
"hasModal": true,
// "fullHeight" : false
});
});
</script>
</head>
<style>
@import url(https://fonts.googleapis.com/css?family=Bree+Serif);
body {
background: #ebebeb;
}
ul {
padding: 0 0 0 0;
margin: 0 0 40px 0;
}
ul li {
list-style: none;
margin-bottom: 10px;
}
.text {
/*font-family: 'Bree Serif';*/
color: #666;
font-size: 11px;
margin-bottom: 10px;
padding: 12px;
background: #fff;
}
</style>
<body>
<div class="container">
<div class="row" style="text-align: center; border-bottom: 1px dashed #ccc; padding: 0 0 20px 0; margin-bottom: 40px;">
<h3 style="font-family: 'Bree Serif', arial; font-weight: bold; font-size: 30px;">
<a style="text-decoration: none; color: #666;" href="http://michaelsoriano.com/create-a-responsive-photo-gallery-with-bootstrap-framework/">Bootstrap
Photo Gallery jQuery plugin <span style="color: red;">Demo</span>
</a>
</h3>
<p>
Resize your browser and watch the gallery adapt to the view port size. Clicking on an image will activate the Modal. Click <strong><a
style="color: red"
href="http://michaelsoriano.com/create-a-responsive-photo-gallery-with-bootstrap-framework/">Here</a></strong> to go back to the tutorial
</p>
</div>
<ul class="row first">
<li><img alt="Rocking the night away" src="http://demo.michaelsoriano.com/images/photodune-3552322-insurance-xs.jpg"></li>
<li>
<img alt="Food Explosion" src="http://demo.michaelsoriano.com/images/photodune-3807845-food-s.jpg">
<div class="text">Eiusmod tempor enim ad minim veniam</div>
</li>
<li>
<img alt="Office worker sad" src="http://demo.michaelsoriano.com/images/photodune-3835655-down-office-worker-xs.jpg">
<div class="text">Ut enim ad minim veniam</div>
</li>
<li>
<img alt="" src="http://demo.michaelsoriano.com/images/photodune-4619216-ui-control-knob-regulators-xs.jpg">
<div class="text">Do eiusmod tempor</div>
</li>
</ul>
</div>
<!-- /container -->
<body>
</html>Upvotes: 0
hans-könig
Reputation: 553
You just needs two changes to the Javascript code:
replace
<span class="' + settings.iconRight + '"></span> with Next
and
replace <span class="' + settings.iconLeft + '"></span> with Prev
Schroll right to see the replacements at two lines which contains html definations.
Your Javascript code
(function($) {
"use strict";
$.fn.bsPhotoGallery = function(options) {
var settings = $.extend({}, $.fn.bsPhotoGallery.defaults, options);
var id = generateId();
var classesString = settings.classes;
var classesArray = classesString.split(" ");
var clicked = {};
function getCurrentUl() {
return 'ul[data-bsp-ul-id="' + clicked.ulId + '"][data-bsp-ul-index="' + clicked.ulIndex + '"]';
}
function generateId() {
//http://fiznool.com/blog/2014/11/16/short-id-generation-in-javascript/
var ALPHABET = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
var ID_LENGTH = 4;
var out = '';
for (var i = 0; i < ID_LENGTH; i++) {
out += ALPHABET.charAt(Math.floor(Math.random() * ALPHABET.length));
}
return 'bsp-' + out;
}
function createModalWrap() {
if ($('#bsPhotoGalleryModal').length !== 0) {
return false;
}
var modal = '';
modal += '<div class="modal fade" id="bsPhotoGalleryModal" tabindex="-1" role="dialog"';
modal += 'aria-labelledby="myModalLabel" aria-hidden="true">';
modal += '<div class="modal-dialog modal-lg"><div class="modal-content">';
modal += '<div class="modal-body"></div></div></div></div>';
$('body').append(modal);
}
function showHideControls() {
var total = $(getCurrentUl() + ' li[data-bsp-li-index]').length;
if (total === clicked.nextImg) {
$('a.next').hide();
} else {
$('a.next').show()
}
if (clicked.prevImg === -1) {
$('a.previous').hide();
} else {
$('a.previous').show()
}
}
function showModal() {
var src = $(this).find('img').attr('src');
var largeImg = $(this).find('img').attr('data-bsp-large-src');
if (typeof largeImg === 'string') {
src = largeImg;
}
var index = $(this).attr('data-bsp-li-index');
var ulIndex = $(this).parent('ul').attr('data-bsp-ul-index');
var ulId = $(this).parent('ul').attr('data-bsp-ul-id');
var theImg = $(this).find('img');
var pText = $(this).find('.text').html();
var modalText = typeof pText !== 'undefined' ? pText : 'undefined';
var alt = typeof theImg.attr('alt') == 'string' ? theImg.attr('alt') : null;
clicked.img = src;
clicked.prevImg = parseInt(index) - parseInt(1);
clicked.nextImg = parseInt(index) + parseInt(1);
clicked.ulIndex = ulIndex;
clicked.ulId = ulId;
$('#bsPhotoGalleryModal').modal();
var html = '';
var img = '<img src="' + clicked.img + '" class="img-responsive"/>';
html += img;
html += '<span class="' + settings.iconClose + ' bsp-close"></span>';
html += '<div class="bsp-text-container">';
if (alt !== null) {
html += '<h6>' + alt + '</h6>'
}
if (typeof pText !== 'undefined') {
html += '<p class="pText">' + pText + '</p>'
}
html += '</div>';
html += '<a class="bsp-controls next" data-bsp-id="' + clicked.ulId + '" href="' + (clicked.nextImg) + '"><span>Next</span></a>';
html += '<a class="bsp-controls previous" data-bsp-id="' + clicked.ulId + '" href="' + (clicked.prevImg) + '"><span>Prev</span></a>';
$('#bsPhotoGalleryModal .modal-body').html(html);
$('.bsp-close').on('click', closeModal);
showHideControls();
}
function closeModal() {
$('#bsPhotoGalleryModal').modal('hide');
}
function nextPrevHandler() {
var ul = $(getCurrentUl());
var index = $(this).attr('href');
var src = ul.find('li[data-bsp-li-index="' + index + '"] img').attr('src');
var largeImg = ul.find('li[data-bsp-li-index="' + index + '"] img').attr('data-bsp-large-src');
if (typeof largeImg === 'string') {
src = largeImg;
}
var pText = ul.find('li[data-bsp-li-index="' + index + '"] .text').html();
var modalText = typeof pText !== 'undefined' ? pText : 'undefined';
var theImg = ul.find('li[data-bsp-li-index="' + index + '"] img');
var alt = typeof theImg.attr('alt') == 'string' ? theImg.attr('alt') : null;
$('#bsPhotoGalleryModal .modal-body img').attr('src', src);
var txt = '';
if (alt !== null) {
txt += '<h6>' + alt + '</h6>'
}
if (typeof pText !== 'undefined') {
txt += '<p class="pText">' + pText + '</p>'
}
$('.bsp-text-container').html(txt);
clicked.prevImg = parseInt(index) - 1;
clicked.nextImg = parseInt(clicked.prevImg) + 2;
if ($(this).hasClass('previous')) {
$(this).attr('href', clicked.prevImg);
$('a.next').attr('href', clicked.nextImg);
} else {
$(this).attr('href', clicked.nextImg);
$('a.previous').attr('href', clicked.prevImg);
}
// console.log(clicked);
showHideControls();
return false;
}
function clearModalContent() {
$('#bsPhotoGalleryModal .modal-body').html('');
clicked = {};
}
function insertClearFix(el, x) {
var index = (x + 1);
$.each(classesArray, function(e) {
switch (classesArray[e]) {
//large
case "col-lg-1":
if ($(el).next('li.clearfix').length == 0) {
$(el).after('<li class="clearfix visible-lg-block"></li>');
}
break;
case "col-lg-2":
if (index % 6 === 0) {
$(el).after('<li class="clearfix visible-lg-block"></li>');
}
break;
case "col-lg-3":
if (index % 4 === 0) {
$(el).after('<li class="clearfix visible-lg-block"></li>');
}
break;
case "col-lg-4":
if (index % 3 === 0) {
$(el).after('<li class="clearfix visible-lg-block"></li>');
}
break;
case "col-lg-5":
case "col-lg-6":
if (index % 2 === 0) {
$(el).after('<li class="clearfix visible-lg-block"></li>');
}
break;
//medium
case "col-md-1":
if ($(el).next('li.clearfix').length == 0) {
$(el).after('<li class="clearfix visible-md-block"></li>');
}
break;
case "col-md-2":
if (index % 6 === 0) {
$(el).after('<li class="clearfix visible-md-block"></li>');
}
break;
case "col-md-3":
if (index % 4 === 0) {
$(el).after('<li class="clearfix visible-md-block"></li>');
}
break;
case "col-md-4":
if (index % 3 === 0) {
$(el).after('<li class="clearfix visible-md-block"></li>');
}
break;
case "col-md-5":
case "col-md-6":
if (index % 2 === 0) {
$(el).after('<li class="clearfix visible-md-block"></li>');
}
break;
//small
case "col-sm-1":
if ($(el).next('li.clearfix').length == 0) {
$(el).after('<li class="clearfix visible-sm-block"></li>');
}
break;
case "col-sm-2":
if (index % 6 === 0) {
$(el).after('<li class="clearfix visible-sm-block"></li>');
}
break;
case "col-sm-3":
if (index % 4 === 0) {
$(el).after('<li class="clearfix visible-sm-block"></li>');
}
break;
case "col-sm-4":
if (index % 3 === 0) {
$(el).after('<li class="clearfix visible-sm-block"></li>');
}
break;
case "col-sm-5":
case "col-sm-6":
if (index % 2 === 0) {
$(el).after('<li class="clearfix visible-sm-block"></li>');
}
break;
//x-small
case "col-xs-1":
if ($(el).next('li.clearfix').length == 0) {
$(el).after('<li class="clearfix visible-xs-block"></li>');
}
break;
case "col-xs-2":
if (index % 6 === 0) {
$(el).after('<li class="clearfix visible-xs-block"></li>');
}
break;
case "col-xs-3":
if (index % 4 === 0) {
$(el).after('<li class="clearfix visible-xs-block"></li>');
}
break;
case "col-xs-4":
if (index % 3 === 0) {
$(el).after('<li class="clearfix visible-xs-block"></li>');
}
break;
case "col-xs-5":
case "col-xs-6":
if (index % 2 === 0) {
$(el).after('<li class="clearfix visible-xs-block"></li>');
}
break;
}
});
}
this.each(function(i) {
//ul
var items = $(this).find('li');
$(this).attr('data-bsp-ul-id', id);
$(this).attr('data-bsp-ul-index', i);
items.each(function(x) {
var theImg = $(this).find('img');
insertClearFix(this, x);
$(this).addClass(classesString);
$(this).attr('data-bsp-li-index', x);
theImg.addClass('img-responsive');
if (settings.fullHeight) {
theImg.wrap('<div class="imgWrapper"></div>')
}
if (settings.hasModal === true) {
$(this).addClass('bspHasModal');
$(this).on('click', showModal);
}
});
})
if (settings.hasModal === true) {
//this is for the next / previous buttons
$(document).on('click', 'a.bsp-controls[data-bsp-id="' + id + '"]', nextPrevHandler);
$(document).on('hidden.bs.modal', '#bsPhotoGalleryModal', clearModalContent);
//start init methods
createModalWrap();
}
return this;
};
/*defaults*/
$.fn.bsPhotoGallery.defaults = {
'classes': 'col-lg-2 col-md-2 col-sm-3 col-xs-4',
'hasModal': true,
'fullHeight': true,
'iconClose': 'glyphicon glyphicon-remove-circle',
'iconLeft': 'glyphicon glyphicon-chevron-left',
'iconRight': 'glyphicon glyphicon-chevron-right'
}
}(jQuery));
Upvotes: 0
Jyothi Babu Araja
Reputation: 10292
By removing your default bsControls, you can define your own controls. See the below example implemented with bootstrap grid.
(function($) {
"use strict";
$.fn.bsPhotoGallery = function(options) {
var settings = $.extend({}, $.fn.bsPhotoGallery.defaults, options);
var id = generateId();
var classesString = settings.classes;
var classesArray = classesString.split(" ");
var clicked = {};
function getCurrentUl() {
return 'ul[data-bsp-ul-id="' + clicked.ulId + '"][data-bsp-ul-index="' + clicked.ulIndex + '"]';
}
function generateId() {
//http://fiznool.com/blog/2014/11/16/short-id-generation-in-javascript/
var ALPHABET = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
var ID_LENGTH = 4;
var out = '';
for (var i = 0; i < ID_LENGTH; i++) {
out += ALPHABET.charAt(Math.floor(Math.random() * ALPHABET.length));
}
return 'bsp-' + out;
}
function createModalWrap() {
if ($('#bsPhotoGalleryModal').length !== 0) {
return false;
}
var modal = '';
modal += '<div class="modal fade" id="bsPhotoGalleryModal" tabindex="-1" role="dialog"';
modal += 'aria-labelledby="myModalLabel" aria-hidden="true">';
modal += '<div class="modal-dialog modal-lg"><div class="modal-content">';
modal += '<div class="modal-body"></div></div></div></div>';
$('body').append(modal);
}
function showHideControls() {
var total = $(getCurrentUl() + ' li[data-bsp-li-index]').length;
if (total === clicked.nextImg) {
$('a.next').hide();
} else {
$('a.next').show()
}
if (clicked.prevImg === -1) {
$('a.previous').hide();
} else {
$('a.previous').show()
}
}
function showModal() {
var src = $(this).find('img').attr('src');
var largeImg = $(this).find('img').attr('data-bsp-large-src');
if (typeof largeImg === 'string') {
src = largeImg;
}
var index = $(this).attr('data-bsp-li-index');
var ulIndex = $(this).parent('ul').attr('data-bsp-ul-index');
var ulId = $(this).parent('ul').attr('data-bsp-ul-id');
var theImg = $(this).find('img');
var pText = $(this).find('.text').html();
var modalText = typeof pText !== 'undefined' ? pText : 'undefined';
var alt = typeof theImg.attr('alt') == 'string' ? theImg.attr('alt') : null;
clicked.img = src;
clicked.prevImg = parseInt(index) - parseInt(1);
clicked.nextImg = parseInt(index) + parseInt(1);
clicked.ulIndex = ulIndex;
clicked.ulId = ulId;
$('#bsPhotoGalleryModal').modal();
var html = "";
var img = '<img src="' + clicked.img + '" class="img-responsive"/>';
html += img;
html += '<span class="' + settings.iconClose + ' bsp-close"></span>';
html += "<div class='row'><div class='text-left col-md-2 col-lg-2 col-sm-2 col-xs-2'>";
html += '<a class="bsp-controls next" data-bsp-id="' + clicked.ulId + '" href="' + (clicked.nextImg) + '"><span>Prev</span></a>';
html += "</div><div class='col-md-8 col-lg-8 col-sm-8 col-xs-8'>";
html += '<div class="bsp-text-container">';
if (alt !== null) {
html += '<h6>' + alt + '</h6>'
}
if (typeof pText !== 'undefined') {
html += '<p class="pText">' + pText + '</p>'
}
html += '</div>';
html += "</div><div class='text-right col-md-2 col-lg-2 col-sm-2 col-xs-2'>";
html += '<a class="bsp-controls previous" data-bsp-id="' + clicked.ulId + '" href="' + (clicked.prevImg) + '"><span>Next</span></a>';
html += "</div></div>";
$('#bsPhotoGalleryModal .modal-body').html(html);
$('.bsp-close').on('click', closeModal);
showHideControls();
}
function closeModal() {
$('#bsPhotoGalleryModal').modal('hide');
}
function nextPrevHandler() {
var ul = $(getCurrentUl());
var index = $(this).attr('href');
var src = ul.find('li[data-bsp-li-index="' + index + '"] img').attr('src');
var largeImg = ul.find('li[data-bsp-li-index="' + index + '"] img').attr('data-bsp-large-src');
if (typeof largeImg === 'string') {
src = largeImg;
}
var pText = ul.find('li[data-bsp-li-index="' + index + '"] .text').html();
var modalText = typeof pText !== 'undefined' ? pText : 'undefined';
var theImg = ul.find('li[data-bsp-li-index="' + index + '"] img');
var alt = typeof theImg.attr('alt') == 'string' ? theImg.attr('alt') : null;
$('#bsPhotoGalleryModal .modal-body img').attr('src', src);
var txt = '';
if (alt !== null) {
txt += '<h6>' + alt + '</h6>'
}
if (typeof pText !== 'undefined') {
txt += '<p class="pText">' + pText + '</p>'
}
$('.bsp-text-container').html(txt);
clicked.prevImg = parseInt(index) - 1;
clicked.nextImg = parseInt(clicked.prevImg) + 2;
if ($(this).hasClass('previous')) {
$(this).attr('href', clicked.prevImg);
$('a.next').attr('href', clicked.nextImg);
} else {
$(this).attr('href', clicked.nextImg);
$('a.previous').attr('href', clicked.prevImg);
}
// console.log(clicked);
showHideControls();
return false;
}
function clearModalContent() {
$('#bsPhotoGalleryModal .modal-body').html('');
clicked = {};
}
function insertClearFix(el, x) {
var index = (x + 1);
$.each(classesArray, function(e) {
switch (classesArray[e]) {
//large
case "col-lg-1":
if ($(el).next('li.clearfix').length == 0) {
$(el).after('<li class="clearfix visible-lg-block"></li>');
}
break;
case "col-lg-2":
if (index % 6 === 0) {
$(el).after('<li class="clearfix visible-lg-block"></li>');
}
break;
case "col-lg-3":
if (index % 4 === 0) {
$(el).after('<li class="clearfix visible-lg-block"></li>');
}
break;
case "col-lg-4":
if (index % 3 === 0) {
$(el).after('<li class="clearfix visible-lg-block"></li>');
}
break;
case "col-lg-5":
case "col-lg-6":
if (index % 2 === 0) {
$(el).after('<li class="clearfix visible-lg-block"></li>');
}
break;
//medium
case "col-md-1":
if ($(el).next('li.clearfix').length == 0) {
$(el).after('<li class="clearfix visible-md-block"></li>');
}
break;
case "col-md-2":
if (index % 6 === 0) {
$(el).after('<li class="clearfix visible-md-block"></li>');
}
break;
case "col-md-3":
if (index % 4 === 0) {
$(el).after('<li class="clearfix visible-md-block"></li>');
}
break;
case "col-md-4":
if (index % 3 === 0) {
$(el).after('<li class="clearfix visible-md-block"></li>');
}
break;
case "col-md-5":
case "col-md-6":
if (index % 2 === 0) {
$(el).after('<li class="clearfix visible-md-block"></li>');
}
break;
//small
case "col-sm-1":
if ($(el).next('li.clearfix').length == 0) {
$(el).after('<li class="clearfix visible-sm-block"></li>');
}
break;
case "col-sm-2":
if (index % 6 === 0) {
$(el).after('<li class="clearfix visible-sm-block"></li>');
}
break;
case "col-sm-3":
if (index % 4 === 0) {
$(el).after('<li class="clearfix visible-sm-block"></li>');
}
break;
case "col-sm-4":
if (index % 3 === 0) {
$(el).after('<li class="clearfix visible-sm-block"></li>');
}
break;
case "col-sm-5":
case "col-sm-6":
if (index % 2 === 0) {
$(el).after('<li class="clearfix visible-sm-block"></li>');
}
break;
//x-small
case "col-xs-1":
if ($(el).next('li.clearfix').length == 0) {
$(el).after('<li class="clearfix visible-xs-block"></li>');
}
break;
case "col-xs-2":
if (index % 6 === 0) {
$(el).after('<li class="clearfix visible-xs-block"></li>');
}
break;
case "col-xs-3":
if (index % 4 === 0) {
$(el).after('<li class="clearfix visible-xs-block"></li>');
}
break;
case "col-xs-4":
if (index % 3 === 0) {
$(el).after('<li class="clearfix visible-xs-block"></li>');
}
break;
case "col-xs-5":
case "col-xs-6":
if (index % 2 === 0) {
$(el).after('<li class="clearfix visible-xs-block"></li>');
}
break;
}
});
}
this.each(function(i) {
//ul
var items = $(this).find('li');
$(this).attr('data-bsp-ul-id', id);
$(this).attr('data-bsp-ul-index', i);
items.each(function(x) {
var theImg = $(this).find('img');
insertClearFix(this, x);
$(this).addClass(classesString);
$(this).attr('data-bsp-li-index', x);
theImg.addClass('img-responsive');
if (settings.fullHeight) {
theImg.wrap('<div class="imgWrapper"></div>')
}
if (settings.hasModal === true) {
$(this).addClass('bspHasModal');
$(this).on('click', showModal);
}
});
})
if (settings.hasModal === true) {
//this is for the next / previous buttons
$(document).on('click', 'a.bsp-controls[data-bsp-id="' + id + '"]', nextPrevHandler);
$(document).on('hidden.bs.modal', '#bsPhotoGalleryModal', clearModalContent);
//start init methods
createModalWrap();
}
return this;
};
/*defaults*/
$.fn.bsPhotoGallery.defaults = {
'classes': 'col-lg-2 col-md-2 col-sm-3 col-xs-4',
'hasModal': true,
'fullHeight': true,
'iconClose': 'glyphicon glyphicon-remove-circle',
'iconLeft': 'glyphicon glyphicon-chevron-left',
'iconRight': 'glyphicon glyphicon-chevron-right'
}
}(jQuery));#bsPhotoGalleryModal .modal-content {
border-radius: 0;
}
#bsPhotoGalleryModal .modal-dialog img {
text-align: center;
margin: 0 auto;
width: 100%;
}
#bsPhotoGalleryModal .modal-body {
padding: 0px !important;
}
#bsPhotoGalleryModal .bsp-close {
position: absolute;
right: -14px;
top: -11px;
font-size: 30px;
color: #fff;
text-shadow: 1px 1px 18px #000;
}
#bsPhotoGalleryModal .bsp-close:hover {
cursor: pointer;
opacity: .6;
text-shadow: none;
}
.bspHasModal {
cursor: pointer;
}
.bspHasModal .text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.imgWrapper {
overflow: hidden;
max-height: 99px;
}
a.bsp-controls,
a.bsp-controls:visited,
a.bsp-controls:active {
/*position: absolute;
top: 44%;
font-size: 26px;*/
color: #fff;
text-shadow: 1px 1px 18px #000;
}
/*a.bsp-controls.next {
right: -10px;
}
a.bsp-controls.previous {
left: -10px;
}*/
a.bsp-controls:hover {
opacity: .6;
text-shadow: none;
}
/*.bsp-text-container {
clear: both;
display: block;
padding-bottom: 5px;
}*/
#bsPhotoGalleryModal h6 {
margin-bottom: 0;
font-weight: bold;
color: #000;
font-size: 14px;
padding-left: 12px;
padding-right: 12px;
margin-bottom: 5px;
}
#bsPhotoGalleryModal .pText {
font-size: 11px;
margin-bottom: 0px;
padding: 0 12px 5px;
}
@media screen and (max-width: 380px) {
.col-xxs-12 {
width: 100%;
}
.col-xxs-12 img {
width: 100%;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Bootstrap Photo Gallery Demo</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="jquery.bsPhotoGallery.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="jquery.bsPhotoGallery.js"></script>
<script>
$(document).ready(function() {
$('ul.first').bsPhotoGallery({
"classes": "col-lg-2 col-md-4 col-sm-3 col-xs-4 col-xxs-12",
"hasModal": true,
// "fullHeight" : false
});
});
</script>
</head>
<style>
@import url(https://fonts.googleapis.com/css?family=Bree+Serif);
body {
background: #ebebeb;
}
ul {
padding: 0 0 0 0;
margin: 0 0 40px 0;
}
ul li {
list-style: none;
margin-bottom: 10px;
}
.text {
/*font-family: 'Bree Serif';*/
color: #666;
font-size: 11px;
margin-bottom: 10px;
padding: 12px;
background: #fff;
}
</style>
<body>
<div class="container">
<div class="row" style="text-align: center; border-bottom: 1px dashed #ccc; padding: 0 0 20px 0; margin-bottom: 40px;">
<h3 style="font-family: 'Bree Serif', arial; font-weight: bold; font-size: 30px;">
<a style="text-decoration: none; color: #666;" href="http://michaelsoriano.com/create-a-responsive-photo-gallery-with-bootstrap-framework/">Bootstrap
Photo Gallery jQuery plugin <span style="color: red;">Demo</span>
</a>
</h3>
<p>
Resize your browser and watch the gallery adapt to the view port size. Clicking on an image will activate the Modal. Click <strong><a
style="color: red"
href="http://michaelsoriano.com/create-a-responsive-photo-gallery-with-bootstrap-framework/">Here</a></strong> to go back to the tutorial
</p>
</div>
<ul class="row first">
<li><img alt="Rocking the night away" src="http://demo.michaelsoriano.com/images/photodune-3552322-insurance-xs.jpg"></li>
<li>
<img alt="Food Explosion" src="http://demo.michaelsoriano.com/images/photodune-3807845-food-s.jpg">
<div class="text">Eiusmod tempor enim ad minim veniam</div>
</li>
<li>
<img alt="Office worker sad" src="http://demo.michaelsoriano.com/images/photodune-3835655-down-office-worker-xs.jpg">
<div class="text">Ut enim ad minim veniam</div>
</li>
<li>
<img alt="" src="http://demo.michaelsoriano.com/images/photodune-4619216-ui-control-knob-regulators-xs.jpg">
<div class="text">Do eiusmod tempor</div>
</li>
</ul>
</div>
<!-- /container -->
<body>
</html>Upvotes: 1
Related Questions
- Bootstrap modal link
- How do I cycle through multiple Bootstrap3 modals with next/prev links
- How to activate bootstrap modal next and back buttons
- How to bring bootstrap image preview in modal
- Bootstrap Image Modal
- How do I implement navigation from one modal to another one with Bootstrap?
- Bootstrap next and previous button in modal window
- How to add navigation buttons(previous and next) to a modal
- Need to load image as modal on click in bootstrap css
- Bootstrap Modal Form with Next/Previous Buttons