Intense – the best fullscreen image viewer

Intense images

Do you have some beautiful photographs on your website, and you want to display them full screen? Well, then this is the perfect solution for you!
Intense images is a stand alone javascript library for viewing images on the full, full screen. Using the touchpad/mouse position for panning.

Intense images is a stand alone library (no jquery, or the likes) so usage is pretty straight forward. All styling of image elements is up to the user, Intense.js only handles the creation, styling and management of the image viewer and captions.

Alright, now lets set it up!

HTML

The HTML setup is really easy. The only mandatory attribute is a src, which needs to point to an image file.

<img src="./img/awesome-source.jpg" />

You can also pass through titles, and subcaptions, which will appear at the bottom right of the viewer. To do this, you use the data-title and data-caption attributes.

<img src="./img/awesome-source.jpg" data-title="My beach adventure" data-caption="Thanks Sam, for the great picture”/>

JS

The JS is pretty straight forward as well. Make sure you put the link to the intense.js in your head.

<script src=“js/intense.js"></script>

Intense.js is fairly robust when it comes to assigning elements to be used, its as simple as passing them to the Intense function, once they have been rendered. You can do this with document.querySelector finding your elements however you like.

<img src="./img/awesome-source.jpg" />
<script>
window.onload = function() {
// Intensify all images on the page.
var element = document.querySelector( 'img' );
Intense( element );
}
</script>

Or doing multiple at once, with a classname.

<img src="./img/awesome-source.jpg" class="intense" />
<img src="./img/awesome-source.jpg" class="intense" />

<script>
window.onload = function() {
// Intensify all images with the 'intense' classname.
var elements = document.querySelectorAll( '.intense' );
Intense( elements );
}
</script>

CSS

There aren’t any css restrictions. Although you’ll want to avoid tainting the js files css with anything else (editing the base h1 tag, for instance), unless of course, thats what you want to customize.

If you wish to use the + cursor used in the demo, here’s how to add it to your css:

.your-image-class {
cursor: url('./you-image-directory/plus_cursor.png') 25 25, auto;
}

Browser support

Intense has been tested in the latest stable builds of Safari, Chrome and Firefox. It “should work” in Internet Explorer 9 and up as well.

License

The MIT License (MIT)

Copyright (C) 2014 ~ Tim Holman ~ timothy.w.holman@gmail.com

https://github.com/tholman/intense-images

Leave a Reply

Your email address will not be published. Required fields are marked *