单击时在同一页面上加载图像描述和全尺寸的缩略图库答案

【问题标题】：Thumbnail gallery that loads image description and full size on same page on click单击时在同一页面上加载图像描述和全尺寸的缩略图库
【发布时间】：2011-10-21 07:47:00
【问题描述】：

我想创建something like this。

我从哪里开始使用 javascript？另外，是否可以使用 Nextgen Gallery 插件或其他 Wordpress 插件自定义类似的内容？

【问题讨论】：

我认为这个问题更适合网站管理员。此外，您可以尝试在谷歌上搜索“javascript 照片库”。
如果您有更具体的问题（例如“how do I change an image with JavaScript?”），请在此处发布。

标签： javascript image wordpress gallery thumbnails

【解决方案1】：

你需要两件事：

数据 Object 将缩略图 src 值（或任何其他标识符）映射到所需的 URL 和描述字符串。
一些用于缩略图的Event 处理程序，用于获取数据Object 中的相应条目并设置突出显示img Node 的src 属性以及描述文本。

所以，假设这是您的数据Object：

var data = {
    <src>: {
        "url": <url for the large image> ,
        "text": <description for the large image>
    } ,
    <another src>:  {
        //..
    }
}

现在，您只需获取引发Event 的缩略图img Node 的src 并在数据Object 中获取其各自的条目，

var img = /* the reference to the img Node that raised the event */ ;
var src = img.getAttribute("src") ;

var entry = data[src] ;
var url = entry.url , text = url.text ;

;那么您只需更改大 img Node 的 src 属性和包含描述的 Node 的文本内容。你也可以使用id 属性来做同样的事情。

HTH

【讨论】：