Может ли javascript устанавливать атрибуты, такие как ссылки и заголовок, на основе идентификатора изображения? - PullRequest
Новая
       7

Может ли javascript устанавливать атрибуты, такие как ссылки и заголовок, на основе идентификатора изображения?

2 голосов
/ 07 мая 2011

Я создаю галерею изображений с 600 миниатюрами фотографий.Все миниатюры имеют одинаковый размер, и они должны вести себя одинаково.Нажатие на миниатюру откроет маленькую версию изображения, и есть увеличитель изображения с именем jQZoom, который позволит посетителям увидеть фотографию более подробно.(http://www.mind -projects.it / projects / jqzoom / )

Вот код, который я использую для типичного эскиза (номер 462): 

<a  href='javascript:void(0);' title="Plate 462" rel="{gallery: 'gal1', smallimage: './Vol4/Small/tafel_462.jpg',largeimage: './Vol4/Large/tafel_462.jpg'}">
<img src="Vol4/Thumbs/tafel_462.jpg" width="94" height="150" border="0" /></a>
* 1008Проблема в том, что кажется, что я пытаюсь сделать много кода.В частности, каждый раз, когда я добавляю миниатюру, мне нужно 4 раза набирать номер нового изображения (для заголовка и источников 3 размеров изображения).

Нет ли способа, которым я мог бы просто поставитьв номер изображения один раз (в качестве идентификатора или что-то) и иметь JavaScript интерпретировать, чтобы назначить заголовок и три ссылки?

Ответы [ 2 ]

2 голосов
/ 07 мая 2011

Что вы думаете о функции для возврата желаемого HTML? 

function getImageThumb(src, title) {
    return $('<a href="javascript:void(0);" title="' + title + '" rel="{gallery: \'gal1\', smallimage: \'./Vol4/Small/' + src + '.jpg\', largeimage: \'./Vol4/Large/' + src + '.jpg\'}">' +
             '<img src="./Vol4/Thumbs/' + src + '.jpg" alt="' + title + '" width="94" height="150" border="0" /></a>');
}

Так что вы можете создать каждый большой палец, как: 

$("#container").append(getImageThumb('tafel_462', 'Plate 462'));
$("#container").append(getImageThumb('another_img', 'An Example'));
0 голосов
/ 07 мая 2011

Да, вы можете. Ваш a html должен иметь два атрибута, скажем data-imgsrc и data-gallery, и удалить атрибут rel a и атрибут src img, например: 

<a  href='javascript:void(0);' title="Plate 462" data-gallery="gal1" data-imgsrc="tafel_462.jpg">
<img width="94" height="150" border="0" /></a>

Тогда вы сделаете: 

$(document).ready(function(){
  $("a[data-imgsrc]").each(function(){  //Customize your selector
     var imgsrc = $(this).attr("data-imgsrc");
     var relObj = {
        "gallery": $(this).attr("data-gallery"),
        "smallimage": "./Vol4/Small/"+imgsrc,
        "largeimage": "./Vol4/Large/"+imgsrc
     };
     $(this).attr("rel", JSON.stringify(relObj));
     $(this).find("img").attr("src", "Vol4/Thumbs/"+imgsrc);
  });
});

Если ваша галерея не переменная, вы можете удалить атрибут data-gallery и просто вставить 'gallery1' в js.

Вот и все. Надеюсь это поможет. Приветствия

...