Hi. I am trying to incorporate a php vaiable into jquery (using a 'while' loop) with no luck. The code below gives you an idea what I am trying to acheive. It is the last line of code that is foxing me. Any help would be most appreciated.
[text]
while($row = mysql_fetch_array($result)) {
$zoomImage = $row['sortByZoomImage']; // THIS IS AN IMAGE LINK IE ../images/bigimage.jpg
?>
<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: '<?php echo $zoomImage; ?>' //<-- THIS IS THE LINE I CAN'T GET RIGHT! IT SCREWS THE JQUERY. I don't know how else other than php/mysql to get the variable in.
})
})
</script>
[/text]
php/mysql variable in jquery
Moderator: General Moderators
Re: php/mysql variable in jquery
Does it contain http:// in the link?
If so try http:\/\/
A complete guess, show us a real example of the generated code for more help.
If so try http:\/\/
A complete guess, show us a real example of the generated code for more help.
-
KCAstroTech
- Forum Commoner
- Posts: 33
- Joined: Sat Aug 27, 2011 11:16 pm
Re: php/mysql variable in jquery
First off, looking at the structure:
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.
Is the same as saying:
Both will produce the following in the browser:
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:
This should produce something like this in the browser:
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.
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?
Code: Select all
<?php
$x = 1;
while ($x < 4){
?>
<p>This is loop iteration <?php echo $x; ?></p>
<?php
$x = $x + 1;
}
?>Code: Select all
<?php
$x = 1;
while ($x < 4){
echo "<p>This is loop iteration " . $x . "</p>";
$x = $x + 1;
}
?>Code: Select all
<p>This is loop iteration 1</p><p>This is loop iteration 2</p><p>This is loop iteration 3</p>
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>
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>
Hope you find this helpful and informative.
Re: php/mysql variable in jquery
Check whether you path to the image is realative and not absolute, i mean with http://. you should escape this if it has http://