Image Gallery

I want to create an image gallery like in the attached web site:

http://rachelsimpsonshoes.co.uk/newrange.php

ie.
a) A main image appears and smaller thumbnail images appear next to it.
b) The user can click on the smaller thumbs and the image is then transferred to the larger image.
c) The user can scroll over the larger image to zoom in (is this JavaScript? would this script be open source?)


I've started to replicate this but would like some guidance. So far I’ve:

Created a mysql database which currently contains two tables - t_products and t_images.
The products table records the product details (eg product title, name), and the t_images table records the images details of the product (including the image file name (eg. product1.jpg)).
Each product can have multiple images (up to 5). I've created a column in the t_images table called img_main_ind which flags up which of the images is the main image for each product.
I've created a php file which is querying the tables and currently providing a list of the image file names.

Can you please give me some guidance around how i can now go about replicating points a, b, and c in my site? As you can probably tell i'm not a web designer so any advice is appreciated.
tonMachine100Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

elliottbenzleCommented:
There are a few pre-written scripts out there you can try. Check out this one: http://www.pikachoose.com/
Instructions for installing it are all on the site.
0
Ray PaseurCommented:
From looking at the "view source" output, this site appears to have been built using DreamWeaver and an older version of jQuery.
<link href="css/960new.css" rel="stylesheet" type="text/css" />
<link href="css/layoutnew.css" rel="stylesheet" type="text/css" />
<link href="css/jqzoom.css" rel="stylesheet" type="text/css" />

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jqzoom.pack.1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">

$(function() {

		var options = {
				zoomWidth: 560,
				zoomHeight: 390,
				zoomType: 'reverse',
				title: false,
				showEffect: 'fadein',
				fadeinSpeed: 'slow',
				hideEffect: 'fadeout',
				fadeoutSpeed: 'slow',
				showPreload: true
		};
		
	$(".jqzoom").jqzoom(options);
});
</script>
<script language="JavaScript" type="text/JavaScript">
 function swapPhoto(photoSRC, photoHGT, photoWTH, zoomLINK) {
 	document.images.imgPhoto.src = photoSRC, 
	document.images.imgPhoto.height = photoHGT, 
	document.images.imgPhoto.width = photoWTH; 
	document.getElementById('zoomlink').href = zoomLINK;
 }
 </script>

Open in new window

This seems to be at least one part of it:
http://archive.plugins.jquery.com/project/jQzoom

If you want to try to replicate this functionality you might consider copying the CSS and JavaScript (including the jQuery libraries) onto your server.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
tonMachine100Author Commented:
Thanks guys - pickachoose looks great. I'll post another question if i have any problems implementing it.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.