In Bootstrap open Enlarge image in modal

Question

How do I open   enlarge an image in a modal using jquery   js and not data attributes    Anytime a user inserts an image into a content editor I need it to be clickable to expand in a modal with js  so I cannot rely on the user to input data attributes they don t know how to use   I tried -   lt a href   myImage png  id  pop  gt       lt img src   myImage png  style  width  400px  height  264px   gt      Click to Enlarge  lt  a gt    jQuery  -      pop   on  click   function          this  modal          Do I need to add info to the jquery to pass the image source to appear in the modal   Thank you

User · Accepted Answer

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">&times;</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. Hope this helps :)

User · Answer

The two above it is not run   The table edit button    lt a data-toggle  modal  type  edit  id     b- gt id    data-id     b- gt id     data-target   form edit masterbank  data-bank nama      b- gt bank nama     data-bank accnama      b- gt bank accnama     data-bank accnum      b- gt bank accnum     data-active      b- gt active     data-logobank    asset  components images user masterbank         b- gt images    href      class  edit edit-masterbank     gt  lt i class  fa fa-edit   gt  lt  i gt  lt  a gt                                                   and then in JavaScript       imagepreview555   attr  src   logobank     and then in HTML    lt img src    class  imagepreview555   style  width  100      gt    Not it runs

User · Answer

This plugin works great for me   Bootstrap 3 lightbox plugin

User · Answer

I have change it little bit but still can not do few things    I added that clicking on it close it - it was easy but very functional     lt div class  modal-dialog  data-dismiss  modal  gt    I also need different description under each photo  I added description in footer just to show what I need   It need to change with every photo    HTML   lt div class  modal fade  id  imagemodal  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  gt       lt div class  modal-dialog  data-dismiss  modal  gt         lt div class  modal-content    gt                         lt div class  modal-body  gt             lt button type  button  class  close  data-dismiss  modal  gt  lt span aria-hidden  true  gt  amp times  lt  span gt  lt span class  sr-only  gt Close lt  span gt  lt  button gt                lt img src    class  imagepreview  style  width  100     gt           lt  div gt         lt div class  modal-footer  gt          lt div class  col-xs-12  gt              lt p class  text-left  gt 1  line of description lt br gt 2  line of description  lt br gt 3  line of description lt  p gt          lt  div gt        lt  div gt               lt  div gt    lt  div gt       JavaScript     function             pop   on  click   function                 imagepreview   attr  src     this  find  img   attr  src                 imagemodal   modal  show                          Also it would be nice if this window will open only on 100  of screen   Here picture inside with description have more than 100  and in become scrollable     and if screen in much bigger than pictures it shoud stop only on orginal size  for ex  900 px and no bigger in height   http   jsfiddle net 2ve4hbmm

User · Answer

So I have put together a very rough modal in jsfiddle for you to take hints from   JSFiddle      pop   on  click   function e         e preventDefault   this is stopping the redirect to the image its self   e preventDefault          the-modal is the img tag that I use as the modal        the-modal   modal  toggle          The part that you are missing is the hidden modal that you want to display when the link is clicked  In the example I used a second image as the modal and added the Bootstap classes

User · Answer

