javascript - 将更改文本 onclick 添加到 JavaScript 库

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 这里阅读。简而言之，它重新定义了this函数中的值displayImage。

新小提琴

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

Answer 2

如果你对使用 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);
    });
});

Answer 3

我会从图像本身调用 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 图像

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 4

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

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

http://jsfiddle.net/WKfc5/