I want to show some image in a thumbnail gallery in which if you click an image then it will appear larger in a modal.

If i keep the link of the modal as an image then it does not show anything at header or footer other than the close sign in top right corner.

I am using bootstrap. I also want to know if i could replace the img tag to <a> tag to open the modal section. Please help.

Here is the code:

<div class="col-lg-3 col-md-4 col-xs-6 thumb">
        <img id="image-modal" class="img-responsive img-rounded" src="<?php echo base_url();?>img/Desert.jpg" data-target="#myModal" data-toggle="modal" alt="">
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body">
                        <img class="img-responsive" src="<?php echo base_url();?>img/Desert.jpg" alt="">
                    </div>
                    <div class="modal-footer">
                        <p>This is footer</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

I want to show some image in a thumbnail gallery in which if you click an image then it will appear larger in a modal.

If i keep the link of the modal as an image then it does not show anything at header or footer other than the close sign in top right corner.

I am using bootstrap. I also want to know if i could replace the img tag to <a> tag to open the modal section. Please help.

Here is the code:

<div class="col-lg-3 col-md-4 col-xs-6 thumb">
        <img id="image-modal" class="img-responsive img-rounded" src="<?php echo base_url();?>img/Desert.jpg" data-target="#myModal" data-toggle="modal" alt="">
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body">
                        <img class="img-responsive" src="<?php echo base_url();?>img/Desert.jpg" alt="">
                    </div>
                    <div class="modal-footer">
                        <p>This is footer</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

• javascript
• jquery
• html
• css
• bootstrap-modal

3 Answers 3

Use modal event listener and pass the image to modal

Script

$(document).ready(function () {
    $('#myModal').on('show.bs.modal', function (e) {
        var img = $(e.relatedTarget).attr('src'); // get image
        $('#showimg').attr('src' , img); //load image in modal
    });
});

add id="showimg" to image tag <img> in Modal Body

<div class="modal-body">
    <img class="img-responsive" src="" alt="" id="showimg">
</div>

Fiddle with <img> tag

Yes you can also do it with <a> tag

<a> tag

<a class="btn btn-primary btn-xs" href="imagepath" data-target="#myModal" data-toggle="modal">Open Image</a>

and event listener script will be

$(document).ready(function () {
    $('#myModal').on('show.bs.modal', function (e) {
        var img = $(e.relatedTarget).attr('href'); // get image with <a> tag
        $('#showimg').attr('src' , img); //load image in modal
    });
});

Fiddle with <a> tag

You can do it with Bootstrap only, but this is what seems like it'd help for what you want to do: https://blueimp.github.io/Bootstrap-Image-Gallery/

I use it on a few websites of mine exactly for this case.

try this Bootstrap-Image-Gallery plugin will help you. check Demo.