Click on Image to see larger version




This template renders a number of image thumbnails.
Each thumbnail has a significantly smaller size than the original image. By clicking on the image thumbnail, a popup with the larger original image is displayed.


<div class="container">
    <div class="row">
        <h3>Click on Image to see larger version</h3>
        <!-- Thumbnail image City-->
        <a href="#" data-toggle="modal" data-target=".dialog1">
            <img src="http://www.prepbootstrap.com/Content/images/template/thumbnailpopup/city_small.jpg" width="150" class="img-responsive img-rounded center-block" alt="" />
        </a>
        <hr />
        <!-- Thumbnail image House-->
        <a href="#" data-toggle="modal" data-target=".dialog2">
            <img src="http://www.prepbootstrap.com/Content/images/template/thumbnailpopup/house_small.jpg" width="150" class="img-responsive img-rounded center-block" alt="" />
        </a>
        <hr />
        <!-- Thumbnail image Galaxy-->
        <a href="#" data-toggle="modal" data-target=".dialog3">
            <img src="http://www.prepbootstrap.com/Content/images/template/thumbnailpopup/galaxy_small.jpg" width="150" class="img-responsive img-rounded center-block" alt="" />
        </a>
        <hr />
        <!--  Modal content for City Image -->
        <div class="modal fade dialog1" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                        <h4 class="modal-title" id="myLargeModalLabel-1">City</h4>
                    </div>
                    <div class="modal-body active">
                        <img src="http://www.prepbootstrap.com/Content/images/template/thumbnailpopup/city.jpg" class="img-responsive img-rounded center-block" alt="" />
                    </div>
                </div>
            </div>
        </div>
        <!--  Modal content for House Image -->
        <div class="modal fade dialog2" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel-2" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                        <h4 class="modal-title" id="myLargeModalLabel-2">House</h4>
                    </div>
                    <div class="modal-body">
                        <img src="http://www.prepbootstrap.com/Content/images/template/thumbnailpopup/house.jpg" class="img-responsive img-rounded center-block" alt="" />
                    </div>
                </div>
            </div>
        </div>
        <!--  Modal content for House Image -->
        <div class="modal fade dialog3" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel-2" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                        <h4 class="modal-title" id="myLargeModalLabel-3">Galaxy</h4>
                    </div>
                    <div class="modal-body">
                        <img src="http://www.prepbootstrap.com/Content/images/template/thumbnailpopup/galaxy.jpg" class="img-responsive img-rounded center-block" alt="" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
Was this template useful?