I have this piece of code in the head of my document which allows image magnification.

<script type="text/javascript">
jQuery(document).ready(function($){
   $('#image1').addimagezoom({
		zoomrange: [5, 5],
		magnifiersize: [530,300],
		magnifierpos: 'right',
		largeimage: 'images/products/large/KALLY.jpg' 
		}),
   $('#image2').addimagezoom({
		zoomrange: [5, 5],
		magnifiersize: [530,300],
		magnifierpos: 'right',
		largeimage: 'images/products/large/EDITH.jpg' 
		}),
		
})
</script>

At the moment it allows for 2 images to be magnified, but I intend displaying over 50 product images whose details are taken from a database.
I'm not sure how to change the red parts of the script to read the changing information.
Can anyone help?

Iam not sure whether that will work. Try querying the name of the images and keep it in an hidden field.You can then loop the list and change the images according to it.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.