foxibox 0.2

Demo

first picture

Discover 4 pictures in a gallery and the yellow ones solo.

Control the gallery with right and left arrow keys, 'p' and 'n' for previous or next image and 'Esc' or 'c' to close.

Share/Save/Bookmark

Description

Damn small and easy program for a nice image gallery. It is designed to be easily integrated and just working fine.

This program is under GNU General Public License v3. It was developed with jquery 1.3.2 but works from 1.2.5.

Actually the minified program is only 5.4 kB in size (gzipped 1.9 kB)! Last updated on 30th September 2009.

Update

From 0.1 to 0.2 I fixed a small bug and correct the keydown function.

Using

Include the stylesheet into the head.

<link rel="stylesheet" type="text/css" href="jquery-foxibox-0.2.css" />

Include the jquery-library and the plugin at the end of the body or into the head.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-foxibox-0.2.min.js"></script>

Inside the body you can organize the thumbnail pictures with each link on the original picture.

If you use the attribute 'rel' with a number or name in brackets, all pictures with the same number or name will be in one set.

If you use the 'title' attribute and set the option title to true, this will be shown in the image container.

<a href="images/image1.jpg" rel="[gall1]" title="first picture">
<img src="images/thumb_image1.jpg" alt="first picture" width="72" height="72" /></a>

<a href="images/image2.jpg" rel="[gall1]">
<img src="images/thumb_image2.jpg" alt="" width="72" height="72" /></a>

Now you link the main function to your gallery inside the head or body.

<script type="text/javascript">
$(document).ready(function(){
  $('a[rel]').foxibox();
});
</script>

So when the document is fully loaded then use the program on every link wich has the attribute rel ...

Another possibility would be ...

$('a#first, a#second').foxibox();

// in the body
<a href="images/image1.jpg" title="first picture" id="first">
<img src="images/thumb_image1.jpg" alt="first picture" width="72" height="72" /></a>

<a href="images/image2.jpg" title="second picture" id="second">
<img src="images/thumb_image2.jpg" alt="second picture" width="72" height="72" /></a>

Please be sure to start the main function only once!

Properties

property default description
speed 'normal' The speed for animation effects. Values are 'slow', 'normal', 'fast' and milliseconds.
overlayOpacity 0.5 The opacity value of the overlay. Allowed are values from 0 to 1.
title true If true, the link title is shown in the image container. Allowed is true or false.
scale true If true, the image will be fit to the screen when it's too big. Allowed is true or false.
border 10 Sets the border-width in pixels. From 0 to endless.
textImage '' When you have an image-set, this sets the text of the word 'Image' like 'Image 1 of 10'.
textOf '/' When you have an image-set, this sets the text of the word 'of' like 'Image 1 of 10'.
callback   You can combine this plugin with other functions.

Download

If you use my program please be so fair to !

foxibox 0.2 full
jquery-foxibox-0.2.js, jquery-foxibox-0.2.css, foxibox-loading.gif, foxibox-arrows.gif, license-gpl-3.0.txt

foxibox 0.2 minified
jquery-foxibox-0.2.min.js, jquery-foxibox-0.2.css, foxibox-loading.gif, foxibox-arrows.gif, license-gpl-3.0.txt

package of foxibox 0.2 full, minified and this documentation
jquery-foxibox-0.2.js, jquery-foxibox-0.2.min.js, jquery-1.3.2.min.js, jquery-foxibox-0.2.css, foxibox-loading.gif, foxibox-arrows.gif, images, documentation.html, license-gpl-3.0.txt

The latest version of jquery you will get on jquery.com.

Don't miss

Check out my other small and easy programs!

foxislide
Nice image rising effect. Very easy to use.

foxiswitch
Fantastic image gallery with thumbnails and controls.

foxitip
Nice tooltips on links staying inside the window. You can even use different styles on one site. So easy to use.

foxiblob
Lavalamp effect on menus. You can even use different styles on one site. So easy to use.

foxiballoon
Objects following your vertical scrolling like a balloon. Very easy to use.

foxicols
Equal height columns made easy.