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 :)
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.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.