JSFiddle - React, Tailwind, and code Playground

by someprimetime

HTML

<script src="http://epicserve.github.io/jquery-photo-enlarger/js/jquery-photo-enlarger.min.js"></script>
<script src="https://raw.githubusercontent.com/desandro/imagesloaded/master/imagesloaded.js"></script>
 <div class="container">

            <div class="row">
                <div id="main-content" class="col-lg-8 col-md-offset-2">

                    <div class="page-header">
                        <h1>jQuery Photo Enlarger <small>Example</small></h1>
                    </div>

                    <div class="related-content">
                        <div class="thumb">
                            <img class="photo" src="http://farm9.staticflickr.com/8078/8352592826_2cc72e32eb_m.jpg" data-large_photo="http://farm9.staticflickr.com/8078/8352592826_2cc72e32eb_b.jpg" data-caption="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
                        </div>
                        <div class="thumb">
                            <img class="photo" src="http://farm3.staticflickr.com/2466/3964761935_a6a6b95182_m.jpg" data-large_photo="http://farm3.staticflickr.com/2466/3964761935_a6a6b95182_b.jpg" data-caption="Phasellus vel blandit tellus. Pellentesque sit amet nunc suscipit ...">
                        </div>
                    </div>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius vulputate mauris, sit amet egestas orci ullamcorper id. Aenean vehicula sem ligula, at auctor erat tempus ut. Nullam vestibulum, purus tincidunt bibendum tristique, quam est fermentum augue, vitae lobortis quam sapien sed enim. Nam a iaculis nulla. Cras mollis diam dui, sit amet ullamcorper nibh blandit et. Etiam consequat tempus varius. Praesent faucibus diam quis dolor fringilla faucibus. Integer quis aliquet augue.</p>

                    <p>Phasellus vel blandit tellus. Pellentesque sit amet nunc suscipit, egestas augue a, tempor arcu. Praesent porta, ipsum a interdum aliquam, elit odio pharetra justo, eget...

CSS

.thumb {
    width: 210px;
    position: relative;
    margin-bottom: 10px;
    cursor: pointer;
}
.thumb img,
.thumb-large img {
    display: block;
    width: 100%;
}
.thumb .state-icon,
.thumb-large .state-icon {
    display: block;
    width: 14px;
    height: 14px;
    position: absolute;
    bottom: 0;
    right: 0;
    background: url(../img/enlarge.png) no-repeat;
}
.thumb-large .state-icon {
    background: url(../img/shrink.png) no-repeat;
    z-index: 111;
}
.thumb-large .caption {
    width: 100%;
    color: rgb(255, 255, 255);
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    bottom: 0;
    right: 0;
}
.thumb-large .caption p {
    margin: 0;
    padding: 10px;
}
.thumb-large {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 110;
}

JavaScript

'use strict';

(function($) {

    $.fn.PhotoEnlarger = function(options) {

        var plugin = this,
            default_options = {
                'max_width_container': 100,
                'caption_fadein_speed': 500,
                'caption_fadeout_speed': 500,
                'enlarge_speed': 300,
                'shrink_speed': 300,
                'add_caption_function': null
            };

        plugin.options = $.extend(default_options, options);
        plugin.enlarge = function($thumb) {
            var $thumb_img = $thumb.find('img:first'),
                $thumb_lg_div = $('<div class="thumb-large">'),
                $thumb_lg_img = $('<img>');

            $thumb_lg_img.attr('src', $thumb_img.data('large_photo'));


                var lg_img_orig_width = $thumb_lg_img[0].width,
                    lg_img_orig_height = $thumb_lg_img[0].height,
                    $caption = $('<div class="caption"><p></p></caption>'),
                    $state_icon = $('<div class="state-icon">'),
                    caption_text = $thumb_img.data('caption'),
                    max_width = lg_img_orig_width,
                    max_height = lg_img_orig_height;

                if (typeof $thumb.max_width !== 'undefined' && typeof $thumb.max_height !== 'undefined') {
                    max_width = $thumb.max_width;
                    max_height = $thumb.max_height;
                } else {
                    if (plugin.options.max_width_container === null) {
                        max_width = $thumb.parent().parent().width();
                    } else if (plugin.options.max_width_container instanceof $) {
                        max_width = plugin.options.max_width_container.width();
                    }

                    if (lg_img_orig_width > max_width) {
                        max_height = lg_img_orig_height * (max_width / lg_img_orig_width);
                    }

                    // save the widths and heights to the thumb instance
     ...