2

データベースからの画像を表示している小さなフォトギャラリーがありますが、画像が読み込まれると、ギャラリーフレームの右側に表示されるはずです。しかし、この場合、ギャラリーを構築するために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

4

1 に答える 1

1

この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');

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

動作しない場合はお知らせください

于 2012-08-11T19:18:48.710 に答える