magnificPopup

HTML

<!-- jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<!-- bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
            
            
            <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/jquery.magnific-popup.min.js"></script>
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/magnific-popup.min.css">
                
                
                <div id="content">
                    <div class="item-port">  
                        <img src="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_s.jpg" height="75" width="75" alt="" />                     
                        <div class="hover">             
                            <a href="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg" class="btn btn-default read-more-btn"><span class="fa fa-bars"></span></a>
                        </div>
                    </div>
                </div>

JavaScript

jQuery(document).ready(function() {
    
    $('#content').magnificPopup({
        delegate: 'a',
        type: 'image',
        image: {
            //cursor: null,
            titleSrc: 'title'
        },
        gallery: {
            enabled: true,
            preload: [0,1], // Will preload 0 - before current, and 1 after the current image
            navigateByImgClick: true
        }
    });
    
});