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!


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”/>


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" />
window.onload = function() {
// Intensify all images on the page.
var element = document.querySelector( 'img' );
Intense( element );

Or doing multiple at once, with a classname.

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

window.onload = function() {
// Intensify all images with the 'intense' classname.
var elements = document.querySelectorAll( '.intense' );
Intense( elements );


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.


The MIT License (MIT)

Copyright (C) 2014 ~ Tim Holman ~ timothy.w.holman@gmail.com


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'>

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 {
position: relative;

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

Just ad the following:

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.

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.

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


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

Curtain.js makes your website scroll like a curtain

How to implement curtain.js to your website

Curtain.js is a little javascript frameworkt, which lets your pages go up when you scroll, just like a curtain.
With curtain.js, your website looks more professional, but using curtain.js is easy.
So… why shouldn’t you use it?
For an example, visit www.the.gs/fresh/curtain/example

To use this tutorial, you need to download the curtain.js: www.github.com/yckart/Curtain.js

You also need an HTML and css document.

In your HTML document, every page has to have the class ‘page’.
If you give every page this class, the framework will recognise these as pages, so the framework knows when to make your curtain page scroll!
This is an example:

<div class="page">
        <p> This is a page </p>

Also, you have to style this class.

This is an example to style “.page”

.page {
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            min-height: 100%;
            background: #fdfdfd url(http://lab.yckart.corvus.uberspace.de/img/248) repeat fixed;
            border-bottom: thin solid lightgray;
            box-shadow: 0 10px 10px -10px lightgray;

At the end of the body, you have to call the javascript framework. You’d better call frameworks at the end of your code. This makes sure the page wil load this function only when your page is fully loaded into the browser.
Here is an example to do that. Make sure you have got the curtain.js in the right map.

<script src="curtain.js"></script>

        var pages = document.querySelectorAll('.page');
        if ( !('ontouchstart' in window) ) Curtain(pages);

If you did everything the right way, it should work!

For more information about curtain.js, you can visit https://github.com/Victa/curtain.js/. Here you can find everything you want to know about this framework.

Hello world!

Welcome to Tutorial Code.
We’re going to be sharing some interesting little tutorials on web based programming and designing in the next couple of months. If you keep an eye on our blog, you might just learn something new.

First tutorial in PHP, the classic “Hello World”:

	function welcome()
 		echo "Hello World!";