CODEWITHSUNDEEP
jquerytwitter-bootstrap
kromastorm
kromastorm

Reputation: 164

resizing image into bootstrap modal windows

I am creating a product gallery where there will be many products and when user clicks on any one of them, a modal window would pop up with magnified image.

I am mostly worked out how it works, except that the image overflow beyond the modal window.

I wish to add some setting so that no matter what the dimension of the image, the modal window and the image remain consistent in size.

I have create a sample view at this link:

jsfiddle

Here are the html code. HTML:

<div class="col-lg-3">
    <a href="#" class="subproduct2 subproduct  thumbnail">
        <div class="caption">
            <h4 class="">Universal Studios</h4>
        </div> <img src="http://www.lastrawberryfest.com/wp-content/uploads/2013/02/Travel-to-the-Heart-of-Los-Angeles-Best-places-to-visit.jpg"
        alt="..." class="img-responsive">
    </a>
</div>

<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-body">
        <img src="" id="imagepreview"  >
      </div>
    </div>
  </div>
</div>

CSS:

@media only screen and (min-device-width : 768px) {
    .productbox, .subproduct {
        background-color: black;
    }
    .subproduct>img {
        height: 20%;
        width: 20%;
    }
}

Javascript:

$(document).ready(function() {

    $(".subproduct2").click(function(elem) {
     $('#imagepreview').attr('src', $(this).find( "IMG" ).prop('src'));
        $('#imagemodal').modal('show'); 
        });
    });

Please let me know what I am missing here. Thanks

Update I have got the modal and the modal image working. But now the model window is the issue.

My web page has images of various sizes, due to this the modal window varies in dimension based on the image size and would also align itself at different screen positions( vertical and horizontal axis).

How do I set the size of modal so that it is consistent irrespective of the image dimension. I am fine with image scaling to available div area.

I have create a sample view at this link: jsfiddle Here are the updated code. HTML:

<div class="col-lg-3">
    <a href="#" class="subproduct1 subproduct thumbnail">
        <div class="caption">
            <h4 class="">CBS Star Gaze</h4>
        </div> <img
        src="https://cbsla.files.wordpress.com/2013/08/72371116.jpg"
        alt="..." class="img-responsive">
    </a>
</div>
<div class="col-lg-3">
    <a href="#" class="subproduct2 subproduct  thumbnail">
        <div class="caption">
            <h4 class="">Universal Studios</h4>
        </div> <img src="http://www.lastrawberryfest.com/wp-content/uploads/2013/02/Travel-to-the-Heart-of-Los-Angeles-Best-places-to-visit.jpg"
        alt="..." class="img-responsive">
    </a>
</div>
<div class="col-lg-3">
    <a href="#" class="subproduct3 subproduct  thumbnail">
        <div class="caption">
            <h4 class="">Disney Land</h4>
        </div> <img
        src="http://www.topplacestotravel.net/gallery/places-to-visit-in-los-angeles/disneyland_and_california_adventure_los_angeles.jpg"
        alt="..." class="img-responsive">
    </a>
</div>

<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-body">
        <img src="" id="imagepreview"  >
      </div>
    </div>
  </div>
</div>

Javascript:

$(document).ready(function() {

  $(".subproduct1").click(function(elem) {
         $('#imagepreview').attr('src', $(this).find( "IMG" ).prop('src'));
        $('#imagemodal').modal('show');
    });

    $(".subproduct2").click(function(e) {
        $('#imagepreview').attr('src', $(this).find( "IMG" ).prop('src'));
         $('#imagemodal').modal('show');
    });

    $(".subproduct3").click(function(e) {
        $('#imagepreview').attr('src', $(this).find( "IMG" ).prop('src'));
         $('#imagemodal').modal('show');
    });
    });

CSS:

@media only screen and (min-device-width : 768px) {
    .productbox, .subproduct {
        background-color: black;
    }
    .subproduct>img {
        height: 20%;
        width: 20%;
    }
}
#imagepreview {
    width: 100%;
}

Upvotes: 1

Views: 544

Answers (1)

dNitro
dNitro

Reputation: 5345

Just set your image width to 100%. As your image has the imagepreview id just add to your css:

#imagepreview {
  width: 100%;
}

Upvotes: 1

Related Questions