CODEWITHSUNDEEP
phpjquerymysqlajax
Joe Johnson
Joe Johnson

Reputation: 13

Image gallery with thumbnails from database, each related to other images

I've searched a lot of material here and elsewhere on the web about thumbnail images linking to image gallery, but I think I'm missing something simple and hope you can help. The use chooses a set of thumbnail images to display based on a button click. I retrieve the thumbnails from a mysql database. So far, so good. On clicking a thumbnail, I want to display multiple other images related to that thumbnail and for this, I'm using a jquery script like so:

    <script type="text/javascript" >
        $(document).ready(function(){
         $( "img" ).on("click",function(){
            var $thumb_name = $("img").attr("src");
            $.ajax({
                  type:"post",
                  url: "test.php",
                  data: {thumb_name:'$thumb_name'},
                  success: function( data ) {
           $( "#val" ).html(data);
           } //data
    }); //close ajax
    }); //close onclick
    }); //close document ready
    </script>

The server side php script is simply

    <?php
        $thumb_name = $_POST['thumb_name'];
        echo "the clicked thumb is $thumb_name";
    ?>

I've retrieved $thumb_name from the database (I can display it/them alongside the thumbnail images). The problem is that the code above doesn't pass it to the server side as a value but rather as the string $thumb_name. I'm communicating with the php script because the string does get placed in the div named 'val'. I know how to display the further images if I can get the thumbnail image's actual name.

Thanks for any help.

Upvotes: 0

Views: 422

Answers (1)

fsperrle
fsperrle

Reputation: 1302

You have to remove the quotes around $thumb_name:

<script type="text/javascript" >
    $(document).ready(function(){
     $( "img" ).on("click",function(){
        var thumb = $(this).attr("src");
        $.ajax({
              type:"post",
              url: "test.php",
              data: {thumb_name: $thumb_name},
              success: function( data ) {
       $( "#val" ).html(data);
       } //data
     }); //close ajax
   }); //close onclick
}); //close document ready
</script>

Upvotes: 0

Related Questions