In Bootstrap Open Enlarge Image in Modal

In Bootstrap open Enlarge image in modal

You can try this code if you are using bootstrap 3:

HTML

<a href="#" id="pop">
    <img id="imageresource" src="http://patyshibuya.com.br/wp-content/uploads/2014/04/04.jpg" style="width: 400px; height: 264px;">
    Click to Enlarge
</a>
    
<!-- Creates the bootstrap modal where the image will appear -->
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Image preview</h4>
      </div>
      <div class="modal-body">
        <img src="" id="imagepreview" style="width: 400px; height: 264px;" >
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

JavaScript:

$("#pop").on("click", function() {
   $('#imagepreview').attr('src', $('#imageresource').attr('src')); // here asign the image to the modal when the user click the enlarge link
   $('#imagemodal').modal('show'); // imagemodal is the id attribute assigned to the bootstrap modal, then i use the show function
});

This is the working fiddle.

enlarge image in bootstrap:- changes all images to enlarged image

Try This -

<div class="row" id="advertisement" style="margin-bottom: 10px;">

</div>
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <center><img class="enlarged_image imgr img-responsive" src="" width="80%" height="200px" /></center>
    </div>
</div>

$(document).ready(function() {
    var url = "http://api.dentallabworld.com/advertisement.php";
    $.getJSON(url, function(result) {
        console.log(result);
        $.each(result, function(i, field) {
            var advertisement = field.Image;
            var size = field.Size;
            $("#advertisement").append('<div class="cols' + size + '" style="padding: 2.5px 5px 5px 5px;"><a href="#" class="pop"><img id="'+(i+1)+'" class="click_to_enlarge imgr" width="100%" height="200px" src="{image_path}/'+advertisement+'" onclick="showImg({image_path}/\''+advertisement+'\')"></a></div>');

        });
    });
});

var showImg = function(src) {
    $('.enlarged_image').attr('src', src);
    $('#myModal').modal('show');
}

Display image on single bootstrap modal

What you have to do is generating you image thumbs using php ,
and create your modal which has an empty image tag (add custom class to access it with jquery ) outside the loop then using jquery

just create script which get the link from clicked image and set the src of the image tag inisde the modal ,

your php code should look like :

<?php
        $images = ['image_1.png', 'image_2.png', 'image_3.png', 'image_4.png', 'image_5.png'];
        for ($cnt = 0; $cnt < count($images); $cnt++) {
            ?>
            <a href="#imagemodal" data-toggle="modal" data-target="#imagemodal">
                <img src="images/<?php echo $images[$cnt] ?>" width="100px" height="100px"/>
            </a>

            <?php
        }
        ?>
            <div class="modal fade " id="imagemodal" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog modal-sm">
                    <div class="modal-content">
                        <img class="modal-content" src="" width="100px" height="100px"/>
                    </div>
                </div>
            </div>

see below working snippet :

$(function(){  $("#image img").on("click",function(){     var src = $(this).attr("src");     $(".modal-img").prop("src",src);  })})

.modal-img {  width:100%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
  <div id="image">    <a href="#imagemodal" data-toggle="modal" data-target="#imagemodal">        <img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" width="100px" height="100px"/>    </a>    <a href="#imagemodal" data-toggle="modal" data-target="#imagemodal">        <img src="http://imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/img_01.jpg" width="100px" height="100px"/>    </a>    <a href="#imagemodal" data-toggle="modal" data-target="#imagemodal">        <img src="https://i2.wp.com/thenewcamera.com/wp-content/uploads/2015/08/Nikon-200-500mm-sample-img4.jpg?resize=750%2C502" width="100px" height="100px"/>    </a>    <a href="#imagemodal" data-toggle="modal" data-target="#imagemodal">        <img src="https://i1.wp.com/thenewcamera.com/wp-content/uploads/2015/08/Nikon-200-500mm-sample-img2.jpg?resize=750%2C502" width="100px" height="100px"/>    </a> <div>       <div class="modal fade " id="imagemodal" tabindex="-1" role="dialog" aria-hidden="true">        <div class="modal-dialog modal-sm">            <div class="modal-content">                <img class="modal-img" />            </div>        </div>    </div>

Resize image inside modal window

Images in Bootstrap 3 can be made responsive-friendly via the addition
of the .img-responsive class.

For more information you can read here

Try this:

<img class="img-responsive" src="{{ asset('img/stripe.png') }}" style="max-height:250px;">

Image pans out of the modal body when height and width is set

use "img-responsive" class when you want an image that adjust to the width of the containing object.

If you want image that adjusts to the height then use

.img-responsive-ht

{
  display: block;
  width: auto;
  max-height: 100%
}

note: remove the width and height that you mention in image tag image adjust itself w.r.t container

Enjoy :)

Increase image size on modal screen

You can make the modal fit the image width like this...

• On modal-dialog add d-flex for display:flex
• On modal-content add flex-shrink-1 w-auto mx-auto for flex-shrink:1;width:auto

Then a custom class to reset the max-width:

.modal-custom {
    max-width: inherit;
}

https://codeply.com/p/BuCU19i1mH/

<div class="modal fade show" id="ftl1Modal" role="dialog">
    <div class="modal-dialog d-flex modal-custom">
        <div class="modal-content flex-shrink-1 w-auto mx-auto">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body" id="dynamic-content">
                <img src="..." class="img-fluid" alt="Family Tree Image 1" />
            </div>
        </div>
    </div>
</div>

---

Related Topics