При создании полоски с миниатюрами (thumbstrip) Highslide JS по умолчанию полностью копирует содержимое соответсвующего ярлыка (тега). Но иногда это приводит к нежелательным результатам.
В моем случае требовалось в ярлыке разместить подпись к изображению.
<a href="путь до полного изображения" сlass="highslide" onclick="return hs.expand(this, config1)"> <img src="путь до миниатюры" alt="описание" width="100" height="75" title="Щелкните для увеличения" class="target-image"> <div class="gallery definition">описание</div> </a>
Это приводит к тому, что подписи дублируются и в полоске миниаютюр, а так как миниатюрки в Highslide JS -- это тоже ссылки, в итоге получаем нечто такое:
<a href="путь до изображения" title="" class="highslide-active-anchor"> <img src="путь до миниютюры" alt="описание" width="100" height="75" title="Щелкните для увеличения" class="target-image"> <div class="gallery definition">описание</div> </a>
Чтобы убрать копии ссылок я воспользовался скриптом jQuery и Highslide JS API:
импортирую скрипт jqery: в заголовке<script type="text/javascript" src="assets/js/jquery-1.8.3.min.js"></script>
В основной javacript файл добавляю
hs.stripItemFormatter = function(a) {
var out = $(a).clone();
out.find('.definition').remove();
return out.html();
}
Здесь идет обращение к Highslide JS API и замещается метод создания миниатюр:
hs.stripItemFormatter = function(a) {
// ...
}
создаю объект в который клонирую входящий объект a, которым является сам тег <a>, для которого создается миниатюра:
var out = $(a).clone();
затем нахожу в клоне элемент с описанием и удаляю его, у меня поиск идет по классу, так как блок описания имеет класс definition:
out.find('.definition').remove();
после проделанных манипуляций возвращаю объект:
return out.html();
Теперь полоска с миниатюрами приняла нормальный вид:
Вы для своих нужд можете проделывать другие манипуляции.
Может быть, кому нибудь пригодится :)
