Photo Frame

About six months ago, I wrote a simple jake plugin for galleries on sites. He called it PhotoFrame and posted on the Internet. By clicking on the crossfade, the following photo was shown, a click with a shifter shook back - that's all.

During these months, Photoframe has matured, has acquired a website with a logo and, I think, now you can write about it on Habré.

For the 0.1 version I was inspired by the “galleries” in Artemy Lebedev's travels . And I decided to do something similar, not looking like an alien “flash” on the page. Made. The plugin began to use, send complaints and suggestions. It made me not stop working on the script.
')
In the 0.5 version I decided to leave the simple Lebedev click, and expand the Photoframe in the direction of the bureaucratic galleries (see Orion-art and KM / H ). The experience of the bureau is reflected in all the nuances of the Photoframe's behavior and design.

Appearance

Nothing superfluous to distract from images and their thumbnails:

Control

Switching on a simple click works with zero versions. When hovering, arrows are shown "back and forth" with an expanded area for the cursor. On mobile devices, photos move and rush like a mouse on a computer:

If you click on thumbnails, Photoframe will substitute the next one under the cursor to minimize the movement of the mouse or finger. The tape itself can be moved to the side and watch the next sets of thumbnails.

Physics

Photoframes has realistic physics. With what speed you throw photos and thumbnails, with such they go. Along the edges are stretched virtual gum. For the edge of the tape is moved not only by the mouse (finger), but also at the end of the inertial throw.

Connection

The scenario is as follows: connect fresh jquery.js, two Photoframe files — fotorama.css and fotorama.js, put pictures in a certain block, initiate Photoframe on this block with the $(%block-selector%).fotorama() :

 <script src="jquery-1.7.min.js" type="text/javascript"></script> <link href="fotorama.css" type="text/css" rel="stylesheet"> <script src="fotorama.js" type="text/javascript"></script> <div id="fotorama"> <img src="1.jpg"> <img src="2.jpg"> <img src="3.jpg"> </div> <script type="text/javascript"> $(function() { $('#fotorama').fotorama(); }); </script>

There is also a class .fotorama_auto for automatic conversion of blocks.

Customization

To quickly change the appearance, it is easier not to go into CSS, but to specify new values directly on the initialization - the colors of the background, the arrows and the “active” frame, the size of the thumbnails, the indents between them.

You can remove the thumbnails:

 $('#fotorama').fotorama({thumbsPreview: false});

Disable gestures, turn on vertical mode instead of horizontal, crop unwritten photos, rubber resize, play with the speed of animations, the number of preload photos, etc. - just do not count. See an example with all available options on jsFiddle.

API

A small but proud API consists of 3 components. Kolbek called on the frame change:

 $('#fotorama').({ onShowImg: function(data){ alert('Photo #'+(data.index+1)+' is coming!'); } });

And two events, pulling which, you can manage the Photo Frame with your own functions and, say, make a slideshow (see the real example ):

 var i = 0; i++; $('#fotorama').trigger('showimg', i);

Or fullscreen mode:

 $('#fotorama').trigger('rescale', [$(window).width(), $(window).height()]);

HTML

Any arbitrary HTML can be placed on top of images:

You need to customize styles for embedded blocks yourself, see sample code .

Download and errors

If you specify individual thumbnail files, large photos will be loaded lazily as needed. When thumbnails are not prepared, they are generated automatically, but all photos are immediately loaded for this.

While the photo is not loaded, the preloader is spinning, and the frame around the current thumbnail becomes intermittent:

A broken photo is replaced by a stretched thumbnail:

And if the thumbnails are not there, then so:

Technology

Photoframe does not use a single image in its interface, the sprite of the preloader and the error sign are PNG in data: url. In modern browsers, all animations are made on CSS3 with 3d transformations to enable hardware acceleration in the mobile webcam. Previews are drawn using canvas.

At the same time, everything works fine in antique browsers, even in IE6:

The degradations are: no data: url - we make a preloader out of dot, there is no support for CSS animations - we animate javascript, there is no canvas - we compress the usual picture, there are no shadows - well, okay.

For acceptable performance in handheld devices, various methods are used, such as loading and rendering images in queues by timeout, deleting unnecessary frames from the DOM, caching image attributes to avoid repeated calculations, etc.

<noscript>

If scripts are disabled in the browser, images remain available either in the form of a ribbon of large photos or thumbnails with links to the original images. But it is possible and vice versa - do not show anything with disabled scripts, pointing photos through the data array, see another Fiddle .

Examples of using

Several pages with the Photo Frame:

Tanya Misyutina 's story about the creation of the Tiger Calendar ,
London Ilya Birman and Barcelona Andrei Shitov (it’s not easy to find Photoframe)
Tridiafilma.ru ,
The characters of Denis Talal,
The note “ I and 404 ” on my blog.

If Photoframe was 2 years ago, the main Orion-art would not be without it.

Development and license

Work on the plugin is commited to Github .

No need to ask permission and somehow mention the Photoframe, if you use it for personal non-commercial purposes. Use for corporate and / or commercial purposes should be discussed with me.

No matter what harm the Photoframe does to you, nobody is responsible for it. Fear and risk!