Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <ul id="thumbnails">
- <li>
- <a href="#slide1">
- <img src="img/image-1.jpg" alt="This is caption 1">
- </a>
- </li>
- <li>
- <a href="#slide2">
- <img src="img/image-2.jpg" alt="This is caption 2">
- </a>
- </li>
- <li>
- <a href="#slide3">
- <img src="img/image-4.jpg" alt="And this is some very long caption for slide 4.">
- </a>
- </li>
- // Create thumb-wrapping-elements
- $('.demo_wrapper').append('<div class="thumb-box"></div>');
- $('.thumb-box').append('<ul class="thumbs"></ul>');
- // How many thumbs? Check how many slides there is.
- var count = $("#thumbnails li").length;
- // Loop through and create li-elements and links
- for (var thumbcounter = 0; thumbcounter < count; thumbcounter++) {
- // Whats the width of each thumb?
- if (count == 1) {var thumbwidth = "100%"}
- if (count == 2) {var thumbwidth = "50%"}
- if (count == 3) {var thumbwidth = "33.33%"}
- if (count == 4) {var thumbwidth = "25%"}
- if (count == 5) {var thumbwidth = "20%"}
- if (count == 6) {var thumbwidth = "16.66%"}
- if (count == 7) {var thumbwidth = "14.28%"}
- if (count == 8) {var thumbwidth = "12,5%"}
- if (count == 9) {var thumbwidth = "11.11%"}
- if (count == 10) {var thumbwidth = "10%"}
- thumburl = thumbcounter + 1;
- $('.thumbs').append('<li><a href="#' + thumburl + '" data-slide="' + thumburl + '" style="width:' + thumbwidth + ';">
- </a></li>');
- <div class="thumb-box">
- <ul class="thumbs">
- <li>
- <a href="#1" data-slide="1">
- <img src="img/image-1.jpg" alt="This is caption 1 <a href='#link'>Even with links!</a>">
- </a>
- </li>
- <li>
- <a href="#2" data-slide="2">
- <img src="img/image-2.jpg" alt="This is caption 2">
- </a>
- </li>
- <li>
- <a href="#4" data-slide="3">
- <img src="img/image-4.jpg" alt="And this is some very long caption for slide 4.">
- </a>
- </li>
- </ul>
- </div>
- // exported and edited the thumbwidth var for efficiency
- var thumbwidth = (100/count) + '%';
- // Loop through and create li-elements and links
- for (var thumbcounter = 0; thumbcounter < count; thumbcounter++) {
- var thumburl = $('.thumbnails').find('img').eq(thumbcounter).attr('src');
- $('.thumbs').append('<li><a href="#' + thumburl + '" data-slide="' + thumburl + '" style="width:' + thumbwidth + ';"></a></li>');
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement