Собственное слайд-меню / слайдер орбиты - PullRequest
Новая
       15

Собственное слайд-меню / слайдер орбиты

1 голос
/ 30 июля 2011

У меня проблемы с Ползунок орбиты . Я хочу создать свое собственное HTML-меню с настраиваемыми тегами, например: 

<div id="thumblist">
    <ul>
        <li data-tags="group1"><img alt="1" src="thumbs/nameqq.png" /></li>
        <li data-tags="group1"><img alt="2" src="thumbs/nameww.png" /></li>
        <li data-tags="group1"><img alt="3" src="thumbs/nameee.png" /></li>
    </ul>
</div>

но ползунок Orbit генерировал теги 'li' (с числами).

Это раздел пули в этом плагине: 

//Bullet Nav Setup
if(options.bullets) { 
    var bulletHTML = '<ul class="orbit-bullets"></ul>';             
        orbitWrapper.append(bulletHTML);
        var bullets = $('ul.orbit-bullets');

        for(i=0; i<numberSlides; i++) {
            var liMarkup = $('<li>'+(i+1)+'</li>');

            $('ul.orbit-bullets').append(liMarkup);
            liMarkup.data('index',i);
            liMarkup.click(function() {
            stopClock();
            shift($(this).data('index'));
            });
        }
        setActiveBullet();
}

Итак, как изменить этот JS, чтобы он брал alt tag из img и изменял изображения слайдов?

Пожалуйста, помогите:)

1 Ответ

0 голосов
/ 30 июля 2011

Если вы хотите перейти от цифр к тэгам alt, вы можете изменить следующую строку:

var liMarkup = $('<li>'+(i+1)+'</li>');

Кому: 

var liMarkup = $('<li>' + $('#YOUR_SLIDESHOW_WRAPPER_DIV').children().eq(i).attr('alt') + '</li>');

Где YOUR_SLIDESHOW_WRAPPER_DIV - это div, для которого вы вызываете плагин («признакам», если вы используете демонстрационный код).

Вам также необходимо изменить CSS по нескольким ключевым причинам.

  1. текстовый отступ: -9999px; необходимо удалить, чтобы текст из тегов alt был виден.
  2. ширина и высота тегов li должны быть такими, чтобы ваши теги alt могли поместиться.
  3. фон будет по-прежнему отображать точку, если вы не удалите этот атрибут css.

ПРИМЕЧАНИЕ. Это объявление об изменении вышеуказанных изменений CSS: .orbit-bullets li

ДРУГОЕ ПРИМЕЧАНИЕ. Если вы используете теги или изображения вокруг ваших изображений (или контента) в слайд-шоу, вы должны установить для них атрибут data, а не полагаться на alt-теги на изображениях внутри них. Если вы сделаете это, вам нужно изменить attr('alt') на attr('data-alt') в примере кода выше. Например: 

<div id="featured">
    <a data-alt="this is an alt tag of sorts"><img src="..."></a>
    <img data-alt="yet another data-alt tag" src="...">
    <div data-alt="third and final data-alt tag"><img src="...">some text on this one too</div>
</div>
...