0

このギャラリーを構築しようとしています：

代替テキスト

jquery を使用してこの画像ギャラリーを構築し、フォルダ内にある画像の数に基づいてサムネイルを自動的に作成するにはどうすればよいでしょうか? サムネイルをクリックして、大きな画像で新しいページまたは div を開きたいと思います。

また、各サムネイルを次々とフェードインさせたいと思っています。

4

1 に答える 1

4

この回答は、質問の HTML/CSS/jQuery 部分のみに関係します。

ミニ Google ロゴの代わりにフォルダに画像を表示する場合は、PHP や ASP.NET などの言語で記述された単純なサーバー側コードが必要になります。PHP を使用している場合は、これを記述できます。

IE7/8、Firefox、Chrome でこれをテストしました。

あなたが求めた詳細を維持しようとしながら、私はできる限りシンプルに保ちました：

ライブデモ

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo Gallery</title>
<style type="text/css">
html, body {
    margin: 0; padding: 0; border: 0
}
#container {
    border: 1px solid red;
    background: #eee;
    width: 377px;
    height: 355px;
    padding: 0 0 5px 0;
    overflow-y: scroll
}
#container img {
    border: 1px solid red;
    float: left; margin: 5px 0 0 5px
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    //fill container with test images
    $('#container').append(new Array(60).join('<a href="http://www.google.com/images/logos/ps_logo2.png" target="_blank"><img src="http://www.google.com/images/logos/ps_logo2.png" width="64" height="64" /></a>'))

    var $images = $('#container img');

    $images.hide();

    $images.each(function(index) {
        $(this).delay(index * 50).fadeIn();
    });

});
</script>
</head>

<body>

<div id="container">
    <a href="http://www.google.com/images/logos/ps_logo2.png" target="_blank"><img src="http://www.google.com/images/logos/ps_logo2.png" width="64" height="64" /></a>
</div>

</body>
</html>

コメントへの返信:ライブ デモ #2

  • すべての「選択されていない画像」の不透明度を 50% にしました。
  • 画像にカーソルを合わせると、不透明度が 100% になります。
  • 訪問した画像には、赤ではなく紫の境界線が表示されます。
于 2010-12-28T03:08:19.993 に答える