1

簡単な免責事項から始めましょう。私はJavaScriptの初心者であり、コーディングのバックグラウンドはありませんが、現在、本、チュートリアルを読み、このサイトに頻繁にアクセスして、自分で問題を解決しています。ただし、javascript関数を使用した画像ギャラリーのヘルプをいただければ幸いです。

私が必要とする解決策は、javascriptを使用して、サムネイルを同じページの大きな画像にリンクし、その下に関連するテキストの説明を表示することです。このサイトはアーティストのポートフォリオであるため、同じページにとどまりながら、アートワークを以下のタイトル、寸法、価格で表示することが目標になります。

現在のサイトhttp://www.barrymckayart.co.uk/animals.htmlは、スクリプトなしで、画像リンクごとに個別のページを作成することを犠牲にして（純粋に私の経験不足ですが）、これを実行します。

私が現在実験しているスクリプトは次のとおりです。

<script type="text/javascript">
  function showImage(imgName) {
    var curImage = document.getElementById('currentImg');
    var thePath = 'images/animals/';
    var theSource = thePath + imgName;

    curImage.src = theSource;
    curImage.alt = imgName;
    curImage.title = imgName;

視覚的には、これは既存のWebサイトと同じであり、完全に機能します。ただし、各画像に固有のテキストを取り込む方法がわかりません。タグimg title=""を含めるために、各サムネイルのdivを作成するだけでなく、を呼び出しようとしました。p実用的ではありません！私も作成しようとしましたfigcaptionが、サムネイルの下に表示され、すべてがずれてしまいます。

私が達成しようとしているものと同様のギャラリーは、http：//www.thekitchen.org/auction2010/#artworkにあります。この投稿を入力する以外に、JavaScriptを学びたいと思っているので、コードを解読しようとしていますが、この問題を解決する時間は限られています。

誰かが親切にポインタ、解決策またはアドバイスを提供することができれば私はお世話になります。

ありがとうございました。

それ以来、私は両方のコードを使用するようになり、現在、どちらがサイトに適しているかを検討しています。迅速な回答と素晴らしいサポートを提供するために時間を割いていただきありがとうございます。私は両方の答えに投票したいのですが、私は初心者なので、16の評判になるまで待たなければなりません。それにもかかわらず、私は本当にあなたに十分に感謝することはできません。

4

2 に答える 2

1

各画像に id を与える必要があり、後で getAttribute("title") を使用してその属性を取得します。だから

<img src="../images/animals/thumbs/gorilla.jpg" id="gorilla" title="Gorilla (coloured pencils)" alt="Gorilla (coloured pencils)">

この画像のタイトルを取得するには

g = document.getElementById("gorilla")
g.getAttribute("title"); // do what you need with the attribute

ただし、次のように、html の ID にインデックス付けされたオブジェクトに余分なデータを格納する方がおそらく良いでしょう: (jsfiddle はこちら

<html>
    <head></head>
    <body>

        <a href="#" onclick ="showPicture('leopard');return false;"><img src="http://www.barrymckayart.co.uk/images/animals/thumbs/leopard.jpg" title="Lone Leopard (
        watercolour)" alt="Lone Leopard (watercolour)" /></a>

        <a href="#" onclick ="showPicture('rhino'); return false;"><img src="http://www.barrymckayart.co.uk/images/animals/thumbs/rhino.jpg" id="rhino" title="Rhino (coloured pencils)" alt="Rhino (coloured pencils)" /></a>
        <div><img src="http://www.barrymckayart.co.uk/images/animals/leopard.jpg" id="full_picture">
        </div>
        <h1 id="main_title">Leopard</h1>
        <div id="description">
            Lone Leopard
        </div>
        <div id="price">
            $3,340
        </div>

        <script>
            var data = {
                "rhino" : {
                    "title" : "Lone Rhino",
                    "desc" : "watercolor",
                    "price" : "$3,340",
                    "full" : "http://www.barrymckayart.co.uk/images/animals/rhino.jpg"
                },
                "leopard" : {
                    "title" : "Lone Leopard",
                    "desc" : "watercolor",
                    "price" : "$3,000",
                    "full" : "http://www.barrymckayart.co.uk/images/animals/leopard.jpg"
                }

            };

            function showPicture(id) {
                var main_image = document.getElementById("full_picture");
                var price = document.getElementById("price");
                var main_title = document.getElementById("main_title");
                var description = document.getElementById("description");

                main_image.src = data[id].full;
                price.innerHTML = data[id].price;
                main_title.innerHTML = data[id].title;
                description.innerHTML = data[id].desc;

            }
        </script>

    </body>

</html>

これにはインラインのonclickイベントがありますが、時間が限られている場合....

于 2012-10-18T10:50:26.520 に答える
0

個別のデータオブジェクトではなく、画像内に情報を保存したいと思います。

<img src="img/gorilla_thumbnail.jpg" class="thumbnail" title="Gorilla" alt="Gorilla" data-price="$1000" data-description="Description about the item" data-full-image="gorilla.jpg" />

また、ユーザーがサムネイルをクリックしたときにページを動的に更新するには、 jQuery（以前に使用したことがない場合は優れたドキュメントがあります）をお勧めします。

$(document).ready(function () { 
  // Following event will handle click to any img with class 'thumbnail':
  $('img.thumbnail').click(function () { 
    // 'this' will refer to the clicked thumbnail
    $('#mainImage').attr('src', 'folder/subfolder/' + $(this).attr('data-full-image')); // <img id="mainImage" /> to display full sized image
    $('#mainDescription').html($(this).attr('data-description')); // <p id="mainDescription"> or similar to display description
    $('#mainTitle').html($(this).attr('title')); // <p id="mainTitle"> or similar to display title
    // etc
  }); 
});
于 2012-10-18T11:54:19.470 に答える