Plugin to make showing product images fancy
Geplaats op 10:54:52 16-07-2010 in jQuery
Our plugin, in basics, adds a 'fisheye' 'popup' event to the images in the list on mouse over and on click it toggles the larger image. But it does do more. You can create a slider of the thumbnail images, you can even add navigation information, for example, showing image 5-8 or showing 4-6, depending on the images per scroll you have setup.
The plugin can be divided into 3 parts;
- the essential JS plugin for jQuery.
- HTML containing the images
- CSS to make it look as wanted
The plugin in action
Below you see a image of the plugin in action. For the actual demo, you can scroll down to the part that says 'demo'.
The HTML code
<img id="prod_mainfoto" src="http://pictures.content4us.com/350px/CMP-NWIPCAM10.JPG" alt="Big image" width="350" height="350" />
<div id="prod_fotolist">
<a href="" class="navbutton scrollprev arrowprev"></a>
<div id="prod_fotoscrollbox">
<ul id="prod_fotoscroll" page="0">
<li><a href="http://pictures.content4us.com/350px/CMP-NWIPCAM10.JPG" title=""><img src="http://pictures.content4us.com/140px/CMP-NWIPCAM10.JPG" width="100" height="100" alt=" {nedispartnr} {brand} {ean}" /></a></li>
<li><a href="http://pictures.content4us.com/350px/CMP-NWIPCAM10_2.JPG" title=""><img src="http://pictures.content4us.com/140px/CMP-NWIPCAM10_2.JPG" width="100" height="100" alt=" {nedispartnr} {brand} {ean}" /></a></li>
<li><a href="http://pictures.content4us.com/350px/CMP-NWIPCAM10_3.JPG" title=""><img src="http://pictures.content4us.com/140px/CMP-NWIPCAM10_3.JPG" width="100" height="100" alt=" {nedispartnr} {brand} {ean}" /></a></li>
<li><a href="http://pictures.content4us.com/350px/CMP-NWIPCAM10_4.JPG" title=""><img src="http://pictures.content4us.com/140px/CMP-NWIPCAM10_4.JPG" width="100" height="100" alt=" {nedispartnr} {brand} {ean}" /></a></li>
<li><a href="http://pictures.content4us.com/350px/CMP-NWIPCAM10_BOX RIGHT.JPG" title=""><img src="http://pictures.content4us.com/140px/CMP-NWIPCAM10_BOX RIGHT.JPG" width="100" height="100" alt=" {nedispartnr} {brand} {ean}" /></a></li>
<li><a href="http://pictures.content4us.com/350px/CMP-NWIPCAM10_ART+BOX.JPG" title=""><img src="http://pictures.content4us.com/140px/CMP-NWIPCAM10_ART+BOX.JPG" width="100" height="100" alt=" {nedispartnr} {brand} {ean}" /></a></li>
<li><a href="http://pictures.content4us.com/350px/CMP-NWIPCAM10_CONTENTS.JPG" title=""><img src="http://pictures.content4us.com/140px/CMP-NWIPCAM10_CONTENTS.JPG" width="100" height="100" alt=" {nedispartnr} {brand} {ean}" /></a></li>
</ul>
</div>
<a href="" class="navbutton scrollnext arrownext" id="scrollnext"></a>
<div id="prod_fotoliststate">
</div>
</div>The CSS code
#prod_fotolist {
float: left;
width: 540px;
margin: 0px 0px 10px 0px;
}
#prod_fotolist a.navbutton {
float: left;
width: 50px;
height: 110px;
display: block;
}
#prod_fotolist a.arrowprev {
background-image: url('/images/arrow_prev.png');
}
#prod_fotolist a.arrownext {
background-image: url('/images/arrow_next.png');
}
ul#prod_fotoscroll {
float: left;
width: 440px;
}
ul#prod_fotoscroll li {
margin: 0; padding: 5px;
float: left;
position: relative;
width: 100px;
height: 100px;
display: none;
}
ul#prod_fotoscroll li img {
width: 100px;
height: 100px;
position: absolute;
left: 0; top: 0;
padding: 5px;
-ms-interpolation-mode: bicubic;
background-image: url('/images/photoscroll_bg100.png');
}
ul#prod_fotoscroll li img.hover {
background-image: url('/images/photoscroll_bg140.png');
border: none;
}
#prod_fotoliststate {
float: left;
width: 540px;
height: 40px;
line-height: 40px;
text-align: right;
}
#prod_fotoliststate ul {
float: right;
margin: 0px 0px 0px 10px;
width: 28px;
}
#prod_fotoliststate ul li {
float: left;
width: 6px;
height: 6px;
margin: 0px 1px 1px 0px;
background-color: #ccc;
}
#prod_fotoliststate ul li.showing {
background-color: #585757;
}The plugin
We have decided not to put the 200+ lines of code here. Just the 3 lines of magic used to invoke the plugin.
$(document).ready(function(){
$('ul#prod_fotoscroll').promage();
});
We have zipped the CSS, HTML and JS into a nice package for you to download.
Feel free to copy, use, abuse the code of this plugin. However, we would like to be informed about improvements made, as we are never to old to learn.
If you have any kind of question, feel free to ask us, but as it is not an officially supported piece of code, we can not promise to come up with answers/solutions.
Demo
Categorien
Recente berichten
Vreemde wensen temmen
Geplaats op 21:59:47 14-07-2011 in Kantoor
Billink en waar op te letten
Geplaats op 21:56:48 14-07-2011 in Webnieuws
Tradetracker integraties op juridisch gebied
Geplaats op 20:02:08 17-03-2011 in Klanten
