First off, looking at the structure:
Code: Select all
while($row = mysql_fetch_array($result)) { //<--PHP WHILE LOOP OPENS
$zoomImage = $row['sortByZoomImage']; // THIS IS AN IMAGE LINK IE ../images/bigimage.jpg
?>
<script type="text/javascript">
.....
</script>
<-- WHERE IS THE CLOSING PHP LOOP BRACKET?
I see an opening for the while loop but no closing. Secondly, when you switch from php to html as you do here you are doing the same as an echo statement. E.g.
Code: Select all
<?php
$x = 1;
while ($x < 4){
?>
<p>This is loop iteration <?php echo $x; ?></p>
<?php
$x = $x + 1;
}
?>
Is the same as saying:
Code: Select all
<?php
$x = 1;
while ($x < 4){
echo "<p>This is loop iteration " . $x . "</p>";
$x = $x + 1;
}
?>
Both will produce the following in the browser:
Code: Select all
<p>This is loop iteration 1</p><p>This is loop iteration 2</p><p>This is loop iteration 3</p>
Because of this, you should be able to now realize that you are essentially telling the browser to create a bunch of "jQuery(document).ready" events.
If I understand what you are trying to achieve, you would want to use something like this:
Code: Select all
<script type="text/javascript">
jQuery(document).ready(function($){
<?php //<-- NOTICE HOW WE CREATE THE <SCRIPT> AND DOCUMENT READY FUNCTION PRIOR TO SWITCHING TO PHP FOR THE LOOP
while($row = mysql_fetch_array($result)) { //<--PHP WHILE LOOP OPENS
$zoomImage = $row['sortByZoomImage']; // THIS IS AN IMAGE LINK IE ../images/bigimage.jpg
?>//<-- WE ARE STILL IN THE PHP LOOP BUT ARE NOW SWITCHING TO HTML PROCESSING TO ADD THE FOLLOWING HTML TO THE DOCUMENT READY FUNCTION
$('#image4').addimagezoom({
zoomrange: [5, 5],
magnifiersize: [400,400],
magnifierpos: 'right',
cursorshade: true,
cursorshadecolor: 'pink',
cursorshadeopacity: 0.3,
cursorshadeborder: '1px solid red',
largeimage: '<?php echo $zoomImage; ?>'
})
<?php //<-- GO BACK INTO PHP PROCESSING
} //<-- PHP WHILE LOOP CLOSES
?>//<-- BACK TO HTML TO CLOSE OUT THE ON PAGE READY FUNCTION AND SCRIPT
});
</script>
This should produce something like this in the browser:
Code: Select all
<script type="text/javascript">
jQuery(document).ready(function($){
$('#image4').addimagezoom({
zoomrange: [5, 5],
magnifiersize: [400,400],
magnifierpos: 'right',
cursorshade: true,
cursorshadecolor: 'pink',
cursorshadeopacity: 0.3,
cursorshadeborder: '1px solid red',
largeimage: '../images/bigimage1.jpg'
});
$('#image4').addimagezoom({
zoomrange: [5, 5],
magnifiersize: [400,400],
magnifierpos: 'right',
cursorshade: true,
cursorshadecolor: 'pink',
cursorshadeopacity: 0.3,
cursorshadeborder: '1px solid red',
largeimage: '../images/bigimage2.jpg'
});
$('#image4').addimagezoom({
zoomrange: [5, 5],
magnifiersize: [400,400],
magnifierpos: 'right',
cursorshade: true,
cursorshadecolor: 'pink',
cursorshadeopacity: 0.3,
cursorshadeborder: '1px solid red',
largeimage: '../images/bigimage3.jpg'
});
});
</script>
Finally, also please realize that we are using "#image4" on all of the statements which means that the image in element image4 will be replaced each time. Presuming you have more than 1 image you are trying to work with you might want to also consider replacing "#image4" with a variable as well. Otherwise, if you only have one image, then the above example should work fine.
Hope you find this helpful and informative.