Jquery - How can I add a second horizontal scrollbar to an image in Lightbox?

BlueDogRanch
November 12, 2024
79 views
0 votes
2 Answers

I’m trying to add a second horizontal scrollbar to the popup image generated by Lightbox. I know that scrollbars are not the way Lightbox is intended to be used; the image in Lightbox is traditionally constrained by the window size. But, scrollbars are what the client wants, and right now, there is one scrollbar on the bottom of the image, and I want to add a second scrollbar at the top of the image.

In my jsfiddle https://jsfiddle.net/mrgfvwd1/1/ the popup image has a scrollbar at the bottom (of course, we ignore the horizontal and vertical scrollbars added by jsfiddle).

I want to add a second horizontal above the image, and I’m following this earlier answer horizontal scrollbar on top and bottom of table and their jsfiddle https://jsfiddle.net/TBnqw/1/

But I can’t figure out which div or container to target in Lightbox with either the jQuery function that "echoes" the scrollbar to the top (in the accepted answer to the question above), or a pure CSS solution. Can I use jQuery append or prepend to add the div .wrapper1 to the markup output of Lightbox?

I’m loading the Lightbox script locally in the fiddle, in case it needs to be modified. I know that’s not a good idea, but worst case, we can.

HTML:

<a href="https://fastly.picsum.photos/id/11/2500/1667.jpg?hmac=xxjFJtAPgshYkysU_aqx2sZir-kIOjNR9vx0te7GycQ" data-lightbox="1">
<img src="https://fastly.picsum.photos/id/11/2500/1667.jpg?hmac=xxjFJtAPgshYkysU_aqx2sZir-kIOjNR9vx0te7GycQ" width="300">
</a>

CSS:

body.lb-disable-scrolling {
  overflow: hidden;
}

.center {
  text-align: center;
}

.new-div {
  overflow-x: scroll;
  overflow-y: hidden;
  height: 20px;
  background-color: red;
}

.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
}

.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
  outline: none;
}

.lightbox .lb-image {
  display: block;
  width: 100% !important;
  height: auto !important;
  border-radius: 3px;
  border: 4px solid white;
}

.lightbox a img {
  border: none;
}

.lb-outerContainer {
  position: relative;
  *zoom: 1;
  margin: 0 auto;
  border-radius: 4px;
  background-color: white;
  margin-top: 30px;
}

.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-loader {
  position: absolute;
  top: 43%;
  left: 0;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(../images/loading.gif) no-repeat;
}

.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

.lb-container > .nav {
  left: 0;
}

.lb-nav a {
  outline: none;
  background-image: url("data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==");
}

.lb-prev,
.lb-next {
  height: 100%;
  cursor: pointer;
  display: block;
}

.lb-nav a.lb-prev {
  width: 20%;
  left: 0;
  float: left;
  background: url(../images/prev.png) left 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-prev:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-nav a.lb-next {
  width: 20%;
  right: 0;
  float: right;
  background: url(../images/next.png) right 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-next:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-data {
  padding: 0 4px;
  color: #ccc;
}

.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}

.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}

.lb-data .lb-caption a {
  color: #4ae;
}

.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #999999;
}

.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url(../images/close.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.lb-data .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
.lb-linkContainer {
  position: relative;
}

#lightbox {
  overflow-x: auto;
  cursor: pointer;
}

#lightbox.active {
  cursor: grabbing;
}
#lightbox::-webkit-scrollbar {
  display: none;
}
.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url(../images/close.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
  position: absolute;
  top: 10px;
  right: 20px;
}
.lb-closeContainer {
  background: rgba(0, 0, 0, 0.5);
  left: 0;
  width: 100%;
  height: 50px;
  position: fixed;
  top: 0;
  z-index: 99;
}
.admin-bar .lb-closeContainer {
  top: 32px;
}
.lb-closeContainer:before {
  content: "<-- Esc to close image. Use scroll bar to move left and right on wide images -->";
  color: white;
  font-size: 18px;
  position: relative;
  top: 25px;
}

