A simple library to view large images up close using simple mouse interaction, and the full screen.

Overview

Intense Images

A stand alone javascript library for viewing images on the full, full screen. Using the touch/mouse position for panning. Here's a demo! You can also play with the code live on CodePen.

Instructions

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.

HTML

There aren't many restrictions for the html elements you want to use to activate the Intense image viewer, the one mandatory attribute is either a src, data-image or a href, which needs to point to an image file. You can use data-image if you want to load in a different version of the image to the original source (higher resolution, for example).

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

<!-- OR -->

<div class="anything" data-image="./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

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>

If you want, you can invert the direction of the interactions

<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, {invertInteractionDirection: true});
}
</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, you can find the image in the demo folder, here's the css snippet.

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

Image/Example

Here's a quick screenshot of Intense.js in action. You should really look at the demo though, to get a full feel for the interactions.

Intense.js in action

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.

Other frameworks

If you're using React, check out react-intense!

License

The MIT License (MIT)

Copyright (C) 2016 ~ Tim Holman ~ [email protected]

Comments
  • Git tags for intense-images repo

    Git tags for intense-images repo

    Hey @tholman,

    I'd like to host your library, intense-images on cdnjs — It is one of the most famous free and public web front-end CDN services which is used by ~1,143,000 websites worldwide.

    The git auto-updater for cdnjs relies on GitHub releases to recognize a release version and automatically update the library in the cdnjs repo.

    If it's not too much to ask, can you please add release tags for this repo, say 1.0.0?

    cdnjs/cdnjs#11266

    opened by dakshshah96 7
  • Error after exiting an Intensed image

    Error after exiting an Intensed image

    Hi,

    Thank's for Intense !

    I got an right after I close an image, the image is well closed but when a tried to click an other one, i got this error :

    intense.js:1 Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

    I use this js code to Intense my images : var elements = document.querySelectorAll( '.item' ); Intense( elements );

    and here is my html (i am using angular) :

    <div ng-repeat="galery in galerys">
       <h1 class="galeryTitle" ng-click="checked = ! checked">{{galery.gal_title}}</h1>
       <div ng-show="checked" class="owl-carousel owl-theme">
            <img on-finish-render="finish" ng-repeat="img in galery.imgs" class="item" data-title="{{img.title}}" data-caption="{{img.comment}}" ng-src="{{img.path}}"/>
       </div>
    </div>
    
    opened by nbouliol 7
  • Dbl click bug fix (& loading class for image block), IE9 support (2d tra...

    Dbl click bug fix (& loading class for image block), IE9 support (2d tra...

    Hi, there!

    I've found some bugs and fixed them.

    1. If you click twice while image is loading it will cause two figure blocks appearing. I've added "loading" class to image block, it can be also used for adding loading spinner.
    2. IE9 doesn't support 3d transitions, I've added test for 3d transitions and in case browser doesn't support it it will use 2d transitions instead. There is another story with mouse cursors, but my solution uses separate css file and I didn't add it for pull request.

    PS: I'm novice with Forks & Pull Request, if I've done it wrong please tell me.

    opened by vedmant 6
  • Added a candidate package.json

    Added a candidate package.json

    Based on our chat recently, it is obvious that you want to skip the spinning rims on the build system and keep things simple, and I agree :)

    This commit includes a simple package.json which allows you to push the project to npm so others can easily include it. It doesn't handle asset building at all, since it is generally up to the consumer of front-end modules to sort out their packaging and minification needs.

    opened by jared-stilwell 5
  • A better way to remove viewer

    A better way to remove viewer

    I found that when the user clicks on 2 photos quickly intense-images get kind crazy losing the "open or closed" state. I was able to reproduce the error even in the demo. ss

    sa

    maybe do a try catch?

    opened by thomasgroch 4
  • First horizontal image not loading properly

    First horizontal image not loading properly

    I'm not sure why, but the first image shows up black. It's very odd because the image itself is fine, it just doesn't load correctly on the page. screen shot 2016-06-09 at 7 17 13 pm I'm not sure how this could be fixed or if there's even anything to fix. It's possible it's just my computer being old.

    opened by TJScalzo 4
  • Image alternately shows and disappears.

    Image alternately shows and disappears.

    I modified the demo page and used it as a quick way to display 3 large panorama images at http://korfhage.org/grandcanyon/. It works perfectly fine on Chrome 35.0.1916.153 m on my computer running Windows 8.1, but on my wife's computer, using the same version of Chrome but running Windows 7, the image alternately shows and disappears as she moves the mouse. As she move the cursor right or left, the image scrolls, then it disappears, showing the white background. If she keeps moving the mouse, the image reappears, scrolling again, and then disappears, repeating across the width of the window. It is like there are alternating bands of visibility and invisibility.

    wontfix 
    opened by wkorfhage 4
  • load a different version of the image

    load a different version of the image

    This is not really an issue, but a question:

    I'm trying to edit a wordpress theme were this script is used (http://clapat.ro/themes/soho-wordpress/soho_portfolio/sexy-woman/). I would like to load a bigger image while intense zoom is activated.

    How could I get this result?

    I figured i could use 2 different images: 1 normal (for example: image-one.png) and one bigger one (= same image but bigger) (for example: image-one-tag.png).

    Is it possible to ad something to the code, to add something (-tag) to the image source so the bigger image is shown instead of the original one while 'zooming'?

    I'm not really used to using scripts so i'm not really sure how to handle this...

    Thank you in advance,

    Jonas

    opened by jova313 3
  • Scrolling bars

    Scrolling bars

    Lets say I got an image somewhere in the middle of a long page. If I intensify it, it covers the window as expected. But then when I use the mouse scroller, the whole page behind gets scrolled. Is there a way to make the mouse scroller move the intensified image up and down instead?

    opened by BrunoVandekerkhove 3
  • provide default plus_cursor to passed-in elements

    provide default plus_cursor to passed-in elements

    This patch embeds the plus_cursor.png image from Intense Images' demo folder into Intense Images itself. This is similar to how Intense Images already embeds a default close_cursor.png image in the viewer.

    A user can override this default cursor by specifying !important in CSS:

    img {
     cursor: crosshair !important
    }
    

    Similar to how a user can also override the default close cursor in CSS:

    figure > img {
     cursor: crosshair !important
    }
    
    opened by sunaku 3
  • Adding Bower and NPM config, ready to be published in the registry.

    Adding Bower and NPM config, ready to be published in the registry.

    Hey,

    I had some time on my hand so i made the repo ready to be published on NPM and Bower, also added gulp to build the files in a dist file, and some other stuff.

    Feel free to merge after checking.

    Regards Sadi.

    opened by sadiqevani 2
  • Zooming the fullscreen image

    Zooming the fullscreen image

    Hi

    Great little script. Thanks!

    Is there any way we can zoom into the image that is opened up fullscreen?

    It would be great if this could work with pinch zoom on mobile too.

    Any thoughts on this?

    Thanks!

    opened by michaelpumo 0
  • Position of images when zoomed

    Position of images when zoomed

    Hi @tholman thanks very much for developing Intense Images; it's really great and fits my needs almost perfectly.

    An issue I'm having though is that on clicking the image to zoom it loads the image at the vertical centre of the image (on a vertical image).

    I'm using the library to zoom into screenshots of entire websites that I have placed on a page (on desktop only) and want the image to load at the top on click so that the user can scroll down from the top through the image.

    So basically I'm trying to set the initial position of a vertical image to be the top of the image when opened full screen..

    I've tried playing around with the code but can't figure out how to accomplish this, although it seems like it could be an easy fix. Is this a feature you would consider adding? Or is there an easy fix I'm missing?

    Cheers! 🍻

    opened by adamelnaggar 1
  • Using with responsive images

    Using with responsive images

    Hey @tholman, this is a great library, thank you! I'm using responsive images in my app so far (using srcset & picture) and wondering how does intense-images play with that paradigm?

    To clarify, it would entail adding srcset and sizes attribute to the img tag so that appropriate images are loaded on mobile vs web.

    Thank you!

    opened by oyeanuj 3
  • imageproperties

    imageproperties

    Hi there,

    It would be really cool if you could target some sort of API to get the imageProperties (and other properties as well which make sense) when you call the Intense function to manipulate with the cursor and width. I had a problem with the width in IE 10 + on a larger screen (1400p). I solved the problem by setting the width: 100% instead of the size calculation of the image in the script. But i will face the issue again when updating the bower component.

    opened by peteykrogh 2
Releases(1.0.7)
Owner
Tim Holman
Tinkerer, tuner & tamperer.
Tim Holman
📡Usagi-http-interaction: A library for interacting with Http Interaction API

?? - A library for interacting with Http Interaction API (API for receiving interactions.)

Rabbit House Corp 3 Oct 24, 2022
a JavaScript library that allows you to make a mouse interaction animation easily.

Cotton.JS is a JavaScript library that allows you to make a mouse interaction animation easily. Getting Started Download npm install cottonjs Manual

Wilson Wu 19 Aug 26, 2022
A Deno library for interacting with the mouse 🖱️ keyboard ⌨️ and screen 💻

A Deno library for interacting with the mouse ??️ keyboard ⌨️ and screen ?? . Litebot provides a simple API for creating kbm events, macros, & working with displays. Litebot leverages Deno's FFI to allow speedy low level control in C & C++ while having a typescript API exposed to the user.

Tyler Laceby 10 Aug 30, 2022
A powerful data visualization 2D/3D large-screen editor tool with low-code.

tp-editor(2D/3D)中文说明 A topology 2D/3D editor with nodejs, express, socket.io es6, HT for Web and vite. It's a powerful large-screen data visualization

Flying Li 9 Aug 13, 2022
A full screen slide show for images and videos

Vanilla JS Slide full screen slide show for videos and images Why? This is a scratch-your-own-itch project as I wanted a way to see images and videos

Christian Heilmann 24 Oct 26, 2022
Make the content slide prettily across the screen with variable sizes of scrolling items, in any of four directions, pausing while the mouse is over the marquee, and all with vanilla JavaScript.

TEG Marquee Make the content slide prettily across the screen with variable sizes of scrolling items, in any of four directions, pausing while the mou

Paul B. Joiner 0 Dec 30, 2021
The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with the HTML5 Canvas element much easier.

EaselJS EaselJS is a library for building high-performance interactive 2D content in HTML5. It provides a feature-rich display list to allow you to ma

CreateJS 8k Nov 19, 2022
High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.

lazysizes lazysizes is a fast (jank-free), SEO-friendly and self-initializing lazyloader for images (including responsive images picture/srcset), ifra

Alexander Farkas 16.6k Nov 28, 2022
The aim is to provide a hassle-free way to use the data to build applications to show close-to-realtime power-outage info in Mauritius

Mauritius Dataset for Electricity Dataset View Dataset The aim is to provide a hassle-free way to use the data to build applications. Example applicat

Sandeep Ramgolam 5 Oct 31, 2022
A web app which help you to save you a list of your favorite books, they will be saved on your local storage to never loose them even if you close the page. Built wiht JavaScript

Awesome Books In this project I build a page to save a list of your favorites books, you can add new books, delete it and they will be saved in the lo

Williams Colmenares 8 Aug 27, 2022
ProseMirror's open/close details list component

ProseMirror details module This module defines an open/closeable details element that works with rich text editor based on ProseMirror. Documentation

Hirotaka Miyagi 5 Oct 26, 2022
As babies smash on the keyboard, images, letters and numbers appear on the screen

Baby Bam Bam As babies smash on the keyboard, images, letters and numbers appear on the screen. Try the many options and find the ones that are right

Boris Fritscher 3 Oct 24, 2022
StarkNet support extension for VSCode. Visualize StarkNet contracts: view storage variables, external and view functions, and events.

StarkNet Explorer extension This VSCode extension quickly shows relevant aspects of StarkNet contracts: Storage variables of the current contract, and

Crytic 6 Nov 4, 2022
A plugin for Strapi CMS that adds a preview button and live view button to the content manager edit view.

Strapi Preview Button A plugin for Strapi CMS that adds a preview button and live view button to the content manager edit view. Get Started Features I

Matt Milburn 48 Nov 17, 2022
Boost is a Microsoft Excel Add-in to help developers import large excel workbooks into their database using SQL queries

Microsoft Excel Add-in for Developers About Us Boost is a Microsoft Excel Add-in to help developers import large excel workbooks into their database u

OSLabs Beta 30 Sep 30, 2022
A powerful javascript library to create amazing and smooth effects for the mouse cursor on your website.

Cuberto Mouse Follower A powerful javascript library to create amazing and smooth effects for the mouse cursor on your website. Dependencies GSAP v3 (

Cuberto 379 Nov 25, 2022
🖼 A jQuery plugin to view images just like in Windows. Browser support IE7+!

⚠️ Attention! This repository will be maintained just in small iteration. The plugin is easy to use, but its customization can be troublesome. To impr

Zongbin 191 Oct 8, 2022
🌀 A JS plugin to view images just like in Windows.

PhotoViewer PhotoViewer is a JS plugin to view images just like in windows. [Examples] If you want to support IE8, please goto Magnify. Features Vanil

Zongbin 274 Nov 28, 2022
A JavaScript library for adding ripple effects to HTML elements based on mouse events.

About project Ripplejs is an open source javascript library created for the purpose of adding ripple effects to html elements based on mouse events. L

Udezue Oluomachi Chimaobi 7 May 10, 2022