Hi Im a newbee to this forum. Im working on a jquery image gallery. I downladed a code and modified a lil bit. works fine just with one image. how can i add more than one image to the gallery? Please help me.
This is the code. Please help need urgently!
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>
</title>
<link rel="SHORTCUT ICON" href="http://www.elevateweb.co.uk/favicon.ico">
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="http://www.elevateweb.co.uk/wp-content/themes/twentyeleven/style.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/cupertino/jquery-ui.css"/>
<link rel="stylesheet" href="http://www.elevateweb.co.uk/wp-content/themes/radial/default.css" />
<link rel="stylesheet" href="http://www.elevateweb.co.uk/wp-content/themes/radial/jquery.fancybox.css" />
<link rel='stylesheet' id='bbp-default-bbpress-css' href='http://www.elevateweb.co.uk/wp-content/plugins/bbpress/templates/default/css/bbpress.css?ver=2.2.3' type='text/css' media='screen' />
<link rel='stylesheet' id='d4p-bbtools-css-css' href='http://www.elevateweb.co.uk/wp-content/plugins/gd-bbpress-tools/css/gd-bbpress-tools.css?ver=1.3_b1207_free' type='text/css' media='all' />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://www.elevateweb.co.uk/wp-content/themes/radial/jquery.elevatezoom.min.js" type="text/javascript"></script>
<script src="http://www.elevateweb.co.uk/wp-content/themes/radial/jquery.fancybox.pack.js" type="text/javascript"></script>
<script type="text/javascript" src="http://www.elevateweb.co.uk/wp-content/themes/radial/syntax/prism.js"></script>
<link type="text/css" rel="stylesheet" href="http://www.elevateweb.co.uk/wp-content/themes/radial/syntax/prism.css"/>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-12402473-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"> </script>
<script type="text/javascript">
$(document).ready(function () {
$("#zoom_03").elevateZoom({gallery:'gallery_01', cursor: 'pointer', galleryActiveClass: "active", imageCrossfade: true, loadingIcon: "http://www.elevateweb.co.uk/spinner.gif"});
$("#zoom_03").bind("click", function(e) {
var ez = $('#zoom_03').data('elevateZoom');
ez.closeAll(); //NEW: This function force hides the lens, tint and window
$.fancybox(ez.getGalleryList());
return false;
});
});
</script>
<!--[if IE 6]>
<html id="ie6" dir="ltr" lang="en-US">
<![endif]-->
<!--[if IE 7]>
<html id="ie7" dir="ltr" lang="en-US">
<![endif]-->
<!--[if IE 8]>
<html id="ie8" dir="ltr" lang="en-US">
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8) ]><!-->
</head>
<body >
<div style="clear:both;"></div>
<div class="zoom-wrapper">
<div class="zoom-left">
<div>
<img style="border:1px solid #e8e8e6;" id="zoom_03" src="images/thumb/1.jpg" width="162px" height="162px" data-zoom-image="images/large/image3.jpg"
width="411" />
<div id="gallery_01" style="width="500pxfloat:left; ">
<a href="#" class="elevatezoom-gallery active" data-update=""
data-zoom-image="images/large/image3.jpg">
</a>
</div>
</div>
</div>
</div>
<div style="clear:both;"></div>
</body>
</html>