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.
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.
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"/>
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>
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;
}
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 has been tested in the latest stable builds of Safari, Chrome and Firefox. It "should work" in Internet Explorer 9 and up as well.
The MIT License (MIT)
Copyright (C) 2016 ~ Tim Holman ~ [email protected]
intense-images's People
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.