Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Nov 2002
    Posts
    104
    Thanks
    13
    Thanked 0 Times in 0 Posts

    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

    PHP Code:
    <script language="javascript">
    $(
    document).ready(function() {
        $(
    '.thumbnail').live("click", function() {
            $(
    '#mainImage').hide();
            $(
    '#atitle').hide();
            $(
    '#imageWrap').css('background-image'"url('/images/ajax-loader.gif')");
            var 
    = $('<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

    PHP Code:
      // 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

    PHP Code:
      // Large image display              
                                
    echo '<img src="artists/'.$artist.'/'.$first_image.'.jpg" alt="Main Image" id="mainImage"/>'
    Here is the php echo for the title
    PHP Code:
    <? 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
    Last edited by dk4210; 03-09-2012 at 01:42 PM.

  • #2
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Nov 2002
    Posts
    104
    Thanks
    13
    Thanked 0 Times in 0 Posts
    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..

  • #4
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Code:
    $('.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:

    Code:
    <script type="text/javascript">
    
    <?php
    
    $myVar = 'qwerty';
    
    echo 'var myVar = "'.$myVar.'";'; 
    
    ?>
    
    </script>
    and so in the html in your browser you will then see:

    Code:
    <script type="text/javascript">
    
    var myVar = "qwerty";
    
    </script>
    Last edited by webdev1958; 03-09-2012 at 02:06 PM.

  • #5
    Regular Coder
    Join Date
    Nov 2002
    Posts
    104
    Thanks
    13
    Thanked 0 Times in 0 Posts
    Hey,

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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •