New on DHTMLGoodies.com:
DHTML Chess is now available for WordPress at WordPressChess.com.
Picture Zoom
Overview
This script is used to enlarge images on your website.
Licensing
This script is licensed under LGPL. Commercial licenses are also available
Download
Files in package:
- js/dg-picture-zoom.js - Main javascript file for the widget
- js/dg-picture-zoom-autoload.js - Javascript file to include when you want to apply zoom effects automatically
- js/external/* - Mootools library used by the script
- css/dg-picture-zoom.css - CSS for the script
- cursors/* - Custom cursor files(.cur files)
Demo
Click on the pictures below
How to configurate
Include Javascript and css
You need to include these files:
<link rel="stylesheet" href="css/dg-picture-zoom.css" type="text/css" />
<script type="text/javascript" src="js/external/mootools-1.2.4-core-yc.js"></script>
<script type="text/javascript" src="js/external/mootools-more.js"></script>
<script type="text/javascript" src="js/dg-picture-zoom.js"></script>
You will probably also want to include dg-picture-zoom-autoload.js:
<script type="text/javascript" src="js/dg-picture-zoom-autoload.js"></script>
When this file is included, the script will take care of everything for you. It will search for all <img> tags on your page assigned to css class="dg-picture-zoom" and add the effect for each one of them.
If you want to add this effect manually, you can do that by following the procedures decribed below
Your <img> tags
You define path to large version of the image by adding "url" as search parameter in the image source.
Example:
<img src="images/image1.jpg?url=images/image1_big.jpg" class="dg-picture-zoom">
As you can see from this example, the url to a large version of image1.jpg is images/image1_big.jpg
Your <img> tags should also be assigned to the css class dg-picture-zoom as in this example
Add pictures manually
If you chose not to include dg-picture-zoom-autoload.js, you can create the zoom effect manually by creating an DG.PictureZoom object and using the addPicture method.
Example:
var dgPictureZoom = new DG.PictureZoom(); dgPictureZoom.addPicture('picture1'); dgPictureZoom.addPicture('picture2');
Where picture1 and picture2 could be references to images like this:
<img src="images/image1.jpg?url=images/image1_big.jpg" class="dg-picture-zoom" id="picture1">
<img src="images/image2.jpg?url=images/image2_big.jpg" class="dg-picture-zoom" id="picture2">
The complete code for the demo above:
<img src="/scripts/picture-zoom/images/image1.jpg?url=/scripts/picture-zoom/images/image1_big.jpg" class="dg-picture-zoom">
<img src="/scripts/picture-zoom/images/image2.jpg?url=/scripts/picture-zoom/images/image2_big.jpg" class="dg-picture-zoom">
<link rel="stylesheet" href="/scripts/picture-zoom/css/dg-picture-zoom.css" type="text/css" />
<script src="/scripts/picture-zoom/js/external/mootools-1.2.4-core-yc.js"></script>
<script src="/scripts/picture-zoom/js/external/mootools-more.js"></script>
<script src="/scripts/picture-zoom/js/dg-picture-zoom.js"></script>
<script src="/scripts/picture-zoom/js/dg-picture-zoom-autoload.js"></script>
Border around large picture
By default, the script displays a border around the zoomed out pictures. To turn it of, send border : false when you create the DG.PictureZoom object, example:
var dgPictureZoom = new DG.PictureZoom({
border : false
});
The appearance of the border can be modified from dg-picture-zoom.css in.
No one has commented this - be first!
Post your comment
Comment preview: