[英]Thumbnail gallery that loads image description and full size on same page on click
I want to create something like this . 我想创建这样的东西 。
Where do I get started with the javascript? 我从哪里开始使用javascript? Also, is it possible to customize something like this with the Nextgen Gallery plugin or another Wordpress plugin? 另外,是否可以使用Nextgen Gallery插件或其他Wordpress插件自定义类似内容?
You will need two things: 您将需要两件事:
Object
that maps the thumbnail src
value (or any other identifer) to the required URL and description Strings. 将缩略图src
值(或任何其他标识符)映射到所需的URL和描述字符串的数据Object
。 Event
handler for the thumbnails that get the respective entries in the data Object
and set the highlight img
Node
's src
attribute as well as the description text. 缩略图的一些Event
处理程序,用于获取数据Object
的各个条目并设置突出显示img
Node
的src
属性以及描述文本。 So, let's say this is your data Object
: 因此,假设这是您的数据Object
:
var data = {
<src>: {
"url": <url for the large image> ,
"text": <description for the large image>
} ,
<another src>: {
//..
}
}
Now, you just have to get the src
of the thumbnail img
Node
that raised the Event
and get its respective entry in the data Object
, 现在,您只需获取引发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 ;
; ; then you simply have to change the src
attribute of the large img
Node
and the text content of the Node
containing the description. 那么您只需更改大img
Node
的src
属性和包含描述的Node
的文本内容。 You could also do the same thing using the id
attribute. 您还可以使用id
属性执行相同的操作。
HTH 高温超导
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.