Discover 4 pictures rising after beeing clicked. Full pictures are movable. Use 'Esc' to close all opened.
Damn small and easy program for nice sliding enlarging images. 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 3.5 kB in size (gzipped 1.4 kB)! Last updated on 19th August 2009.
Include the stylesheet, jquery-library and the plugin into the head.
<link rel="stylesheet" type="text/css" href="jquery-foxislide-0.1.css" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-foxislide-0.1.min.js"></script>
Inside the body you can organize the thumbnail pictures with each link on the original picture.
If you use the 'title' attribute and set the option title to true, this will be shown in the image container.
<div id="pics">
<a href="images/image1.jpg" title="first picture">
<img src="images/thumb_image1.jpg" alt="first picture" width="72" height="72" /></a>
<a href="images/image2.jpg">
<img src="images/thumb_image2.jpg" alt="second picture" width="72" height="72" /></a>
</div><!-- /#pics -->
Now you link the main function to your pictures inside the head or body.
<script type="text/javascript">
$(document).ready(function(){
$('#pics a').foxislide();
});
</script>
So when the document is fully loaded then use the program on every link inside the div 'pics' ...
Another possibility would be ...
$('a#first, a#second').foxislide();
// 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!
| property | default | description |
|---|---|---|
| speed | 'normal' | The speed for animation effects. Values are 'slow', 'normal', 'fast' and milliseconds. |
| title | true | If true, the link title is shown in the image container. Allowed is true or false. | callback | You can combine this plugin with other functions. |
foxislide 0.1 full
jquery-foxislide-0.1.js, jquery-foxislide-0.1.css, foxislide-loading.gif, license-gpl-3.0.txt
foxislide 0.1 minified
jquery-foxislide-0.1.min.js, jquery-foxislide-0.1.css, foxislide-loading.gif, license-gpl-3.0.txt
package of foxislide 0.1 full, minified and this documentation
jquery-foxislide-0.1.js, jquery-foxislide-0.1.min.js, jquery-1.3.2.min.js, jquery-foxislide-0.1.css, foxislide-loading.gif, images, documentation.html, license-gpl-3.0.txt
The latest version of jquery you will get on jquery.com.
Check out my other small and easy programs!
foxibox
Nice image gallery. Very easy to use.
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.