Demo by jquery-az.com
jQuery, CSS and HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/xZoom/normalize.css" /> <link rel="stylesheet" href="css/xZoom/foundation.css" /> <link rel="stylesheet" href="css/xZoom/demo.css" /> <script src="js/xZoom/modernizr.js"></script> <script src="js/xZoom/jquery.js"></script> <!-- xzoom plugin here --> <script type="text/javascript" src="js/xZoom/xzoom.min.js"></script> <link rel="stylesheet" type="text/css" href="css/xZoom/xzoom.css" media="all" /> <!-- hammer plugin here --> <script type="text/javascript" src="hammer.js/1.0.5/jquery.hammer.min.js"></script> <!--[if lt IE 9]><script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <link type="text/css" rel="stylesheet" media="all" href="js/xZoom/fancybox/source/jquery.fancybox.css" /> <link type="text/css" rel="stylesheet" media="all" href="js/xZoom/magnific-popup/css/magnific-popup.css" /> <script type="text/javascript" src="js/xZoom/fancybox/source/jquery.fancybox.js"></script> <script type="text/javascript" src="js/xZoom/magnific-popup/js/magnific-popup.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="large-12 column"><p><h2>A Demo with Output window</h2></p></div> </div> <!-- output window start --> <section id="output"> <div class="row"> <div class="large-12 column"><h3>Output window</h3></div> <div class="large-5 column"> <div class="xzoom-container"> <img class="xzoom2" src="images/gallery/preview/01_b_car.jpg" xoriginal="images/gallery/original/01_b_car.jpg" /> <div class="xzoom-thumbs"> <a href="images/gallery/original/01_b_car.jpg"><img class="xzoom-gallery2" width="80" src="images/gallery/thumbs/01_b_car.jpg" xpreview="images/gallery/preview/01_b_car.jpg" title="The title becomes the description!"></a> <a href="images/gallery/original/02_o_car.jpg"><img class="xzoom-gallery2" width="80" src="images/gallery/preview/02_o_car.jpg" title="The title becomes the description!"></a> <a href="images/gallery/original/03_r_car.jpg"><img class="xzoom-gallery2" width="80" src="images/gallery/preview/03_r_car.jpg" title="The title becomes the description!"></a> <a href="images/gallery/original/04_g_car.jpg"><img class="xzoom-gallery2" width="80" src="images/gallery/preview/04_g_car.jpg" title="The title becomes the description!"></a> </div> </div> </div> <div class="large-7 column"><div id="xzoom2-id" style="float: right; width: 200px; height: 200px;"></div></div> </div> </section> <!-- output window end --> </div> <script src="js/xZoom/foundation.min.js"></script> <script src="js/xZoom/setup.js"></script> </body> </html>
A Demo with Output window
Output window
