Displaying image using php and JQuery

Question

I have a small photo gallery that is displaying images from the database however once the image is loaded it is suppose to be displaying on the right side of the gallery frame. but in this case it does not display i am using JQuery to construct the Gallery can anyone help me solve this problem.

$(document).ready(function () {

    $(".galleryThumbnail a").click(function (e) {
        e.preventDefault();

        //update thumbnail
        $(".galleryThumbnail a").removeClass("selected");
        $(".galleryThumbnail a").children().css("opacity", "1");

        $(this).addClass("selected");
        $(this).children().css("opacity", ".4");

        //setup thumbnails
        var photoCaption = $(this).attr('title');
        var photofullsize = $(this).attr('href');

        $(".galleryPreview").fadeOut(500, function () {

            $(".gallery_preload_area").html("")
            // this is what is going to happen after the fadeout
            $(".galleryPreview").html("<a  href='" + photofullsize + "' style=' background-image:url(" + photofullsize + ");'></a>");
            $(".galleryCaption").html("<p><a href='" + photofullsize + "' title='Click to view large'>View Large</a></p><p></p>")
            $(".galleryPreview").fadeIn(500);

        });
    });
});

it is being displayed on the page like this

<?php
$query     = "SELECT * FROM image WHERE hotel_id = {$hotel['hotel_id']}";
$image_set = mysql_query($query, $connection);
while ($image = mysql_fetch_array($image_set)) {
?>                                                        
    <a href=\"img/photos/<?php   echo $image['image_url']; ?>" 
    title="<?php   echo $image['image_url'];    ?>">
    <img src="img/photos/<?php  echo $image['image_url'];  ?>" width="75" height="75"/>
    </a>           
<?php
}
?>

to see the page in action please visit this site: http://clicktravelnstay.com/desti_list.php?details=19

Abid Hussain · Accepted Answer · 2012-08-11 19:25:03Z

1

try this jquery

output

enter image description here

$(document).ready(function(){

$(".galleryThumbnail a").click(function(e){
     e.preventDefault();

     //update thumbnail
     $(".galleryThumbnail a").removeClass("selected");
     $(".galleryThumbnail a").children().css("opacity","1");

     $(this).addClass("selected");
     $(this).children().css("opacity",".4");

     //setup thumbnails
     var photoCaption = $(this).attr('title');
     var photofullsize =$(this).attr('href');

     alert(photofullsize+photoCaption);
     var fullpath = photofullsize+photoCaption;
         $(".galleryPreview").fadeOut(500, function(){ 

         $(".gallery_preload_area").html("")  
           // this is what is going to happen after the fadeout
           $(".galleryPreview").html("<a  href='"+ photofullsize +"' style='background-image:url("+fullpath+");'></a>");
           $(".galleryCaption").html("<p><a href='"+photofullsize+"' title='Click to view large'>View Large</a></p><p></p>")    
           $(".galleryPreview").fadeIn(500);

          });


});



});



$query = "SELECT * FROM image WHERE hotel_id = {$hotel['hotel_id']}";

$image_set =  mysql_query($query,$connection);

while($image = mysql_fetch_array($image_set)){?>

<a href="img/photos/<?php echo $image['image_url'];?>" title="<?php echo $image['image_url']?>">
<img src="img/photos/<?php echo $image['image_url'];?>" width="75" height="75"/></a>    

<?php } ?>

Please let me know if not working

edited Aug 11, 2012 at 19:25

answered Aug 11, 2012 at 19:18

Abid Hussain

7,7694 gold badges38 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Abid Hussain Over a year ago

i have improve my answer please take a look

Salim Almughairi Over a year ago

I got that problem sorted it was just a matter of the path of the image however my problem now is that i would like it to resize automaticly no matter how big the image is it should be able to full display on the right. thanks again for you support

Collectives™ on Stack Overflow

Displaying image using php and JQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related