123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130 |
- <script type="text/javascript">
- $(document).ready(function() {
- $('#toc').toc({ minimumHeaders: 0, listType: 'ul', showSpeed: 0, headers: 'h2,h3,h4' });
- });
- </script>
- <!-- shuffle -->
- <script>
- var shuffleme = (function( $ ) {
- 'use strict';
- var $grid = $('#grid'),
- $filterOptions = $('.filter-options'),
- $sizer = $grid.find('.shuffle_sizer'),
- init = function() {
- // None of these need to be executed synchronously
- setTimeout(function() {
- listen();
- setupFilters();
- }, 100);
- // instantiate the plugin
- $grid.shuffle({
- itemSelector: '[class*="col-"]',
- sizer: $sizer
- });
- },
- // Set up button clicks
- setupFilters = function() {
- var $btns = $filterOptions.children();
- $btns.on('click', function() {
- var $this = $(this),
- isActive = $this.hasClass( 'active' ),
- group = isActive ? 'all' : $this.data('group');
- // Hide current label, show current label in title
- if ( !isActive ) {
- $('.filter-options .active').removeClass('active');
- }
- $this.toggleClass('active');
- // Filter elements
- $grid.shuffle( 'shuffle', group );
- });
- $btns = null;
- },
- // Re layout shuffle when images load. This is only needed
- // below 768 pixels because the .picture-item height is auto and therefore
- // the height of the picture-item is dependent on the image
- // I recommend using imagesloaded to determine when an image is loaded
- // but that doesn't support IE7
- listen = function() {
- var debouncedLayout = $.throttle( 300, function() {
- $grid.shuffle('update');
- });
- // Get all images inside shuffle
- $grid.find('img').each(function() {
- var proxyImage;
- // Image already loaded
- if ( this.complete && this.naturalWidth !== undefined ) {
- return;
- }
- // If none of the checks above matched, simulate loading on detached element.
- proxyImage = new Image();
- $( proxyImage ).on('load', function() {
- $(this).off('load');
- debouncedLayout();
- });
- proxyImage.src = this.src;
- });
- // Because this method doesn't seem to be perfect.
- setTimeout(function() {
- debouncedLayout();
- }, 500);
- };
- return {
- init: init
- };
- }( jQuery ));
- $(document).ready(function() {
- shuffleme.init();
- });
- </script>
- <!-- new attempt-->
- <script>
- $(document).ready(function() {
-
- /* initialize shuffle plugin */
- var $grid = $('#grid');
-
- $grid.shuffle({
- itemSelector: '.item' // the selector for the items in the grid
- });
-
- });</script>
- <script>
- $('#filter a').click(function (e) {
- e.preventDefault();
-
- // set active class
- $('#filter a').removeClass('active');
- $(this).addClass('active');
-
- // get group name from clicked item
- var groupName = $(this).attr('data-group');
-
- // reshuffle grid
- $grid.shuffle('shuffle', groupName );
- });</script>
|