Highlighted

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

Participant ,
Sep 18, 2017

Copy link to clipboard

Copied

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

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.

Views

404

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Participant ,
Sep 18, 2017

Copy link to clipboard

Copied

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

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.

Views

405

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 18, 2017 0
LEGEND ,
Sep 19, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 19, 2017 1
Adobe Community Professional ,
Sep 19, 2017

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 19, 2017 2
Participant ,
Sep 19, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 19, 2017 1