Jun, 2015

Add Reflection To Images With Reflection.js

Today we’re going to be adding reflections to images via the jQuery library plugin known as Reflection.js.

Reflection.js for jQuery is a neat little library enabling you to easily add reflections to any image you could want in the easiest way possible. Reflection.js used to be a standalone library but has since been updated to a proper jQuery plugin to make usage even simpler and easier. You can find the library here, on the creator’s website.

Reflection Demo (more…)

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

Swipe – the best image slider for mobile devices

Swipe is a lightweight and easy to use slider. It is perfect for mobile use, since it is very lightweight and it doesn’t take long to load.
On a mobile device, you can navigate through the slider with your fingers: just swipe trough the slides! it is also very easy to use, and you can adjust it to your own needs!

Screenshot of the image slider

Now we are going to show you how to set it up!

First you need to link the jQuery and the “swipe.js” file:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script src="swipe.js"></script>

The HTML setup is really simple:

<div id=‘mySwipe' class='swipe'>
<div class='swipe-wrap'>
<div></div>
<div></div>
<div></div>
</div>
</div>

above is the initially required structure. it is a very of elements, wrapped in two containers. You can place any content you want within the items.

Also add this basic CSS to your stylesheet:

.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap &gt; div {
float:left;
width:100%;
position: relative;
}

After this, we start with the javascript. (don’t worry, its not difficult at all!)

Just ad the following:

<script>
var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {
startSlide: 0, //index position Swipe should start at
speed : 400, //speed of prev and next transitions in milliseconds.
auto: 3000, //begin with auto slideshow (time in milliseconds between slides)
continuous: true, //create an infinite feel with no endpoints
disableScroll: true, //stop any touches on this container from scrolling the page
stopPropagation: true, //stop event propagation
callback: function(index, element) {}, //runs at slide change.
transitionEnd: function(index, element) {} //runs at the end slide transition.
});
</script

You can change these parameters any way you like, so you can completely customize it however you want!

Swipe API
There are a few functions within Swipe, witch you can use for script control of your slider.

prev() slide to prev

next() slide to next

getPos() returns current slide index position

getNumSlides() returns the total amount of slides

slide(index, duration) slide to set index position (duration: speed of transition in milliseconds)

Browser support
Swipe is now compatible with all browsers, including IE7+. Swipe works best on devices that support CSS transforms and touch, but can be used without these as well. A few helper methods determine touch and CSS transition support and choose the proper animation methods accordingly.

License
Copyright (c) 2013 Brad Birdsall Licensed under the The MIT License (MIT).

https://github.com/thebird/Swipe

Average color of an image with psColor.js

psColor.js – get the average color of an image

When you want to know the average color of an image, for example when you want to set the backgroundcolor of your website to the average color of an image showing in front of it, you can use psColor.js.
This is a little framework which does all the work for you.
How can I implement this framework?
– Download psColor.js or psColor.min.js. Place it in your <head> like this: <script src='psColor.js'></script>.
– Call ps.color.getImageAverageColor(imageElement) where imageElement is an <img> that has completed loading, and is on the same domain as the web page.
– ps.color.getImageAverageColor will return an object with three methods that will give you the average color in rgb, rgba, and hex:
toStringRgb (e.g. 255,128,0)
toStringRgba (e.g. 255,128,0,0.5)
toStringHex (e.g. FF8000)

Example of average color in an image
(more…)