 |
 |
« How To Create Sleek jQuery Slideshow Using Free JavaScript | Creating Tabbed Contents For Blogs With Free JavaScript »
| Tweet |
|
|
|
As the festival season draws near, online stores are devising various ways to lure visitors, and making their stay as comfortable as possible, even if such stays are mostly for just about a minute or so.
Among different means to maximize visitors’ comfort, the one suggested for long by experts is to not let the viewers leave the page they are already in by showing product details in other pages.
A good example of doing that is by creating free online catalog using jQuery zoom-in. It shows the small image of the product with its description alongside. When the visitor’s mouse moves over the small image, the space showing description is replaced by the large image of the product.
In yet another example of creating free jQuery online catalog here the bigger image zooms in when the corresponding small image is clicked on. The process is the same as in a previous article we did on creating overlay lightbox with jQuery zoom.
Here however the difference is that the small images or thumbnails are clustered together. This is feasible for an online catalog when similar items or items from one group are put together in a cluster just so the viewers find it easy to browse them.
In the captions for the bigger images, the necessary specifications of the item can be mentioned. To make hyperlinks in the bigger image is a bit difficult.
Making Hyperlinks
Notice in the third JavaScript string in the head section I’ve made the ‘closeOnClick’ as ‘false’ (closeOnClick: false). This means the bigger image will close only when the close button at top-left is clicked, and not for any click anywhere.
After this is done, you can make text or image as hyperlinks in the bigger image. If ‘closeOnClick’ is ‘true’ there is the chance that the click on the hyperlink will rather close the bigger image instead of opening the targeted page.
The online catalog as envisaged for this article appears below. Click on the image thumbnails to see how the catalog works.
Making Online Catalog – The Steps
- The Fancy Zoom script based on jQuery library is made by John Nunemaker, and so the first step is to download it free from the github site.
- Unzip the code in your computer. Open the folder and then proceed to open the folder named ‘jquery’.
- You now have 2 folders, ‘images’ and ‘js’, and the ‘index’ html file. You will need all the images inside the ‘image’ folder, and from the ‘js’ folder take the ‘fancyzoom.min.js’ file for your use.
- Now take a look at the html code below. Before you use ‘fancyzoom.min.js’ you will need to refer to the jQuery library. You will also need a small JavaScript string that defines how the overlay zoom will behave.
- All the 3 JavaScript and CSS code are placed in the head section. Tables have been used to accommodate the 3 parts of the online catalog – heading, description, and the thumbnails of the zoom images.
Feel free to use the html code and alter it as per your need.
HTML Code
<html><head>
<title>Free Online Catalog With jQuery Fancy Zoom - 2WebVideo Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="fancyzoom.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('div.photo a').fancyZoom({scaleImg: true, closeOnClick: false});
});
</script>
<style type="text/css" media="screen">
a:link {color: #060;text-decoration: none;}
a:visited {color: #060;text-decoration: none;}
a:hover {color: #000066; text-decoration: underline;}
div#photos {width:220px; overflow:hidden;}
div.photo {display:inline;}
div.photo a img {border:1px solid #F0F; padding:1px;}
div#text a {font-weight:bold;}
.photo ul, .photo li {display:inline;list-style:none;}
.photo li {margin:0 5px;}
h2 {font:normal 28px Georgia, serif; color:#808; line-height: 100%; margin:0 0 10px 0; text-align:center;}
p {font:normal 14px Georgia, serif; color:#404; line-height: 115%; margin:10px 0 18px 0; text-align:justify;}
</style>
</head>
<body style="margin=0; padding:0;">
<table width="460" border="0" cellpadding="5" cellspacing="0" style="border:4px double #F4F;">
<tr>
<td width="100%" colspan="2"><h2>Free Demo Online Product Catalog Selling Handbags</h2></td>
</tr>
<tr>
<td width="230">
<p>The thumbnails of 6 types of handbags are displayed alongside.</p>
<p>Click on any thumbnail to view the bigger image of that handbag. Note there is brief description of the handbag below the bigger image.</p>
<p>Price of each bag is available in the bigger image. <em>Since this is a demo product catalog, all the handbags are tagged with a uniform price of $99.</em></p>
<p>To buy the bags, viewers may click on the 'Buy Now' button below each of them. <em>Once again, as this is a demo catalog, the 'buy now' link leads to the current demo page only.</em></p>
<p><strong>If you want this product catalog for your website, study the html code well (it is given in the blog article) before implementing it.</strong></p>
</td>
<td width="230">
<!-- First 2 Items -->
<div id="photos">
<div class="photo">
<ul>
<li><a href="#image1"><img src="blue-forest-handbag-S.jpg" alt="Blue Forest Handbag" /></a></li>
<li><a href="#image2"><img src="blue-storage-handbag-S.jpg" alt="Blue Storage Handbag" /></a></li>
</ul>
</div>
<div id="image1">
<img src="blue-forest-handbag-B.jpg" alt="Blue Forest Handbag" />
<p style="margin:5px 0 0;text-align:center;font:bold 13px arial,verdana;color:#520;">
Blue Forest Handbag (<a rel="nofollow" href="http://www.flickr.com/photos/feltmates/3253771847/">image source</a>); Price: $99
</p>
</div>
<div id="image2">
<img src="blue-storage-handbag-B.jpg" alt="Blue Storage Handbag" />
<p style="margin:5px 0 0;text-align:center;font:bold 13px arial,verdana;color:#630;">
Blue Storage Handbag (<a target="_new" rel="nofollow" href="http://www.flickr.com/photos/just_because/439595380/">image source</a>); Price: $99
</p>
</div>
</div>
<div style="clear:both;"></div>
<div id="photos">
<a style="margin:0 45px 0 60px;" href=""><img style="border:none;" src="buy-now.gif" /></a><a href=""><img style="border:none;" src="buy-now.gif" /></a>
</div>
<br />
<!-- Second 2 Items -->
<div id="photos">
<div class="photo">
<ul>
<li><a href="#image3"><img src="light-pink-freedom-handbag-S.jpg" alt="Light Pink Freedom Handbag" /></a></li>
<li><a href="#image4"><img src="mini-pleated-handbag-S.jpg" alt="Mini Pleated Handbag" /></a></li>
</ul>
</div>
<div id="image3">
<img src="light-pink-freedom-handbag-B.jpg" alt="Light Pink Freedom Handbag" />
<p style="margin:5px 0 0;text-align:center;font:bold 13px arial,verdana;color:#740;">
Pink Freedom Handbag (<a target="_new" rel="nofollow" href="http://www.flickr.com/photos/prudencemapstone/2937895516/">image source</a>); Price: $99
</p>
</div>
<div id="image4">
<img src="mini-pleated-handbag-B.jpg" alt="Mini Pleated Handbag" />
<p style="margin:5px 0 0;text-align:center;font:bold 13px arial,verdana;color:#520;">
Mini Pleated Handbag (<a target="_new" rel="nofollow" href="http://www.flickr.com/photos/8244232@N08/749505494/">image source</a>); Price: $99
</p>
</div>
</div>
<div style="clear:both;"></div>
<div id="photos">
<a style="margin:0 45px 0 60px;" href=""><img style="border:none;" src="buy-now.gif" /></a><a href=""><img style="border:none;" src="buy-now.gif" /></a>
</div>
<br />
<!-- Third 2 Items -->
<div id="photos">
<div class="photo">
<ul>
<li><a href="#image5"><img src="red-pleated-handbag-S.jpg" alt="Red Pleated Handbag" /></a></li>
<li><a href="#image6"><img src="replica-coach-handbag-S.jpg" alt="Replica Coach Handbag" /></a></li>
</ul>
</div>
<div id="image5">
<img src="red-pleated-handbag-B.jpg" alt="Red Pleated Handbag" />
<p style="margin:5px 0 0;text-align:center;font:bold 13px arial,verdana;color:#630;">
Red Pleated Handbag (<a target="_new" rel="nofollow" href="http://www.flickr.com/photos/meikaidi/298801520/">image source</a>); Price: $99
</p>
</div>
<div id="image6">
<img src="replica-coach-handbag-B.jpg" alt="Replica Coach Handbag" />
<p style="margin:5px 0 0;text-align:center;font:bold 13px arial,verdana;color:#740;">
Replica Coach Handbag (<a target="_new" rel="nofollow" href="http://www.flickr.com/photos/20982306@N04/2040243161/">image source</a>); Price: $99
</p>
</div>
</div>
<div style="clear:both;"></div>
<div id="photos">
<a style="margin:0 45px 0 60px;" href=""><img style="border:none;" src="buy-now.gif" /></a><a href=""><img style="border:none;" src="buy-now.gif" /></a>
</div>
</td>
</tr>
</table>
</body>
</html>| Tweet |
|
|
|
This article of October 21st, 2009 is authored by Partha Bhattacharya, who runs this website. Partha also creates video-based e-learning course for clients, and when time permits, writes guest articles for selected sites.
4 Comments
Trackbacks/Pingbacks
- Jutawan Iklan Percuma – Hyprobulksms – Lihat Bukti Income » Blog Archive » How To Create Free Online Catalog With jQuery Fancy Zoom : Video … - [...] here: How To Create Free Online Catalog With jQuery Fancy Zoom : Video … No Comments| ...
I just needed to take a second and let you know that I’ve been savouring reading your posts over the last few days. I have a website of my own, and would enjoy to switch links with you. If you’re interested just leave me a comment on my page or send me an e-mail with your details.
Hello, I stumbled across this blog by dumb luck i was searching Google for tips just like this when I came upon your site, I must say your site is really cool I just love the feel, its fantastic!. I don’t have the time this second to fully read your site but I have bookmarked it and also signed up for your RSS feeds. I will be back periodically. thanks for a great site.
Thanks for the great script!
Great tutorial!