Cropped thumbs gallery without slider and free layout

JavaScript and CSS in head

Show / Hide Code

        <!-- Include jQuery core into head section if not already present -->
        <script type="text/javascript" src="../axZm/plugins/jquery-1.8.3.min.js"></script>

        <!-- AJAX-ZOOM -->
        <link rel="stylesheet" href="../axZm/axZm.css" type="text/css" media="screen">
        <script type="text/javascript" src="../axZm/jquery.axZm.js"></script>

        <!-- Include axZm.thumbSlider -->
        <link rel="stylesheet" type="text/css" href="../axZm/extensions/axZmThumbSlider/skins/default/jquery.axZm.thumbSlider.css" />
        <script type="text/javascript" src="../axZm/extensions/axZmThumbSlider/lib/jquery.mousewheel.min.js"></script>
        <script type="text/javascript" src="../axZm/extensions/axZmThumbSlider/lib/jquery.axZm.thumbSlider.js"></script>

        <!-- Include jquery.axZm.imageCropLoad.js -->
        <script type="text/javascript" src="../axZm/extensions/jquery.axZm.imageCropLoad.js"></script>

        <!-- A small function to add title button which will expend to full description -->
        <link rel="stylesheet" type="text/css" href="../axZm/extensions/jquery.axZm.expButton.css"></link>
        <script type="text/javascript" src="../axZm/extensions/jquery.axZm.expButton.js"></script>
                    

CSS

Show / Hide Code

HTML markup

Show / Hide Code

<!-- This example uses bootstrap CSS classes -->
<div class="row">
    <div class="col-md-9 col-md-push-3">
        <!-- Responsive container using, padding bottom defines the aspect ratio
        padding bottom could be refined with @media queries as an idea... -->
        <div class="az_embed-responsive" style="padding-bottom: 68%;">
            <div class="az_embed-responsive-item" id="azParentContainer">
                <!-- Content inside target will be removed -->
                <div style="padding: 20px">Loading, please wait...</div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-md-pull-9">
        <!-- Cropped thumbs -->
        <div id="azThumbsCropArea" style="position: relative; margin-top: 20px;">
        </div>
    </div>
</div>
                    

Javascript

Show / Hide Code