Question

我有一个小的照片库，它正在显示来自数据库的图像，但是一旦图像被加载，它就会显示在图库框架的右侧。但在这种情况下，它不会显示我使用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);

        });
    });
});

它正在这样的页面上显示

<?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
}
?>

要查看该网页，请访问此网站： http://clicktravelnstay.com/desti_list.php?details=19

Answer 1

试试这个jquery

输出

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 } ?>

如果不能正常工作，请告诉我

使用php和JQuery显示图像

1 个答案: