I made insiturizer.js

Background

From the latin phrase In situ… rizer… Insiturizer.js is a script that I wrote to display artwork as if there were photographs of it hanged on a wall.

A screenshot of the insiturizer.js demo

I used to do that on Photoshop with my illustrations before publishing them to Instagram. Now it’s automated. It simulates shadows, perspective and more by dynamically adding randomized CSS to your <img> element and its wrapper. It is triggered on click from any other element of your choosing, for example a button or gallery thumbnails, as you can see in the live demo on my website.

Why you might like it

How to use

In your HTML:

<div id="insitu-wall">
    <div id="insitu-frame">
        <img id="insitu-art" src="my-picture.jpg">
    </div>
</div>

<!-- Your trigger element can be anything -->
<button onclick="inSitu()">Click me!</button>

<!-- A link to the script -->
<script src="js/insiturizer.js"></script>

Here’s an example of stylesheet for the properties that you might want to keep constant, for example layout related ones. The script will not take care of those.

#insitu-wall {
    align-items: center;
    display: flex;
    height: 60vh;
    width: 100%;
}

#insitu-frame {
    height: 75%;
    margin: 0 auto;
}

#insitu-art {
    height: 100%;
}

That’s it for the basic requirements.

If you need Insiturizer for a gallery and haven’t set up anything yet then I got your back! You can add a custom HTML attribute data-insitu-img to your trigger elements eg. your thumbnails and the script will do its thing.

Example:

<div id="insitu-wall">
    <div id="insitu-frame">
        <img id="insitu-art">
    </div>
</div>

<!-- Your trigger elements must provide the path to the image to display -->
<img data-insitu-img="01-fullsize.jpg" src="01-thumbnail.jpg" onclick="inSitu()">
<img data-insitu-img="02-fullsize.jpg" src="02-thumbnail.jpg" onclick="inSitu()">
...

Note: if your #insitu-wall is display: none by default (in case you don’t want to show anything until a thumbnail has been clicked), then clicking an element that has the data-insitu-img attribute will reveal it with display: flex.


โ€” Get insiturizer.js on GitHub

[back]