Displaying image using php and JQuery - php

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

Answer 1

try this jquery
output
$(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