Adjusting the size of images in a Bootstrap lightbox gallery

Question

Adjusting the size of images in a Bootstrap lightbox gallery

I am currently working on a website for an artist, making the galleries a key aspect. The website is built using Bootstrap, with the Lightbox for Bootstrap plugin being used for the galleries. Everything seems to be working well in terms of adjusting the image width for different resolutions to ensure maximum responsiveness. However, there is an issue when clicking on vertical photos, such as the one in the second row and second column, where the image opens larger than the screen, requiring scrolling to view it fully.

Therefore, I am seeking a solution to this problem by setting a maximum height for the image that matches the height of the screen. I have been struggling to find a way to achieve this adjustment. Do you have any suggestions for a simple way to approach this? To view the issue for yourself, the website has been uploaded to a server at this link:

Thank you for your assistance.

javascript html css twitter-bootstrap

Answer 1

Answer №1

I encountered a similar issue and stumbled upon tinny77's response, which provided some insight towards a solution.

Below is a functional snippet of the resolution I implemented:

$().ready(function() {
   $('[data-toggle="lightbox"]').click(function(event) {
     event.preventDefault();
     $(this).ekkoLightbox({
       type: 'image',
       onContentLoaded: function() {
         var container = $('.ekko-lightbox-container');
         var image = container.find('img');
         var windowHeight = $(window).height();
         if(image.height() + 200 > windowHeight) {
           image.css('height', windowHeight - 150);
           var dialog = container.parents('.modal-dialog');
           var padding = parseInt(dialog.find('.modal-body').css('padding'));
           dialog.css('max-width', image.width() + padding * 2 + 2);
         }
       }
     });
   });
});

<html>
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js" type="text/javascript"></script>
    <script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/3.3.0/ekko-lightbox.min.js"></script>
</head>
<body>
<p>Click Image</p>
<a href="http://lorempixel.com/400/1920" data-toggle="lightbox">
    <img height="200" src="http://lorempixel.com/400/1920"/>
</a>
</body>
</html>

Answer 2

I encountered a similar issue and stumbled upon tinny77's response, which provided some insight towards a solution.

Below is a functional snippet of the resolution I implemented:

$().ready(function() {
   $('[data-toggle="lightbox"]').click(function(event) {
     event.preventDefault();
     $(this).ekkoLightbox({
       type: 'image',
       onContentLoaded: function() {
         var container = $('.ekko-lightbox-container');
         var image = container.find('img');
         var windowHeight = $(window).height();
         if(image.height() + 200 > windowHeight) {
           image.css('height', windowHeight - 150);
           var dialog = container.parents('.modal-dialog');
           var padding = parseInt(dialog.find('.modal-body').css('padding'));
           dialog.css('max-width', image.width() + padding * 2 + 2);
         }
       }
     });
   });
});

<html>
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js" type="text/javascript"></script>
    <script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/3.3.0/ekko-lightbox.min.js"></script>
</head>
<body>
<p>Click Image</p>
<a href="http://lorempixel.com/400/1920" data-toggle="lightbox">
    <img height="200" src="http://lorempixel.com/400/1920"/>
</a>
</body>
</html>

Answer 3

Answer №2

This is how I tackled the issue through adjusting the Javascript code:

onContentLoaded: function() {
          var imgh = $(".ekko-lightbox-container").find("img").height();
          var winh = $(window).height();
          if ((imgh+200)>winh)
          {
            $(".ekko-lightbox-container").find("img").css("height",winh-150).css("width","auto").css("margin","0 auto");
          }
        }

Answer 4

This is how I tackled the issue through adjusting the Javascript code:

onContentLoaded: function() {
          var imgh = $(".ekko-lightbox-container").find("img").height();
          var winh = $(window).height();
          if ((imgh+200)>winh)
          {
            $(".ekko-lightbox-container").find("img").css("height",winh-150).css("width","auto").css("margin","0 auto");
          }
        }

Answer 5

Answer №3

Check out the JSFiddle

.container {
    height:100%;
    width: 100%;
    border: 1px solid #000000;   
}
.item {
    max-height: 90%;
    max-width: 90%;
    border: 1px solid #000000;
}

If you have a .container with a specified width and height set as 100%, create a new class with max-width: 80%;. This will make the image occupy 80% of the .container's width.

Answer 6

Check out the JSFiddle

.container {
    height:100%;
    width: 100%;
    border: 1px solid #000000;   
}
.item {
    max-height: 90%;
    max-width: 90%;
    border: 1px solid #000000;
}

If you have a .container with a specified width and height set as 100%, create a new class with max-width: 80%;. This will make the image occupy 80% of the .container's width.

Answer 7

Answer №4

Give this a try

.ekko-lightbox.modal.fade.in div.modal-dialog{
  max-width:33%;
}

Instead of a fixed width, consider using media queries for optimal responsiveness across various devices.

Answer 8

Give this a try

.ekko-lightbox.modal.fade.in div.modal-dialog{
  max-width:33%;
}

Instead of a fixed width, consider using media queries for optimal responsiveness across various devices.

Answer 9

Answer №5

The issue has been successfully resolved by determining the maximum image height (80% of viewport height) in the preload function. However, this enhancement has not yet been integrated into the main branch. For more details, you can check out the solution and the corresponding commit on github.

Answer 10

The issue has been successfully resolved by determining the maximum image height (80% of viewport height) in the preload function. However, this enhancement has not yet been integrated into the main branch. For more details, you can check out the solution and the corresponding commit on github.

Adjusting the size of images in a Bootstrap lightbox gallery

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Encountering MIME type error (text/html) during Angular project deployment

What is the syntax for creating a zip function in TypeScript?

Tips for retrieving the current value of an input using AJAX

Exploring the nuances between Ruby on Rails and the responses from json and JavaScript ajax

How to center two divs side by side horizontally using Bootstrap

The Angular directive ng-if does not function properly when trying to evaluate if array[0] is equal to the string value 'Value'

Refresh the browser tab's content

Navigating the issue of updateMany not functioning properly in mongoose and nodejs

Utilizing CSS to Properly Position HTML Elements

Is there a way to efficiently parse and categorize erroneous JSON data in JavaScript?

Adjust CSS classes as user scrolls using skrollr

Find the mean of two values entered by the user using JavaScript

How can I use Ajax to show only one div on the entire page while keeping the CSS and other header content intact

The Date.UTC function is not providing the correct output

Utilize AngularJs and JavaScript to upload information to a JSON file

What is the process for retrieving an Object from $cookies?

Is there a way to fix the issue of ContextMenu not appearing at the right position within a scrollable

Equal vertical alignment in the center using flexbox

The exact measurement of width is not specified in the custom element that extends HTMLCanvasElement

Displaying information before it is fully loaded due to asynchronous calls