Page 1 of 1

php/mysql variable in jquery

Posted: Sun Oct 16, 2011 4:17 pm
by tdmrider
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]

Re: php/mysql variable in jquery

Posted: Mon Oct 17, 2011 5:50 pm
by ouchiko
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.

Re: php/mysql variable in jquery

Posted: Sat Oct 22, 2011 5:42 pm
by KCAstroTech
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.

Re: php/mysql variable in jquery

Posted: Sat Oct 29, 2011 1:59 am
by uday8486
Check whether you path to the image is realative and not absolute, i mean with http://. you should escape this if it has http://