I was looking for a good way to make a cool mouseover zoom effect for images on a website. CloudZoom came up and looked nice, but didn’t suit my needs. I stumbled upon the jqzoom library from http://www.mind-projects.it/projects/jqzoom/ You can donate Marco something and download the jqzoom library. The jQuery plugin is 733 lines of code (including the comments) and worked great. It was easy to use, here is my HTML and JavaScript: <script src="js/jquery.jqzoom-core.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#holder li a.jq-zoom').jqzoom({
zoomType: 'innerzoom',
lens: false,
preloadImages: false,
alwaysOn: false,
zoomWidth: 150,
zoomHeight: 150,
xOffset:0,
yOffset: 0,
title: false
});
});
</script>
<ul id="holder">
<li><a class="jq-zoom" href="uri-to-big-img.jpg">
<img src="uri-to-small-img.jpg"/></a></li>
<li><a class="jq-zoom" href="uri-to-big-img.jpg">
<img src="uri-to-small-img.jpg"/></a></li>
<li><a class="jq-zoom" href="uri-to-big-img.jpg">
<img src="uri-to-small-img.jpg"/></a></li>
<li><a class="jq-zoom" href="uri-to-big-img.jpg">
<img src="uri-to-small-img.jpg"/></a></li>
<!-- etc. used css for making a grid style -->
</ul>
This works, but I used the innerzoom option and had an annoying 1 pixel border around the images when I hovered over them. So it took me some time to figure out that it was a problem in the plugin and not my CSS or the way I used it.
On line 548 I found the innerzoom option and changed the border width to be static 0 pixels (no border):
if (settings.zoomType == 'innerzoom') {
this.node.css({
cursor: 'default'
});
var thickness = (smallimage.bleft == 0) ? 1 : smallimage.bleft;
$('.zoomWrapper', this.node).css({
/*borderWidth: thickness + 'px'*/
borderWidth: '0px'
});
}
$('.zoomWrapper', this.node).css({
width: Math.round(settings.zoomWidth) + 'px' ,
/*borderWidth: thickness + 'px'*/
borderWidth: '0px'
});
I found out that my zoomwrapper still got the border by viewing the website with the famous firebug extension for FireFox. But with this small change in the 733 lines of JavaScript you can manually disable the border of the inner zoom option.
Good luck!
Years ago, everybody made a column layout with an Html table. If you do not remember why tables are bad, I recommend reading these nine reasons not to use tables. Today we use (external) cascading style sheets to solve it. Most of the time with the famous ‘faux columns’ trick.
<div id="left">
leftside
</div>
<div id="right">
<div>block one</div>
<div>block two</div>
<div>block three</div>
</div>
More...
There is a nice jQuery plugin called imgpreview.
It’s from James Padolsey. He made it back in 2009 and you can read more about it on this page:
http://james.padolsey.com/javascript/new-jquery-plugin-imgpreview/
This is the demo page: http://james.padolsey.com/demos/imgPreview/full/
It’s really easy to use. Your HTML should look like:
<a href="http://www.google.com/intl/nl/images/logos/chrome_logo.gif">text</a>
More...
I have recently stumbled upon an article about address resolving with Pro6PP from a Dutch ecommerce magazine: The Pro6PP project had my attention due to the low license fees. So I signed up at Pro6PP for a free 2 months test account. after that I created an http handler(autocompleteaddress.ashx.cs) which I can use with jQuery.
autocompleteaddress.ashx.cs (3.35 kb)
My demo.aspx file looked like this:
More... 
