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.
Tkx a lot of u work, i'll try to applied on to my practices.
God Bless You !
Can I do it individually on my image tags or do i do it in my css? Sorry I am so confused!!!
THANK YOU!!
I am trying to use the code, but i am unable to zoom the pictures. Do you perhpas know what's wrong.
Thanks
Hi there,
What is the reason that your sample pop images entail a shadow and my doesn't despite the CSS files already denotes it:
.dg-picture-zoom-border-container{
border : 1px solid #FFFFFF;
background-color: #000000;
margin-left:-2px;
margin-top:-2px;
padding:2px;
box-shadow:10px 10px 20px #000000;
border-radius: 5px;
Hi Matthew,
It could be that you're viewing the page in Internet Explore, and doesn't have a doctype defined at the top of your html file.
Shadows and border radius are relatively new css properties. Old Ie browsers doesn't support it. If you don't have a doctype, ie will think that the page is old and will try to render the page as it would have looked in an older browser, also called quirks mode.
Try adding one of the following doctypes at line 1 of your page:
Or
More info can be found at http://www.w3.org/QA/2002/04/valid-dtd-list.html
Alf
Dhtmlgoodies.com
Post your comment
Comment preview: