JSFiddle - React, Tailwind, and code Playground

by digiguru

HTML

<div class="inspirationGallery" id="divMediaGallery" style="position:relative;">
    
    
    <div class="media-image">
        
        <a id="ctl00_ContentMain_ucInspirationGallery_rptMediaGallery_ctl00_hlnkImage" title="Michelle &amp; Daniel" rel="group" href="/wedding-picture/michelle-daniel_2156188.htm"><img id="ctl00_ContentMain_ucInspirationGallery_rptMediaGallery_ctl00_imgGalley" class="img_media {slide: 2156188 }" src="http://hitchedukir.s3.amazonaws.com/MediaGallery/136_136_182920_Michelle-_2600_amp_3B00_-Daniel_5F00_075.jpg" style="border-width:0px;"></a>
    </div>
    
    <div class="media-image">
        
        <a id="ctl00_ContentMain_ucInspirationGallery_rptMediaGallery_ctl01_hlnkImage" title="gregallenphoto com_-0730" rel="group" href="/wedding-picture/gregallenphoto-com-0730_2153063.htm"><img id="ctl00_ContentMain_ucInspirationGallery_rptMediaGallery_ctl01_imgGalley" class="img_media {slide: 2153063 }" src="http://hitchedukir.s3.amazonaws.com/MediaGallery/136_136_182705__5F00_gregallenphoto-com_5F002D00_0730-_2800_1_2900_-_2800_2_2900_.jpg" style="border-width:0px;"></a>
    </div>
    
    <div class="media-image">
        
        <a id="ctl00_ContentMain_ucInspirationGallery_rptMediaGallery_ctl02_hlnkImage" title="gregallenphoto com_-0672 (2)" rel="group" href="/wedding-picture/gregallenphoto-com-0672-2_2153062.htm"><img id="ctl00_ContentMain_ucInspirationGallery_rptMediaGallery_ctl02_imgGalley" class="img_media {slide: 2153062 }" src="http://hitchedukir.s3.amazonaws.com/MediaGallery/136_136_182704__5F00_gregallenphoto-com_5F002D00_0672-_2800_2_2900_.jpg" style="border-width:0px;"></a>
    </div>
    
    <div class="media-image">
        
        <a id="ctl00_ContentMain_ucInspirationGallery_rptMediaGallery_ctl03_hlnkImage" title="black tower" rel="group" href="/wedding-picture/black-tower_2153060.htm"><img id="ctl00_ContentMain_ucInspirationGallery_rptMediaGallery_ctl03_imgGalley" class="img_media {slide: 2153060 }"...

CSS

.media-image { float:left; position:relative; margin:0 10px 10px 0; padding:4px; background:#ffffff; border:1px solid #d9d0df; box-shadow:0 1px 2px #d9d0df; -moz-box-shadow:0 1px 2px #d9d0df; -webkit-box-shadow:0 1px 2px #d9d0df; }
.favourited {position:absolute; top:0; right:0; background:rgba(255,255,255,0.6); padding:5px 10px; }
.actionWrapper {  display:none; position:absolute; bottom:0; left:0; background:rgba(255,255,255,0.6); padding:5px 10px; }

.paging { clear:both; background: url("/images/inspiration/paging-border.png") no-repeat scroll 0 0 #F5F1F8; border-bottom: 1px solid #EDE7F2; color: #380063; margin: 10px 0 0; padding: 7px 10px; text-align: center; }

.savedArticle-list li { width:369px; float:left; overflow:auto; border-bottom: 1px dotted #C3B2D0; margin:15px 10px 0 0; padding:0 0 10px 0; }

.savedArticle-list li.lastItem { margin:15px 0 0 10px }

.supplierCredits { margin:10px 0 0 0; }

.supplierCredits li { margin:2px; padding:3px; }

JavaScript

(function($) {

    $.extend({
        metadata: {
            defaults: {
                type: 'class',
                name: 'metadata',
                cre: /({.*})/,
                single: 'metadata'
            },
            setType: function(type, name) {
                this.defaults.type = type;
                this.defaults.name = name;
            },
            get: function(elem, opts) {
                var settings = $.extend({}, this.defaults, opts);
                // check for empty string in single property
                if (!settings.single.length) settings.single = 'metadata';

                var data = $.data(elem, settings.single);
                // returned cached data if it already exists
                if (data) return data;

                data = "{}";

                var getData = function(data) {
                    if (typeof data != "string") return data;

                    if (data.indexOf('{') < 0) {
                        data = eval("(" + data + ")");
                    }
                }

                var getObject = function(data) {
                    if (typeof data != "string") return data;

                    data = eval("(" + data + ")");
                    return data;
                }

                if (settings.type == "html5") {
                    var object = {};
                    $(elem.attributes).each(function() {
                        var name = this.nodeName;
                        if (name.match(/^data-/)) name = name.replace(/^data-/, '');
                        else return true;
                        object[name] = getObject(this.nodeValue);
                    });
                } else {
                    if (settings.type == "class") {
                        var m = settings.cre.exec(elem.className);
                        if (m) data = m[1];
                    } else if (settings.type == "elem") {
                        if (!elem.getElementsByTagName) return;
          ...