Passing a php var to javascript

Hello Guys,

I have a page with thumb nails and a large image that changes when clicking on thumbnail. I need to display dynamic title for the image. It wont display because the page is not reloading.. How do you pass the name so it will show up without reloading?

Here is the JS for switching dynamically loading the large image


<script language="javascript">
$(document).ready(function() {
$('.thumbnail').live("click", function() {
$('#mainImage').hide();
$('#atitle').hide();
$('#imageWrap').css('background-image', "url('/images/ajax-loader.gif')");
var i = $('<img />').attr('src',this.href).load(function() {
$('#mainImage').attr('src', i.attr('src'));
$('#imageWrap').css('background-image', 'none');
$('#mainImage').fadeIn();
$('#atitle').fadeIn();


});
return false;
});
});
</script>


Here is the link for the thumb

// Thumbnail Display

echo '<a href="artists/'.$artist.'/'.$imgname.'.jpg" class="thumbnail"><img src="artists/'.$artist.'/previews/'.$imgname.'.jpg" border="0" /></a>';

[/PHP]

Link to the large image


// Large image display
echo '<img src="artists/'.$artist.'/'.$first_image.'.jpg" alt="Main Image" id="mainImage"/>';


Here is the php echo for the title
<? echo str_replace('"', '`', $iname); ?>

I need to some how pass a php var from the thumb link to the js and have it display dynamically(without reloading)

Hope I explained this correctly.. Please advise..

Thanks, Dan

I think I get the jist of what you want. I'm assuming you have all the image data like image file name and associated title on the server.

If that is the case I would echo the image data (file name and title) to a javascript "2D" array. Then assign an onclick event handler to each thumbnail which then gets the file name of the enlargement (if different to the thumb) and the associated title from the 2D array and displays them on your page somewhere.

Another option could be to use AJAX to get the title but I wouldn't recommend it because there will be at least a very small delay between clicking a thumb and the corresponding title coming back from the server.

Hey Web dev!

Thanks for the response.. Your right I do think I need to use an onclick event, but Im not real good with JS.. I am better at php..

1. How would I do the thumb link with the on click?

2. Can I pass the var in the current JS or what?

3. Can you give me an example of what you mean?

Thanks for your help.. I've been dealing with this issue for 3 days..

$('.thumbnail').live("click", function()You already have an onclick assigned to your thumbs with the above line so you'll probably just need to add some code to it for the image titles data.

I don't know how you have your image filenames and titles stored on the server, but to transfer a php variable to a js variable you simply echo the php code to create the javascript code.

For example, say you have in php $myVar = 'qwerty' and you want to transfer that data to javascript. Then in your php file you could have something along this line:

<script type="text/javascript">

<?php

$myVar = 'qwerty';

echo 'var myVar = "'.$myVar.'";';

?>

</script>and so in the html in your browser you will then see:


<script type="text/javascript">

var myVar = "qwerty";

</script>

Hey,

I am not sure how to combine the code with the current onclick..
Does it go under it on inside the () or what?