Галерея миниатюр, которая загружает описание изображения и полный размер на той же странице при клике

Question

Я хочу создать что-то вроде этого .

С чего начать с JavaScript? Кроме того, возможно ли настроить что-то подобное с помощью плагина Nextgen Gallery или другого плагина Wordpress?

Answer 1

Вам понадобятся две вещи:

1. Данные Object, которые отображают значение миниатюры src (или любой другой идентификатор) в требуемый URL-адрес и описание Strings.
2. Некоторые Event обработчик для миниатюр, которые получают соответствующие записи в данных Object и устанавливают атрибут img Node 'highlight *, а также текст описания.

---

Итак, допустим, это ваши данные Object:

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

---

Теперь вам просто нужно получить src миниатюры img Node, котораяподнял Event и получил соответствующую запись в данных 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 ;

;тогда вам просто нужно изменить атрибут src большого img Node и текстовое содержимое Node, содержащее описание.Вы также можете сделать то же самое, используя атрибут id.

HTH