Blog

How to enlarge images using Bootstrap and Jquery

One time i was asked to build a web site that had lots of images in one page, one thing i noticed is that some times the images were too small and the user would have to zoom his browser to see them, i sew that some websites allow the user to enlarge images by clicking on them and decided to make this functionality myself

Look at the image below, if you click on it a dialog will appear with that image enlarged:

Enlarged image

What you need in order to make this work is these things:

and this sctipt:

$(function () {
    var showModal = function () {
        var $input = $(this);
        var imgAlt = $input.attr("alt");
        $("#theModal h4.modal-title").html(imgAlt);
        var img = this;
        var imageHeight = $input.height();
        var imagWidth = $input.width();
        var NewimgWidth = imagWidth * 2;
        var NewImgHeight = imageHeight * 2;
        var picSrc = $input.attr("src");
        $("#theModal img").attr('src', picSrc);
        //set new image width
        $("div.modal-dialog").css("width", NewimgWidth);
        $("#theModal img").width(NewimgWidth);
        //set new image height
        $("#theModal img").height(NewImgHeight);        
        $("#theModal").modal("show");
    };
    var MyHtml = '<div id="theModal" class="modal fade">' +
            ' <div class="modal-dialog ">' +
                '<div class="modal-content">' +
                    ' <div class="modal-header">' +
                        '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
                        '<h4 class="modal-title">Hello!</h4>' +
                     '</div>' +
                    '<div class="modal-body">' +
                       '  <img not-to-enlarge="true" class="img-responsive" + src=""alt="...">' +
                    '</div>' +
                     '<div class="modal-footer">' +
                         '<button type="button" class="btn btn-default" data-dismiss="modal">' +
                            'Close' +
                         '</button>' +
                     '</div>' +
                 '</div>' +
             '</div>' +
         '</div>';
    $("div.body-content").append(MyHtml);
    $("img[not-to-enlarge!=true]").click(showModal);
    $("img[not-to-enlarge!=true]").css("cursor", "pointer");
});

This script uses one of the bootstraps components called a Model, Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults (more info is here)

  1. var MyHtml = '<div id="theModal" class="modal fade">' +
  2.          ' <div class="modal-dialog ">' +
  3.              '<div class="modal-content">' +
  4.                  ' <div class="modal-header">' +
  5.                      '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
  6.                      '<h4 class="modal-title">Hello!</h4>' +
  7.                   '</div>' +
  8.                  '<div class="modal-body">' +
  9.                     '  <img not-to-enlarge="true" class="img-responsive" + src=""alt="...">' +
  10.                  '</div>' +
  11.                   '<div class="modal-footer">' +
  12.                       '<button type="button" class="btn btn-default" data-dismiss="modal">' +
  13.                          'Close' +
  14.                       '</button>' +
  15.                   '</div>' +
  16.               '</div>' +
  17.           '</div>' +
  18.       '</div>';
  19.  $("div.body-content").append(MyHtml);

in order for this to work an html dialog must be placed in the page, this dialog will consist of Bootstrap classes like modal, modal-content and places for the header, the body that will contain the image and the footer that will contain the close button

This dialog will be appended to the main div of the page that has the Bootstrap class body-content

$("img[not-to-enlarge!=true]").click(showModal);
    $("img[not-to-enlarge!=true]").css("cursor", "pointer");

the first line will ensure that every image that does not have the "not-to-enlarge=true" attribute will be enlarged when clicked by calling the showModal function

The second line will ensure that every image that does not have the "not-to-enlarge!=true" attribute will be hoverd with the mouse icon

  1. $(function () {
  2.     var showModal = function () {
  3.         var $input = $(this);
  4.         var imgAlt = $input.attr("alt");
  5.         $("#theModal h4.modal-title").html(imgAlt);
  6.         var img = this;
  7.         var imageHeight = $input.height();
  8.         var imagWidth = $input.width();
  9.         var NewimgWidth = imagWidth * 2;
  10.         var NewImgHeight = imageHeight * 2;
  11.         var picSrc = $input.attr("src");
  12.         $("#theModal img").attr('src', picSrc);
  13.         //set new image width
  14.         $("div.modal-dialog").css("width", NewimgWidth);
  15.         $("#theModal img").width(NewimgWidth);
  16.         //set new image height
  17.         $("#theModal img").height(NewImgHeight);        
  18.         $("#theModal").modal("show");
  19.     };

this function will be executed on every image we click (with no not-to-enlarge="true attribute)

This function takes the alt attribute of the selected image and places it on the header

It takes the height and width of the clicked image, multiplies it by 2 and builds the image in the dialog that we appended according to the new sizes

This function also places the src of the clicked image in the image of the dialog

All you need to do now is to place this script in your website, either in the BundleConfig.cs (if you working in a MVC environment), or place it on each page individually