본문
jQuery Thumbs
A JQuery plugin to easily create thumbnails
Overview
jThumb dynamically wraps images and/or link images with a div. You can add them an specific size (width and height) inside the css file. And optionally it can automatically center the image inside the frame.
jThumb was developed using jQuery, obstrusive Javascript, and CSS by Joan Piedra.
Code
CSS and JS calls
<link rel="stylesheet" type="text/css" href="jthumb.css" media="screen" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jthumb.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a.thumb, img.thumb").jThumb(); // the wrapping function
$("a.thumb img, img.thumb").jThumbImg(); // the img positioning function (optional)
});
</script>HTML / XHTML
<img src="clouds.jpg" class="thumb" alt="Beautiful clouds from New Mexico" width="500" height="332" />IE 6 support.
To get 32bit PNG support in IE6 you could add an ActiveX filter inside IE conditionals. Please remember you should always specify an exact url, relative urls are not well supported.
Example. http://joanpiedra.com/images/search.png
<!--[if IE 6]>
<style type="text/css">
.thumb-zoom { background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='search.png', sizingMethod='scale'); }
</style>
<![endif]-->Also you could remplaced the png with a transparent gif.
<!--[if IE 6]>
<style type="text/css">
.thumb-zoom { background-image:url(search.gif); }
</style>
<![endif]-->Demo
EnableDisable
Large image with hyperlink
Large image without hyperlink
Exact image without hyperlink
Support
This script has been tested with the following browsers.
- Firefox 2.0
- IE 7
- IE 6
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.
관련링크
- http://joanpiedra.com/jquery/thumbs/ 1015회 연결
댓글목록
등록된 댓글이 없습니다.