Created
October 14, 2013 17:04
-
-
Save replete/6978755 to your computer and use it in GitHub Desktop.
Add thumbnails to Orbit Bullets in Zurb Foundation 4.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html class="no-js" lang="en"><head> | |
| <head> | |
| <title>Zurb Foundation 4 Orbit Thumbnails</title> | |
| </head> | |
| <body> | |
| <style type="text/css"> | |
| .orbit-bullets.has-thumbs { | |
| padding-left: 0; | |
| bottom: 0; | |
| } | |
| .product.section .orbit-bullets.has-thumbs li { | |
| width: auto; | |
| height: auto; | |
| border: 1px solid white; | |
| background: #0059a2; | |
| -webkit-border-radius: 0 !important; | |
| -moz-border-radius: 0 !important; | |
| -ms-border-radius: 0 !important; | |
| -o-border-radius: 0 !important; | |
| border-radius: 0 !important; | |
| } | |
| .orbit-bullets.has-thumbs img { | |
| width: 2.5625em; /* whatever you want */ | |
| display: block; | |
| } | |
| </style> | |
| <ul class="carousel" data-orbit> | |
| <li data-thumb-src="/images/blah_thumb.jpg"> | |
| <a href="#"><img src="/images/blah.jpg" alt=""/></a> | |
| </li> | |
| <li data-thumb-src="/images/blah_thumb.jpg"> | |
| <a href="#"><img src="/images/blah.jpg" alt=""/></a> | |
| </li> | |
| </ul> | |
| <script src="path/to/jquery.js"></script> | |
| <script src="path/to/foundation.js"></script> | |
| <script src="path/to/foundation.orbit.js"></script> | |
| <script> | |
| $(function(){ | |
| $('.carousel') | |
| .on('orbit:ready', function() { | |
| var $this = $(this), | |
| $slides = $this.children(), | |
| $bulletContainer = $this.siblings('.orbit-bullets'), | |
| $bullets = $bulletContainer.children(); | |
| //Add styling hooks | |
| $bulletContainer | |
| .addClass('has-thumbs'); | |
| //Insert thumbnail images for each slide bullet | |
| $bullets | |
| .each(function(index, item){ | |
| console.log($slides.eq(index).data('thumb-src')); | |
| //Amends _thumb to filename of image (Umbraco automatically generates thumbs to uploaded media) | |
| var slideImageUrl = $slides.eq(index).find('img').attr('src'), | |
| umbracoThumbUrl = slideImageUrl.replace(/.([^.]*)$/,'_thumb.'+'$1'), | |
| $thumbImage = $("<img/>").attr('src', $slides.eq(index).data('thumb-src') ? $slides.eq(index).data('thumb-src') : umbracoThumbUrl); | |
| $(item).append($thumbImage); | |
| }); | |
| }) | |
| .foundation('orbit', { | |
| animation: 'fade' | |
| , timer_speed: 7000 | |
| , animation_speed: 0 | |
| , bullets: true | |
| , variable_height: true | |
| , timer: false | |
| , slide_number: false | |
| }, function (response) { | |
| // console.log('Carousel errors:'); | |
| // console.log(response.errors); | |
| // alert('response'); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment