Плагин JQuery для цикла + наложение PNG + изображение альтернативного текста как конфликт заголовка - PullRequest
Новая
       9

Плагин JQuery для цикла + наложение PNG + изображение альтернативного текста как конфликт заголовка

0 голосов
/ 28 октября 2009

Я пытаюсь добиться следующего:

  • Создание галереи изображений с помощью плагина JQuery Cycle, который показывает изображения с заголовками (взяты из альтернативного текста)
  • Каждое изображение имеет абсолютный PNG, расположенный сверху для достижения эффекта закругленных углов

Вот моя галерея HTML: 

<div id="slideshow" class="pics">

<div class="photo-container" >
<img src="/path/to/image" alt="alt text as title" />
<img class="mask" src="path/to/mask" />
</div>

</div><!-- /slideshow -->

<div id="title"></div>

Вот моя функция галереи Jquery: 

$(function() {

$('#slideshow').after('<div id="nav" class="nav"><span style="margin: 0 5px 0 30px;">next image</span>').cycle({
fx:     'fade',
timeout: 0,
cleartypeNoBg: true,
pager:  '#nav',
next:    '#slideshow',
before: onBefore
});
function onBefore() {
$('#title').html(this.alt);
}
$('#nav a').after('<span>&gt;</span>')   
});
</script>

Вот мой CSS, который обрабатывает маску: 

.photo-container {
  position: relative; 
  display: block;
  overflow:hidden;
  border: none;
} 

img.mask {
  position: absolute;
  top: 0;
  left: 0;
  overflow:hidden;
  border: none;
}

Вышеприведенный текст не выводит альтернативный текст в div "title". Когда я снимаю маску, она работает: 

<div id="slideshow" class="pics">

<img src="/path/to/image" alt="alt text as title" />

</div><!-- /slideshow -->

<div id="title"></div>

Любые идеи, почему дополнительный div / image заставляет заголовок не отображаться?

Спасибо

Ответы [ 2 ]

0 голосов
/ 09 января 2010

this равно div. Вам необходимо получить alt атрибут img в пределах div.

Измените эту строку на: 

$('#title').html($(this).find('img').attr('alt'));
0 голосов
/ 28 октября 2009

В первой строке вашего кода 

$('#slideshow')
    .after('<div id="nav" class="nav"><span style="margin: 0 5px 0 30px;">next image</span>')

похоже, что вы пропустили закрывающий тег /div, так что это не похоже на генерацию правильного узла / элемента. Это может быть причиной ваших проблем? Сравните со следующим: 

$('#slideshow')
    .after('<div id="nav" class="nav"><span style="margin: 0 5px 0 30px;">next image</span></div>')

Удачи!
-Mike

...