Bootstrap and Lightbox2.7.1 on click, opens blank window...

Forum|Forum|8 years ago
September 19, 2017
3 replies
741 views

I've researched until my eyes water, and I've turned my scripts and code inside out, but I continue to miss the answer.

There had been, in the past, an issue with mis-named img / image path is lightbox css, but I have the correct naming protocol (I believe) in place.

Test page at: https://0182d1d.netsolhost.com/SatGrp-BOOTSTRAP/galleries/digitalArt.html

Thanks in advance

This topic has been closed for replies.

Correct answer osgood_

There is nothing wrong with the way you have set up the code its just that this lighbox doesn't work with the jquery library version you are linking to.

If you look in the original download folder for the lightbox you will see a different version of the jquery library is linked to the example page.

This lightbox is light years old, it doesnt appear to even be responsive out of the box.

I would advise you look for a more up-to-date one that uses current versions of the jquery library.

Nancy OShea

Community Expert

Since you're already using Bootstrap, why not use Bootstrap's built-in Modal & Carousel components to create your gallery? No Lightbox scripts required.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Modal + Carousel Gallery</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Latest Bootstrap 3 CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body class="container">
<div class="row">
<div class="col-md-10 center-block text-center">
<!--INLINE THUMBNAIL IMAGES-->
<ul class="list-inline">
<li data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="0"><img class="img-thumbnail" src="https://placeimg.com/200/133/nature/1"><br>
Caption</a></li>
<li data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="1"><img class="img-thumbnail" src="https://placeimg.com/200/133/nature/2"><br>
Caption</a></li>
<li data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="2"><img class="img-thumbnail" src="https://placeimg.com/200/133/nature/3"><br>
Caption</a></li>
<li data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="3"><img class="img-thumbnail" src="https://placeimg.com/200/133/nature/4"><br>
Caption</a></li>
<li data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="4"><img class="img-thumbnail" src="https://placeimg.com/200/133/nature/5"><br>
Caption</a></li>
<li data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="5"><img class="img-thumbnail" src="https://placeimg.com/200/133/nature/6"><br>
Caption</a></li>
</ul>
</div>
</div>
<!--end of thumbnails-->
<!--BEGIN MODAL WINDOW-->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="pull-left">My Gallery Title</div>
<button type="button" class="close" data-dismiss="modal" title="Close"> <span class="glyphicon glyphicon-remove"></span></button>
</div>
<div class="modal-body">
<!--CAROUSEL & FULL SIZED IMAGES HERE-->
<div id="myGallery" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active"> <img src="https://placeimg.com/600/400/nature/1" alt="item0">
<div class="carousel-caption">
<h3>Heading 3</h3>
<p>Slide 0  description.</p>
</div>
</div>
<div class="item"> <img src="https://placeimg.com/600/400/nature/2" alt="item1">
<div class="carousel-caption">
<h3>Heading 3</h3>
<p>Slide 1 description.</p>
</div>
</div>
<div class="item"> <img src="https://placeimg.com/600/400/nature/3" alt="item2">
<div class="carousel-caption">
<h3>Heading 3</h3>
<p>Slide 2  description.</p>
</div>
</div>
<div class="item"> <img src="https://placeimg.com/600/400/nature/4" alt="item3">
<div class="carousel-caption">
<h3>Heading 3</h3>
<p>Slide 3 description.</p>
</div>
</div>
<div class="item"> <img src="https://placeimg.com/600/400/nature/5" alt="item4">
<div class="carousel-caption">
<h3>Heading 3</h3>
<p>Slide 4 description.</p>
</div>
</div>
<div class="item"> <img src="https://placeimg.com/600/400/nature/6" alt="item5">
<div class="carousel-caption">
<h3>Heading 3</h3>
<p>Slide 5 description.</p>
</div>
</div>
<!--end carousel-inner--></div>
<!--Begin Previous and Next buttons-->
<a class="left carousel-control" href="#myGallery" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#myGallery" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span></a>
<!--end carousel--></div>
<!--end modal-body--></div>
<!--begin modal footer-->
<div class="modal-footer">
<div class="pull-left">
<small>Photographs by <a href="https://placeimg.com" target="new">placeimg.com</a></small>
</div>
<button class="btn-sm close" type="button" data-dismiss="modal">Close</button>
<!--end modal-footer--></div>
<!--end modal-content--></div>
<!--end modal-dialoge--></div>
<!--end myModal--></div>
<!--latest jQuery 3 JS--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<!--Latest Bootstrap 3 JS--> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

Nancy O'Shea— Product User & Community Expert

S

SATTERWHITE ARTAuthor

Known Participant

Nancy,

As usual, you've provided a great service. I learn a great deal from you and the others whose forum names I see often providing answers, and more importantly, willing to go out of your way to offer guidance.

Would give you a "correct" but have to settle for "helpful".

Thank You.

O

osgood_Correct answer

Legend

There is nothing wrong with the way you have set up the code its just that this lighbox doesn't work with the jquery library version you are linking to.

If you look in the original download folder for the lightbox you will see a different version of the jquery library is linked to the example page.

This lightbox is light years old, it doesnt appear to even be responsive out of the box.

I would advise you look for a more up-to-date one that uses current versions of the jquery library.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.