Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tholman/intense-images
A simple library to view large images up close using simple mouse interaction, and the full screen.
https://github.com/tholman/intense-images
javascript modal ui
Last synced: 2 days ago
JSON representation
A simple library to view large images up close using simple mouse interaction, and the full screen.
- Host: GitHub
- URL: https://github.com/tholman/intense-images
- Owner: tholman
- Created: 2014-06-20T20:05:07.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2021-08-29T15:17:54.000Z (over 3 years ago)
- Last Synced: 2025-01-03T04:03:39.578Z (9 days ago)
- Topics: javascript, modal, ui
- Language: JavaScript
- Homepage: http://tholman.com/intense-images
- Size: 39.9 MB
- Stars: 2,579
- Watchers: 69
- Forks: 277
- Open Issues: 10
-
Metadata Files:
- Readme: readme.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
- awesome-images - Intense Images
- my-awesome-list - intense-images
- awesome-client-side - Intense Images - A simple library to view large images up close using simple mouse interaction, and the full screen - [Try it!](http://tholman.com/intense-images) - A website for self coding generative art tutorials - [Try it!](https://generativeartistry.com/) (Multimedia / Image)
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](http://tholman.com/intense-images)! You can also play with the code [live on CodePen](http://codepen.io/tholman/pen/mlDiK).
### 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).
```html
```
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.
```html
```
#### 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.
```html
window.onload = function() {
// Intensify all images on the page.
var element = document.querySelector( 'img' );
Intense( element );
}
```
Or doing multiple at once, with a classname.
```html
window.onload = function() {
// Intensify all images with the 'intense' classname.
var elements = document.querySelectorAll( '.intense' );
Intense( elements );
}
```
If you want, you can invert the direction of the interactions
```html
window.onload = function() {
// Intensify all images with the 'intense' classname.
var elements = document.querySelectorAll( '.intense' );
Intense( elements, {invertInteractionDirection: true});
}
```
#### 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.
```css
.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](http://tholman.com/intense-images) though, to get a full feel for the interactions.
### 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](https://github.com/brycedorn/react-intense)!
### License
The MIT License (MIT)
Copyright (C) 2016 ~ [Tim Holman](http://tholman.com) ~ [email protected]