0

サムネイルとメイン コンテンツ セクションを含むシンプルなギャラリーをセットアップしようとしています。サムネイルをクリックすると、メイン コンテンツ セクションにテキストと共に画像の拡大版が表示されます。画像のコードを取得しましたが、クリックするたびにテキストを追加する方法がわかりません。まだスタイリングを開始していませんが、基本的なコードは次のとおりです。どんな助けでも大歓迎です。

ありがとう！

JavaScript:

    var mainImg = document.getElementById('Main');

    document.getElementById('One').onclick = function() {
            mainImg.src = 'http://cdn.shopify.com/s/files/1/0176/5914/files/Kaylee_Radzyminski.jpg?7297';


     mainImg.innerHTML = imagetitle;

      //alert('one clicked');
    };
    document.getElementById('Two').onclick = function() {
            mainImg.src = 'http://cdn.shopify.com/s/files/1/0176/5914/files/Mason_Hunter_Thornal.jpg?7297';
      mainImg.innerHTML = 'imagetitle';      

      //alert('two clicked');
    };

      document.getElementById('Three').onclick = function() {
            mainImg.src = 'http://cdn.shopify.com/s/files/1/0176/5914/files/Joseph_Nunez_4afb23ac-d71e-42a0-9366-ac78d65deaf4.jpg?7297';
            //alert('two clicked');
    };

CSS:

#One, #Two, #Three {
width:100px;
opacity: .5; /* css standard */
filter: alpha(opacity=50); /* internet explorer */
}

#One:hover, #Two:hover, #Three:hover {
width:100px;
opacity: 1; /* css standard */
filter: alpha(opacity=100); /* internet explorer */
}

HTML:

<img id="Main" src="http://cdn.shopify.com/s/files/1/0176/5914/files/Kaylee_Radzyminski.jpg?7297" alt="" />


<img id="One" src="http://cdn.shopify.com/s/files/1/0176/5914/files/Kaylee_Radzyminski.jpg?7297" alt="" />
<img id="Two" src="http://cdn.shopify.com/s/files/1/0176/5914/files/Mason_Hunter_Thornal.jpg?7297" alt="" />
<img id="Three" src="http://cdn.shopify.com/s/files/1/0176/5914/files/Joseph_Nunez_4afb23ac-d71e-42a0-9366-ac78d65deaf4.jpg?7297" alt="" />

http://jsfiddle.net/f9B8H/72/

4

4 に答える 4

3

これを少しきれいにしましょう。

HTML

<div id="container">
    <img id="Main" src="http://cdn.shopify.com/s/files/1/0176/5914/files/Kaylee_Radzyminski.jpg?7297" alt="" />
    <p id="caption"></p>
</div>
<img id="One" src="http://cdn.shopify.com/s/files/1/0176/5914/files/Kaylee_Radzyminski.jpg?7297" alt="I'm a soldier" />
<img id="Two" src="http://cdn.shopify.com/s/files/1/0176/5914/files/Mason_Hunter_Thornal.jpg?7297" alt="My family" />
<img id="Three" src="http://cdn.shopify.com/s/files/1/0176/5914/files/Joseph_Nunez_4afb23ac-d71e-42a0-9366-ac78d65deaf4.jpg?7297" alt="Dad" />

キャプションを alt 属性に保存した方法に注目してください。データ属性も機能します。

ジャバスクリプト

function displayImage() {
    var mainImg = document.getElementById('Main');
    var caption = document.getElementById('caption');
    mainImg.src = this.src;
    caption.innerHTML = this.alt;
}

document.getElementById('One').onclick = displayImage;
document.getElementById('Two').onclick = displayImage;
document.getElementById('Three').onclick = displayImage;

フィドル: http://jsfiddle.net/g2hY4/

サムネイルにメイン画像と同じ画像を使用しているため、簡略化された機能は非常にうまく機能します。そうしないと、大きな画像のアドレスをデータ属性にも保存できます。

ページの読み込み時に最初のキャプションを読み込む方法の 1 つを次に示します。すでに示したコードの後に​​置きます。

displayImage.call(document.getElementById('One') );

call ここについて読むことができます。this簡単に言えば、関数内の値を再定義しdisplayImageます。

新しいフィドル

考慮すべきことは、キャプションが必要な場所と、そのスタイルを CSS で設定できる方法です。それもお任せしました。#container の配置が相対に設定されている場合、絶対配置が機能します。

于 2013-09-13T21:58:48.007 に答える
0

私の実装は、属性 alt (タイトルの可能性があります) からテキストを取得します。この方法はよりエレガントになると思います

     document.getElementById('textSubtitle').innerHTML = this.alt;

http://jsfiddle.net/WKfc5/

于 2013-09-13T22:04:36.257 に答える
0

jQuery の使用に問題がない場合は、ここに私が非常に簡単に作成したものを示します。役に立つことを願っています。[フィドル]

HTML

<div id="gallery">
    <div class="preview">
        <img class="previewImg" src="http://cdn.shopify.com/s/files/1/0176/5914/files/Kaylee_Radzyminski.jpg?7297" alt="" title="" />
        <div class="previewText"></div>
    </div>

    <div class="thumbnails">
        <a href="javascript: void(0);">
            <img  src="http://cdn.shopify.com/s/files/1/0176/5914/files/Kaylee_Radzyminski.jpg?7297" alt="" title="Image 1" />
        </a>
        <a href="javascript: void(0);">
            <img  src="http://cdn.shopify.com/s/files/1/0176/5914/files/Mason_Hunter_Thornal.jpg?7297" alt="" title="Image 2" />
        </a>
        <a href="javascript: void(0);">
            <img  src="http://cdn.shopify.com/s/files/1/0176/5914/files/Joseph_Nunez_4afb23ac-d71e-42a0-9366-ac78d65deaf4.jpg?7297" alt="" title="Image 3" />
        </a>
    </div>
</div>

CSS

#gallery {
    overflow: hidden;
}
#gallery .preview {
    float: left;
    position: relative;
}
#gallery .previewImg {}
#gallery .previewText {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font: normal 12px arial;
    padding: 10px;
}
#gallery .thumbnails {
    float: left;
    width:100px;
}
#gallery .thumbnails a, #gallery .thumbnails img {
    display: block;
}
#gallery .thumbnails a img {
    width: 100%;
    opacity: .5; /* css standard */
    filter: alpha(opacity=50); /* internet explorer */
}
#gallery .thumbnails a:hover img {
    opacity: 1; /* css standard */
    filter: alpha(opacity=100); /* internet explorer */
}

JS

$(function(){
    var gallery = $("#gallery"),
        thumbnails = gallery.find(".thumbnails a"),
        previewImg = gallery.find(".previewImg"),
        previewText = gallery.find(".previewText");

    thumbnails.on("click", function(e){
        var thumbImg = $(this).find("img");
        previewImg.attr("src", thumbImg[0].src);
        previewText.html(thumbImg[0].title);
    });
});
于 2013-09-13T22:14:57.070 に答える