Solved

Image Gallery

Posted on 2012-04-02
3
389 Views
Last Modified: 2012-04-04
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.
0
Comment
Question by:tonMachine100
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 4

Assisted Solution

by:elliottbenzle
elliottbenzle earned 250 total points
ID: 37796004
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
 
LVL 110

Accepted Solution

by:
Ray Paseur earned 250 total points
ID: 37796125
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
 

Author Closing Comment

by:tonMachine100
ID: 37805268
Thanks guys - pickachoose looks great. I'll post another question if i have any problems implementing it.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
clicking to find my folders on wamp 8 46
PHP Web Development 6 68
CMD R or Page Refresh Resending Update Query Data from Form 8 48
Presenting my portfolio on the web? 11 52
This article discusses how to implement server side field validation and display customized error messages to the client.
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

732 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question