Question

I have some problem with Orbit slider. I want to do my own html bullet menu with custom tags, like this:

<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>

but Orbit slider generated ‘li’ tags (with numbers).

This is bullet section in this plugin:

//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();
}

so, How to change this JS, that it will take alt tag from img and changed slide images?

Please help 🙂

Answer 1

If you want to change from numbers to the alt tags you can change the following line:

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

To:

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

Where YOUR_SLIDESHOW_WRAPPER_DIV would be the div that you call the plugin on (“featured” if you are using the demo code).

You also need to change the CSS for a few key reasons.

1. text-indent: -9999px; needs to be removed so the text from the alt tags will be visible.
2. width and height for the li tags needs to be set to something in which your alt tags can fit.
3. the background will still display a dot unless you remove that css attribute.

NOTE: This is the declaration to alter for the above css changes: .orbit-bullets li

ANOTHER NOTE: If you are using or tags around your images (or content) within the slideshow, you should set a data- attribute on them rather than relying on the alt tags on the images within them. If you do this you need to change attr('alt') to attr('data-alt') in the code example above. For example:

<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>