JAVASCRIPT 21
Sorting.js Guest on 13th July 2020 10:52:56 AM
  1. /* SORTING */
  2.  
  3. $(function(){
  4.   var $container = $('.portfolio_block');
  5.  
  6.   $container.isotope({
  7.         itemSelector : '.element'
  8.   });
  9.    
  10.   var $optionSets = $('#options .optionset'),
  11.           $optionLinks = $optionSets.find('a');
  12.  
  13.   $optionLinks.click(function(){
  14.         var $this = $(this);
  15.         // don't proceed if already selected
  16.         if ( $this.parent('li').hasClass('selected') ) {
  17.           return false;
  18.         }
  19.         var $optionSet = $this.parents('.optionset');
  20.         $optionSet.find('.selected').removeClass('selected');
  21.         $optionSet.find('.fltr_before').removeClass('fltr_before');
  22.         $optionSet.find('.fltr_after').removeClass('fltr_after');
  23.         $this.parent('li').addClass('selected');
  24.         $this.parent('li').next('li').addClass('fltr_after');
  25.         $this.parent('li').prev('li').addClass('fltr_before');
  26.  
  27.         // make option object dynamically, i.e. { filter: '.my-filter-class' }
  28.         var options = {},
  29.                 key = $optionSet.attr('data-option-key'),
  30.                 value = $this.attr('data-option-value');
  31.         // parse 'false' as false boolean
  32.         value = value === 'false' ? false : value;
  33.         options[ key ] = value;
  34.         if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
  35.           // changes in layout modes need extra logic
  36.           changeLayoutMode( $this, options )
  37.         } else {
  38.           // otherwise, apply new options
  39.           $container.isotope(options);   
  40.         }      
  41.         return false;  
  42.   });
  43.         $('.masonry').find('img').load(function(){
  44.                 $container.isotope('reLayout');
  45.         });    
  46. });
  47.  
  48. jQuery.fn.portfolio_addon = function(addon_options) {
  49.         //Set Variables
  50.         var addon_el = $(this),
  51.                 addon_base = this,
  52.                 img_count = addon_options.items.length,
  53.                 img_per_load = addon_options.load_count,
  54.                 $newEls = '',
  55.                 loaded_object = '',
  56.                 $container = $('.image-grid');
  57.        
  58.         $('.btn_load_more').click(function(){
  59.                 $newEls = '';
  60.                 loaded_object = '';                                                                        
  61.                 loaded_images = $container.find('.added').size();
  62.                 if ((img_count - loaded_images) > img_per_load) {
  63.                         now_load = img_per_load;
  64.                 } else {
  65.                         now_load = img_count - loaded_images;
  66.                 }
  67.                
  68.                 if ((loaded_images + now_load) == img_count) $(this).fadeOut();
  69.  
  70.                 if (loaded_images < 1) {
  71.                         i_start = 1;
  72.                 } else {
  73.                         i_start = loaded_images+1;
  74.                 }
  75.  
  76.                 if (now_load > 0) {
  77.                         if (addon_options.type == 0) {
  78.                                 //1 Column Portfolio Type
  79.                                 for (i = i_start-1; i < i_start+now_load-1; i++) {
  80.                                         loaded_object = loaded_object + '<div data-category="'+ addon_options.items[i].category +'" class="'+ addon_options.items[i].category +' element row-fluid added"><div class="filter_img span6"><a href="'+ addon_options.items[i].url +'"><img src="'+ addon_options.items[i].src +'" alt="" width="570" height="284"></a></div><div class="portfolio_dscr span6"><div class="portfolio_preview_head"><span class="post_type post_type_'+ addon_options.items[i].post_type +'"></span><a href="'+ addon_options.items[i].url +'"><h5>'+ addon_options.items[i].title +'</h5></a><div class="portfolio_descr_info"><div class="portfolio_descr_date">'+ addon_options.items[i].date +'</div><div class="portfolio_descr_url">Project URL: <a href="'+ addon_options.items[i].url +'">View Project</a></div><div class="portfolio_descr_time">Time spent: <span>'+ addon_options.items[i].time_spent +'</span></div></div><div class="portfolio_descr_in">In <a href="#">'+ addon_options.items[i].category +'</a></div></div>'+ addon_options.items[i].description +'<a href="'+ addon_options.items[i].url +'" class="more-link">Read more...</a></div></div>';
  81.                                 }
  82.                         } else if (addon_options.type == 1) {
  83.                                 //2 Columns Portfolio Type
  84.                                 for (i = i_start-1; i < i_start+now_load-1; i++) {
  85.                                         loaded_object = loaded_object + '<div data-category="'+ addon_options.items[i].category +'" class="'+ addon_options.items[i].category +' element added"><div class="filter_img"><img src="'+ addon_options.items[i].src +'" alt="" width="570" height="284"><div class="portfolio_info_wrapper"><span class="post_type post_type_'+ addon_options.items[i].post_type +'"></span><h5><a href="'+ addon_options.items[i].url +'">'+ addon_options.items[i].title +'</a></h5><div class="portfolio_descr_info"><div class="portfolio_descr_date">'+ addon_options.items[i].date +'</div><div class="portfolio_descr_url">Project URL: <a href="'+ addon_options.items[i].url +'">View Project</a></div><div class="portfolio_descr_time">Time spent: <span>'+ addon_options.items[i].time_spent +'</span></div></div><div class="portfolio_descr_in">In <a href="#">'+ addon_options.items[i].category +'</a></div></div><div class="portfolio_dscr">'+ addon_options.items[i].description +' <a href="'+ addon_options.items[i].url +'">Read more...</a></div></div></div>';
  86.                                 }
  87.                         } else {
  88.                                 //3 and 4 Columns Portfolio Type
  89.                                 for (i = i_start-1; i < i_start+now_load-1; i++) {
  90.                                         loaded_object = loaded_object + '<div data-category="'+ addon_options.items[i].category +'" class="'+ addon_options.items[i].category +' element added"><div class="filter_img"><img src="'+ addon_options.items[i].src +'" alt="" width="370" height="224"><div class="portfolio_info_wrapper"><h5><a href="'+ addon_options.items[i].url +'">'+ addon_options.items[i].title +'</a></h5></div><div class="portfolio_dscr"><span class="post_type post_type_'+ addon_options.items[i].post_type +'"></span><p>'+ addon_options.items[i].description +'</p><a href="'+ addon_options.items[i].url +'">Read more...</a></div></div></div>';
  91.                                 }
  92.                         }
  93.  
  94.                         $newEls = $(loaded_object);
  95.                         $container.isotope('insert', $newEls, function() {
  96.                                 $container.isotope('reLayout');
  97.                         });
  98.                 }
  99.         });
  100. }

Paste is for source code and general debugging text.

Login or Register to edit, delete and keep track of your pastes and more.

Raw Paste

Login or Register to edit or fork this paste. It's free.