缩略图库，可在单击时在同一页面上加载图像描述和完整尺寸

Question

我想创建这样的东西 。

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

Answer 1

您将需要两件事：

1. 将缩略图src值（或任何其他标识符）映射到所需的URL和描述字符串的数据Object 。
2. 缩略图的一些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属性执行相同的操作。

高温超导