Question

我正在尝试设置一个包含缩略图和主要内容部分的简单图库。单击缩略图时，我希望图像的较大版本以及要在主要内容部分中显示的文本。我已经得到了图像的代码，但无法弄清楚如何在每次点击时添加文字。我还没有开始做任何样式，但基本代码如下。任何帮助将非常感激。

谢谢！

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/

Answer 1

让我们稍微清理一下。

<强> 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属性中的。数据属性也可以起作用。

<强> JAVASCRIPT

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/

简化功能非常有效，因为您使用与缩略图相同的图像作为主图像。如果你不这样做，我们也可以将大图像地址存储在数据属性中。

这是加载页面时加载第一个标题的一种方法。把它放在我已经给你看过的代码之后：

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

您可以阅读call here。简而言之，它重新定义了this函数中displayImage的值。

New fiddle

要考虑的是你想要标题的位置以及它的样式可以在CSS中设置。我也把它留给了你。如果#container的定位设置为相对，则绝对定位将起作用。

Answer 2

我会从图像本身调用onclick，而不是通过JS将onclick添加到图像中你的工作量增加了一倍。

您希望在何处显示文字？
如果必须在图像顶部显示，则必须使图像成为div左右的背景图像。
如果文字必须位于图像的上方/下方，请在图像上方/下方放置一个范围并为其提供ID。

使用范围

JS：

function showBig(srcBig, title) {
    var mainImg = document.getElementById('MainImg');
    var mainText = document.getElementById('MainText');
    mainImg.src = srcBig;
    mainImg.title = title;
    mainText.innerHTML = title;
}

HTML：

<div id="main">
    <span id="MainText">Title will come here</span>
    <img src="Default Img" alt="Big img's will come here" />
</div>

<img src="URL of thumbnail (e.g. smaller version)" alt="" onClick="showBig('URL of big version', 'Title')" />

使用BG-image

JS：

function showBig(srcBig, title) {
    var mainDiv = document.getElementById('MainDiv');
    MainDiv.style.backgroundImage = srcBig;
    MainDiv.innerHTML = title;
}

HTML：

<div id="MainDiv">
</div>

<img src="URL of thumbnail (e.g. smaller version)" alt="" onClick="showBig('URL of big version', 'Title')" />

顺便说一下，你仍然可以通过JS添加onClicks：

document.getElementById("yourImg").onclick = showBig('URL of Big', 'Title');

顺便说一下，不要在缩略图中使用相同的img 您可能会使用一些需要更长时间才能加载的大图像，然后通过CSS将其显示得更小制作一个较小的版本（例如100x100px或拇指的大小），只在调用onClick时加载更大的版本。

另外，你最好使用像.thumbs这样的CSS类来设置拇指的样式否则，每次添加新图像时，您都必须在CSS文件的列表中添加新ID。

JSFiddle

Answer 3

我的实现从属性alt获取文本（可能是标题）我认为这种方式可以更优雅

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

http://jsfiddle.net/WKfc5/

Answer 4

如果您对使用jQuery没问题，我可以快速完成这些工作。我希望它有用。 [Fiddle]

<强> 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);
    });
});

将更改文本添加到JavaScript库中

4 个答案: