使用php和JQuery显示图像

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.

我有一个小的照片库,显示数据库中的图像,但是一旦加载图像,它就会显示在图库框架的右侧。但在这种情况下,它不显示我使用JQuery构建图库任何人都可以帮我解决这个问题。

$(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

要查看该页面,请访问此站点:http://clicktravelnstay.com/desti_list.php?details = 19

1 个解决方案

#1

try this jquery

试试这个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

如果不工作,请告诉我