css   img modal-img     cursor  pointer    transition  0 3s    img modal-img hover     opacity  0 7     img-modal     display  none    position  fixed    z-index  99999    padding-top  100px    left  0    top  0    width  100     height  100     overflow  auto    background-color  rgba 0 0 0 0 9      img-modal img     margin  auto    display  block    width  80     max-width  700      img-modal div     margin  auto    display  block    width  80     max-width  700px    text-align  center    color   ccc    padding  10px 0    height  150px     img-modal img   img-modal div     animation  zoom 0 6s     img-modal span     position  absolute    top  15px    right  35px    color   f1f1f1    font-size  40px    font-weight  bold    transition  0 3s    cursor  pointer     media only screen and  max-width  700px       img-modal img       width  100          keyframes zoom     0        transform  scale 0         100        transform  scale 1           Javascript    x000D   x000D     img modal-img   each function     x000D      var modal       lt div class  img-modal  gt  lt span gt  amp times  lt  span gt  lt img   gt  lt div gt  lt  div gt  lt  div gt     x000D      modal find  img   attr  src     this  attr  src     x000D      if   this  attr  alt    x000D        modal find  div   text   this  attr  alt     x000D        this  after modal   x000D      modal     this  next    x000D        this  click function event    x000D        modal show 300   x000D        modal find  span   show 0 3   x000D          x000D      modal find  span   click function event    x000D        modal hide 300   x000D          x000D        x000D      document  keyup function event    x000D      if event which  27  x000D            img-modal gt span   click    x000D        x000D  img modal-img   x000D    cursor  pointer  x000D    transition  0 3s  x000D    x000D  img modal-img hover   x000D    opacity  0 7  x000D    x000D   img-modal   x000D    display  none  x000D    position  fixed  x000D    z-index  99999  x000D    padding-top  100px  x000D    left  0  x000D    top  0  x000D    width  100   x000D    height  100   x000D    overflow  auto  x000D    background-color  rgba 0 0 0 0 9   x000D    x000D   img-modal img   x000D    margin  auto  x000D    display  block  x000D    width  80   x000D    max-width  700   x000D    x000D   img-modal div   x000D    margin  auto  x000D    display  block  x000D    width  80   x000D    max-width  700px  x000D    text-align  center  x000D    color   ccc  x000D    padding  10px 0  x000D    height  150px  x000D    x000D   img-modal img   img-modal div   x000D    animation  zoom 0 6s  x000D    x000D   img-modal span   x000D    position  absolute  x000D    top  15px  x000D    right  35px  x000D    color   f1f1f1  x000D    font-size  40px  x000D    font-weight  bold  x000D    transition  0 3s  x000D    cursor  pointer  x000D    x000D   media only screen and  max-width  700px    x000D     img-modal img   x000D      width  100   x000D      x000D    x000D   keyframes zoom   x000D    0    x000D      transform  scale 0   x000D      x000D    100    x000D      transform  scale 1   x000D      x000D    x000D  Javascript  x000D   x000D     img modal-img   each function     x000D      var modal       lt div class  img-modal  gt  lt span gt  amp times  lt  span gt  lt img   gt  lt div gt  lt  div gt  lt  div gt     x000D      modal find  img   attr  src     this  attr  src     x000D      if   this  attr  alt    x000D        modal find  div   text   this  attr  alt     x000D        this  after modal   x000D      modal     this  next    x000D        this  click function event    x000D        modal show 300   x000D        modal find  span   show 0 3   x000D          x000D      modal find  span   click function event    x000D        modal hide 300   x000D          x000D        x000D      document  keyup function event    x000D      if event which  27  x000D            img-modal gt span   click    x000D        x000D   x000D  HTML  x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet   gt  x000D   lt img src  http   www google com favicon ico  class  modal-img  gt  x000D   x000D   x000D

User · Answer