Answers

- LajosArpad
- November 7, 2024 at 12:52 am
- 0 votes
0
You can add
```
      <div id="upper-scroll" style="width:100%;height:10px;background-color:red;overflow-x:scroll;"><div id="inner-scroll" style="height:1px;"></div></div>
```
to the lightbox above your image, then add these scrolls:
```
$(function () {
  $("#upper-scroll").scroll(function () {
    $("#lightbox").scrollLeft($("#upper-scroll").scrollLeft())
  })
  $("#lightbox").scroll(function () {
    $("#upper-scroll").scrollLeft($("#lightbox").scrollLeft())
  })
})
```
You basically create a scroll event for #upper-scroll so that a similar scroll as the event will be applied to #lightbox and vice-versa. Finally, you need to make sure that your scrolls are of similar size, so add this:
```
$("#inner-scroll").css("width", $(".lb-image").width());
```
to showImage.

Fiddle.
Login or Signup to reply.

To add a second horizontal scrollbar above the image in Lightbox (in addition to the default bottom scrollbar), you’ll need to make a few adjustments using CSS and potentially some JavaScript/jQuery to modify the Lightbox structure dynamically. Below is a solution based on the code you’ve provided.

Understanding the Structure
In the context of Lightbox, the image is contained inside a .lb-image element, and by default, Lightbox only applies one scrollbar at the bottom of the image. You want to append a second scrollbar at the top.
Targeting the Right Containers
We need to target the wrapper around the image and apply the scroll functionality to it, both for the top and bottom scrollbars.
Steps to Implement:
We’ll add a custom wrapper for the top scrollbar.
Use jQuery to insert the new wrapper into the Lightbox structure when the image is displayed.
Style the wrapper to create the second scrollbar at the top.
Here’s how you can implement it:

Here is example:

$(document).ready(function() {
  // Listen for when the Lightbox image is shown
  $(document).on('lightbox:show', function() {
    // Create the new scrollbar container at the top
    var topScrollbar = $('<div class="new-div"></div>');

    // Find the Lightbox image container and prepend the top scrollbar
    var lightboxImageContainer = $('.lightbox .lb-image');
    lightboxImageContainer.before(topScrollbar);

    // Adjust the Lightbox image container to allow scrolling
    lightboxImageContainer.css('margin-top', '20px'); // Adjust margin to prevent overlap
  });

  // Optionally: If Lightbox is closed, remove the top scrollbar wrapper
  $(document).on('lightbox:closed', function() {
    $('.new-div').remove();  // Clean up
  });
});

/* Styles for the top scrollbar wrapper */
.new-div {
  overflow-x: auto;
  overflow-y: hidden;
  height: 20px;
  background-color: red;  /* Adjust color as needed */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10100;  /* Ensure it sits above the image */
}

.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
  outline: none;
  position: relative;
}

.lb-image {
  display: block;
  width: 100% !important;
  height: auto !important;
  border-radius: 3px;
  border: 4px solid white;
  margin-top: 20px;  /* Adjust as necessary to avoid overlap with the top scrollbar */
}

/* Optional: Hide default Lightbox scrollbar to avoid duplication */
.lb-outerContainer {
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  height: 100%; /* Make sure the container is scrollable */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<a href="https://fastly.picsum.photos/id/11/2500/1667.jpg?hmac=xxjFJtAPgshYkysU_aqx2sZir-kIOjNR9vx0te7GycQ" data-lightbox="1">
  <img src="https://fastly.picsum.photos/id/11/2500/1667.jpg?hmac=xxjFJtAPgshYkysU_aqx2sZir-kIOjNR9vx0te7GycQ" width="300">
</a>

Please signup or login to give your own answer.

Click here to cancel reply.

Jquery – How can I add a second horizontal scrollbar to an image in Lightbox?

Answers