jQuery Thumbs

A jQuery plugin to easily create thumbnails

jQuery Thumbs

Fork me on GitHub

Overview

jQuery Thumbs dynamically wrap images and links with a span. You can specify a default size (width and height) inside the css file. And optionally it can automatically center the image inside the "frame".

This plugin was developed using jQuery, unobstrusive Javascript, and CSS by Joan Piedra.


Code

CSS and JS calls

<link rel="stylesheet" type="text/css" href="jquery.thumbs.css" />

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.thumbs.js"></script> <script type="text/javascript">
$(document).ready(function() {
$(".thumb").thumbs();
});
</script>

HTML

<img src="clouds.jpg" class="thumb" alt="Clouds from New Mexico" width="500" height="332" />

Demo

Large image with hyperlink

Clouds from New Mexico

Large image without hyperlink

Exact image without hyperlink


Support

This script has been tested with the following browsers.


MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so.