🌜
🌞
@tholman/intense-images

@tholman/intense-images

v1.0.7

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

npm install @tholman/intense-images

README

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.

License

The MIT License (MIT)

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

Release Notes

1.0.7
By Tim Holman • Published on October 10, 2017
  • small bug fixes
  • interaction direction swapped for mobile

General

License
MIT
Typescript Types
None found
Tree-shakeable
No

Popularity

GitHub Stargazers
2,552
Community Interest
2,895
Number of Forks
284

Maintenance

Commits
10/219/2201
Last Commit
Jan 13, 2020
Open Issues
7
Closed Issues
38
Open Pull Requests
3
Closed Pull Requests
11

Versions

Versions Released
10/219/2201
Latest Version Released
Oct 10, 2017
Current Tags
latest1.0.7

Dependencies

Dependencies (0)
Dev Dependencies (0)

Contributors

tholman
tholman
Commits: 87
MelchnerRoman
MelchnerRoman
Commits: 6
panstav
panstav
Commits: 3
yachaka
yachaka
Commits: 2
jared-stilwell
jared-stilwell
Commits: 2
electerious
electerious
Commits: 1
richardj
richardj
Commits: 1
sparanoid
sparanoid
Commits: 1
Grafikart
Grafikart
Commits: 1
brycedorn
brycedorn
Commits: 1
hughker
hughker
Commits: 1
myconcretelab
myconcretelab
Commits: 1
jackrugile
jackrugile
Commits: 1