lt div class  row  style  display inline-block  gt        lt div class  col-lg-12  gt           lt h1 class  page-header  gt Thumbnail Gallery lt  h1 gt                lt div class  col-lg-3 col-md-4 col-xs-6 thumb  gt               lt a class  thumbnail  href     data-image-id    data-toggle  modal  data-title  This is my title  data-caption  Some lovely red flowers  data-image  http   onelive us wp-content uploads 2014 08 flower-delivery-online jpg  data-target   image-gallery  gt                   lt img class  img-responsive  src  http   onelive us wp-content uploads 2014 08 flower-delivery-online jpg  alt  Short alt text  gt               lt  a gt           lt  div gt               lt div class  col-lg-3 col-md-4 col-xs-6 thumb  gt               lt a class  thumbnail  href     data-image-id    data-toggle  modal  data-title  The car i dream about  data-caption  If you sponsor me  I can drive this car  data-image  http   www picturesnew com media images car-image jpg  data-target   image-gallery  gt                   lt img class  img-responsive  src  http   www picturesnew com media images car-image jpg  alt  A alt text  gt               lt  a gt           lt  div gt               lt div class  col-lg-3 col-md-4 col-xs-6 thumb  gt               lt a class  thumbnail  href     data-image-id    data-toggle  modal  data-title  Im so nice  data-caption  And if there is money left  my girlfriend will receive this car  data-image  http   upload wikimedia org wikipedia commons 7 78 1997 Fiat Panda JPG  data-target   image-gallery  gt                   lt img class  img-responsive  src  http   upload wikimedia org wikipedia commons 7 78 1997 Fiat Panda JPG  alt  Another alt text  gt               lt  a gt           lt  div gt   lt  div gt     lt div class  modal fade  id  image-gallery  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  gt       lt div class  modal-dialog  gt           lt div class  modal-content  gt               lt div class  modal-header  gt                   lt button type  button  class  close  data-dismiss  modal  gt  lt span aria-hidden  true  gt    lt  span gt  lt span class  sr-only  gt Close lt  span gt  lt  button gt                   lt h4 class  modal-title  id  image-gallery-title  gt  lt  h4 gt               lt  div gt               lt div class  modal-body  gt                   lt img id  image-gallery-image  class  img-responsive  src    gt               lt  div gt               lt div class  modal-footer  gt                    lt div class  col-md-2  gt                       lt button type  button  class  btn btn-primary  id  show-previous-image  gt Previous lt  button gt                   lt  div gt                    lt div class  col-md-8 text-justify  id  image-gallery-caption  gt                      This text will be overwritten by jQuery                  lt  div gt                    lt div class  col-md-2  gt                       lt button type  button  id  show-next-image  class  btn btn-default  gt Next lt  button gt                   lt  div gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt      lt script gt    document  ready function         loadGallery true   a thumbnail           This function disables buttons when needed     function disableButtons counter max  counter current               show-previous-image   show-next-image   show            if counter max    counter current                   show-next-image   hide              else if  counter current    1                   show-previous-image   hide                                            param setIDs        Sets IDs when DOM is loaded  If using a PHP counter  set to false          param setClickAttr  Sets the attribute for the click handler               function loadGallery setIDs  setClickAttr           var current image              selector              counter   0               show-next-image   show-previous-image   click function                if   this  attr  id       show-previous-image                    current image--                else                   current image                               selector       data-image-id      current image                      updateGallery selector                        function updateGallery selector                var  sel   selector              current image    sel data  image-id                    image-gallery-caption   text  sel data  caption                     image-gallery-title   text  sel data  title                     image-gallery-image   attr  src    sel data  image                 disableButtons counter   sel data  image-id                        if setIDs    true                   data-image-id    each function                    counter                      this  attr  data-image-id  counter                                       setClickAttr  on  click  function                updateGallery   this                           lt  script gt

User · Answer

I know your question is tagged as boostrap-modal  althought you didn t mentioned Bootstrap explicity neither   but I loved to see the simple way W3 CSS solved this and I think is good to share it      lt img src   myImage png  style  width 30  cursor zoom-in    onclick  document getElementById  modal01   style display  block   gt      lt div id  modal01  class  w3-modal  onclick  this style display  none   gt       lt div class  w3-modal-content w3-animate-zoom  gt         lt img src   myImage png  style  width 100   gt       lt  div gt     lt  div gt    I let you a link to the W3School modal image example to see the headers to make W3 CSS work

[javascript] In Bootstrap open Enlarge image in modal

Examples related to javascript

Examples related to jquery

Examples related to image

Examples related to image-enlarge

[javascript] In Bootstrap open Enlarge image in modal

Examples related to javascript

Examples related to jquery

Examples related to image

Examples related to bootstrap-modal

Examples related to image-enlarge