JSFiddle - React, Tailwind, and code Playground

by Dave Salomon

HTML

<!-- Main Page -->
<div id="main">
<img src="//placehold.it/300x300" />
</div>
<hr/>
<!-- img.html -->
<div id="img">
<img id="image" class="full-image"/>
</div>

CSS

#main {
    background:#eee;
    border:1px solid #000;
}

#img {
    background:#eee;
    border:1px solid #000;
}

JavaScript

// on your main page...
// set the link to be /img.html?src=[source_of_image]
$('#main img').each(function(){
    var src = $(this).attr('src');
    var a = $('<a>');
    a.attr('href','/img.html?src='+src);
    $(this).wrap(a);
});


// on image.html

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var src = getParameterByName('src');
// src would now be the image source. that wont work on jsfiddle - remove the next line:
src = '//placehold.it/300x300';

$('#img #image').attr('src', src);