Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

isotope - Load a specific category and not ALL in the filters

Hey, I am working on this theme (http://themeforest.net/item/kyte-flat-onepage-responsive-wordpress-theme/full_screen_preview/5540844) and need a hand. i need to remove the “all” filter form the portfolio category cause I have many items, by default it will show a chosen category (logo).

i was able to remove the filter :

  • but all the item still load and was pointed to the isotope load section in /style/js/scripts.js but with no success : (

    here is the code:

    /*-----------------------------------------------------------------------------------*/
    /*  PORTFOLIO ARCHIVE ISOTOPE
    /*-----------------------------------------------------------------------------------*/
    jQuery(document).ready(function ($) {
        var $container = $('#portfolio-archive .items');
        $container.imagesLoaded(function () {
            $container.isotope({
                itemSelector: '#portfolio-archive .item',
                layoutMode: 'fitRows'
            });
        });
    
        $('#portfolio-archive .filter li a').click(function () {
    
            $('#portfolio-archive .filter li a').removeClass('active');
            $(this).addClass('active');
    
            var selector = $(this).attr('data-filter');
            $container.isotope({
                filter: '.logo'
            });
    
            return false;
        });
    });
    
    /*-----------------------------------------------------------------------------------*/
    /*  NAVIGATION REWRITE
    /*-----------------------------------------------------------------------------------*/
    jQuery(document).ready(function ($) {
    
        $('.page-template-page_home-php #main_menu li a').not('.page-template-page_home-php #main_menu li.external a').each(function(){
            var pathArray = window.location.href.split( '/' );
            var protocol = pathArray[0];
            var host = pathArray[2];
            var homeUrl = protocol + '//' + host + '/';
            var url = $(this).attr('href');
            if( $(this).parent().hasClass('home') || homeUrl == url ){
                $(this).attr('href', '#home');
            } else {
                var splitUrl = url.split('/');
                var lastEl = splitUrl[splitUrl.length-2];
                $(this).attr('href', '#'+lastEl );
            }
        });
    
        $(window).trigger('scroll');
    
    });
    /*-----------------------------------------------------------------------------------*/
    /*  ANCHOR SCROLL
    /*-----------------------------------------------------------------------------------*/
    /**
    * jQuery.LocalScroll - Animated scrolling navigation, using anchors.
    * Copyright (c) 2007-2009 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
    * Dual licensed under MIT and GPL.
    * Date: 3/11/2009
    * @author Ariel Flesler
    * @version 1.2.7
    **/
    (function($){var l=location.href.replace(/#.*/,'');var g=$.localScroll=function(a){$('body').localScroll(a)};g.defaults={duration:1e3,axis:'y',event:'click',stop:true,target:window,reset:true};g.hash=function(a){if(location.hash){a=$.extend({},g.defaults,a);a.hash=false;if(a.reset){var e=a.duration;delete a.duration;$(a.target).scrollTo(0,a);a.duration=e}i(0,location,a)}};$.fn.localScroll=function(b){b=$.extend({},g.defaults,b);return b.lazy?this.bind(b.event,function(a){var e=$([a.target,a.target.parentNode]).filter(d)[0];if(e)i(a,e,b)}):this.find('a,area').filter(d).bind(b.event,function(a){i(a,this,b)}).end().end();function d(){return!!this.href&&!!this.hash&&this.href.replace(this.hash,'')==l&&(!b.filter||$(this).is(b.filter))}};function i(a,e,b){var d=e.hash.slice(1),f=document.getElementById(d)||document.getElementsByName(d)[0];if(!f)return;if(a)a.preventDefault();var h=$(b.target);if(b.lock&&h.is(':animated')||b.onBefore&&b.onBefore.call(b,a,f,h)===false)return;if(b.stop)h.stop(true);if(b.hash){var j=f.id==d?'id':'name',k=$('<a> </a>').attr(j,d).css({position:'absolute',top:$(window).scrollTop(),left:$(window).scrollLeft()});f[j]='';$('body').prepend(k);location=e.hash;k.remove();f[j]=d}h.scrollTo(f,b).trigger('notify.serialScroll',[f])}})(jQuery);
    /**
     * Copyright (c) 2007-2012 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
     * Dual licensed under MIT and GPL.
     * @author Ariel Flesler
     * @version 1.4.5 BETA
     */
    ;(function($){var h=$.scrollTo=function(a,b,c){$(window).scrollTo(a,b,c)};h.defaults={axis:'xy',duration:parseFloat($.fn.jquery)>=1.3?0:1,limit:true};h.window=function(a){return $(window)._scrollable()};$.fn._scrollable=function(){return this.map(function(){var a=this,isWin=!a.nodeName||$.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!isWin)return a;var b=(a.contentWindow||a).document||a.ownerDocument||a;return/webkit/i.test(navigator.userAgent)||b.compatMode=='BackCompat'?b.body:b.documentElement})};$.fn.scrollTo=function(e,f,g){if(typeof f=='object'){g=f;f=0}if(typeof g=='function')g={onAfter:g};if(e=='max')e=9e9;g=$.extend({},h.defaults,g);f=f||g.duration;g.queue=g.queue&&g.axis.length>1;if(g.queue)f/=2;g.offset=both(g.offset);g.over=both(g.over);return this._scrollable().each(function(){if(e==null)return;var d=this,$elem=$(d),targ=e,toff,attr={},win=$elem.is('html,body');switch(typeof targ){case'number':case'string':if(/^([+-]=?)?d+(.d+)?(px|%)?$/.test(targ)){targ=both(targ);break}targ=$(targ,this);if(!targ.length)return;case'object':if(targ.is||targ.style)toff=(targ=$(targ)).offset()}$.each(g.axis.split(''),function(i,a){var b=a=='x'?'Left':'Top',pos=b.toLowerCase(),key='scroll'+b,old=d[key],max=h.max(d,a);if(toff){attr[key]=toff[pos]+(win?0:old-$elem.offset()[pos]);if(g.margin){attr[key]-=parseInt(targ.css('margin'+b))||0;attr[key]-=parseInt(targ.css('border'+b+'Width'))||0}attr[key]+=g.offset[pos]||0;if(g.over[pos])attr[key]+=targ[a=='x'?'width':'height']()*g.over[pos]}else{var c=targ[pos];attr[key]=c.slice&&c.slice(-1)=='%'?parseFloat(c)/100*max:c}if(g.limit&&/^d+$/.test(attr[key]))attr[key]=attr[key]<=0?0:Math.min(attr[key],max);if(!i&&g.queue){if(old!=attr[key])animate(g.onAfterFirst);delete attr[key]}});animate(g.onAfter);function animate(a){$elem.animate(attr,f,g.easing,a&&function(){a.call(this,e,g)})}}).end()};h.max=function(a,b){var c=b=='x'?'Width':'Height',scroll='scroll'+c;if(!$(a).is('html,body'))return a[scroll]-$(a)[c.toLowerCase()]();var d='client'+c,html=a.ownerDocument.documentElement,body=a.ownerDocument.body;return Math.max(html[scroll],body[scroll])-Math.min(html[d],body[d])};function both(a){return typeof a=='object'?a:{top:a,left:a}}})(jQuery);
    jQuery(document).ready(function($){ 
        $('.scroll,.nav-collapse .nav').localScroll({
            offset: {top:-90, left:0}
        });
        $('.nav-collapse .nav a').click(function () { $(".nav-collapse").collapse("hide") });
      });
    /*-----------------------------------------------------------------------------------*/
    /*  FORM
    /*-----------------------------------------------------------------------------------*/
    jQuery(document).ready(function ($) {
        $('.forms').dcSlickForms();
    });
    jQuery(document).ready(function ($) {
        $('.comment-form input[title], .comment-form textarea').each(function () {
            if ($(this).val() === '') {
                $(this).val($(this).attr('title'));
            }
    
            $(this).focus(function () {
                if ($(this).val() == $(this).attr('title')) {
                    $(this).val('').addClass('focused');
                }
            });
            $(this).blur(function () {
                if ($(this).val() === '') {
                    $(this).val($(this).attr('title')).removeClass('focused');
                }
            });
        });
    });
    /*-----------------------------------------------------------------------------------*/
    /*  GRID BLOG
    /*-----------------------------------------------------------------------------------*/
    jQuery(document).ready(function ($) {
        var $container = $('.grid-blog');
        $container.imagesLoaded(function () {
            $container.isotope({
                itemSelector: '.post'
            });
        });
        $(window).on('resize', function(){
            $('.grid-blog').isotope('reLayout')
        });
    });
    /*-----------------------------------------------------------------------------------*/
    /*  CALL PORTFOLIO SCRIPTS
    /*-----------------------------------------------------------------------------------*/
    function callPortfolioScripts() {
    
        jQuery('.player').fitVids();
    
        jQuery('.portfolio-banner').revolution({
            delay: 9000,
            startheight: 600,
            startwidth: 1170,
            hideThumbs: 200,
            navigationType: "bullet",
            // bullet, thumb, none
            navigationArrows: "verticalcentered",
            // nexttobullets, solo (old name verticalcentered), none
            navigationStyle: "round",
            // round,square,navbar,round-old,square-old,navbar-old, or any from the list in the docu (choose between 50+ different item), custom
            navigationHAlign: "center",
            // Vertical Align top,center,bottom
            navigationVAlign: "bottom",
            // Horizontal Align left,center,right
            navigationHOffset: 0,
            navigationVOffset: 20,
            soloArrowLeftHalign: "left",
            soloArrowLeftValign: "center",
            soloArrowLeftHOffset: 20,
            soloArrowLeftVOffset: 0,
            soloArrowRightHalign: "right",
            soloArrowRightValign: "center",
            soloArrowRightHOffset: 20,
            soloArrowRightVOffset: 0,
            touchenabled: "on",
            // Enable Swipe Function : on/off
            onHoverStop: "on",
            // Stop Banner Timet at Hover on Slide on/off
            stopAtSlide: -1,
            // Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0, then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case.
            stopAfterLoops: -1,
            // Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x, if set to -1 slide never stop automatic
            hideCaptionAtLimit: 0,
            // It Defines if a caption should be shown under a Screen Resolution ( Basod on The Width of Browser)
            hideAllCaptionAtLilmit: 0,
            // Hide all The Captions if Width of Browser is less then this value
            hideSliderAtLimit: 0,
            // Hide the whole slider, and stop also functions if Width of Browser is less than this value
            shadow: 0,
            //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows  (No Shadow in Fullwidth Version !)
            fullWidth: "off" // Turns On or Off the Fullwidth Image Centering in FullWidth Modus
        }); 
    
    };
    /*-----------------------------------------------------------------------------------*/
    /*  PORTFOLIO SLIDER
    /*-----------------------------------------------------------------------------------*/
    jQuery(document).ready(function($) {
        if ($.fn.cssOriginal != undefined) $.fn.css = $.fn.cssOriginal;
        $('.portfolio-banner').revolution({
            delay: 9000,
            startheight: 600,
            startwidth: 1170,
            hideThumbs: 200,
            navigationType: "bullet",
            // bullet, thumb, none
            navigationArrows: "verticalcentered",
            // nexttobullets, solo (old name verticalcentered), none
            navigationStyle: "round",
            // round,square,navbar,round-old,square-old,navbar-old, or any from the list in the docu (choose between 50+ different item), custom
            navigationHAlign: "center",
            // Vertical Align top,center,bottom
            navigationVAlign: "bottom",
            // Horizontal Align left,center,right
            navigationHOffset: 0,
            navigationVOffset: 20,
            soloArrowLeftHalign: "left",
            soloArrowLeftValign: "center",
            soloArrowLeftHOffset: 20,
            soloArrowLeftVOffset: 0,
            soloArrowRightHalign: "right",
            soloArrowRightValign: "center",
            soloArrowRightHOffset: 20,
            soloArrowRightVOffset: 0,
            touchenabled: "on",
            // Enable Swipe Function : on/off
            onHoverStop: "on",
            // Stop Banner Timet at Hover on Slide on/off
            stopAtSlide: -1,
            // Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0, then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case.
            stopAfterLoops: -1,
            // Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x, if set to -1 slide never stop automatic
            hideCaptionAtLimit: 0,
            // It Defines if a caption should be shown under a Screen Resolution ( Basod on The Width of Browser)
            hideAllCaptionAtLilmit: 0,
            // Hide all The Captions if Width of Browser is less then this value
            hideSliderAtLimit: 0,
            // Hide the whole slider, and stop also functions if Width of Browser is less than this value
            shadow: 0,
            //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows  (No Shadow in Fullwidth Version !)
            fullWidth: "on" // Turns On or Off the Fullwidth Image Centering in FullWidth Modus
        }); 
    });
    /*-----------------------------------------------------------------------------------*/
    /*  IMAGE HOVER
    /*-----------------------------------------------------------------------------------*/             
    jQuery(document).ready(function($) {
        $('.overlay a').prepend('<span class="more"></span>');
    });
    /*-----------------------------------------------------------------------------------*/
    /*  MENU
    /*-----------------------------------------------------------------------------------*/
    jQuery(document).ready(function($) {
          jQuery('.js-activated').dropdownHover().dropdown();
          jQuery('.player').fitVids();
          jQuery('p:empty').remove();
    });
    /*-----------------------------------------------------------------------------------*/
    /*  PAGINATION
    /*-----------------------------------------------------------------------------------*/
    jQuery(document).ready(function($) {
    
        function getPathFromUrl(url) {
          return url.split("?")[0];
        }
    
          $('body').on('click', '.pagination a', function(){
    
            $('html,body').animate({scrollTop: $('.grid-blog').offset().top - 240},400);
    
            $('.grid-blog').prepend('<div class="grid-loader"></div>');
    
            //CAPTURE HREF
            url = $(this).attr('href');
    
            //REMOVE OLD POSTS
            var $removeItem = $( '.grid-blog .post' );
            $($removeItem).fadeOut(200);
    
            $('.pagination').fadeOut(200).delay(200).remove();
    
            //GET NEW POSTS
            $.get(url, function(data){
                var filtered = jQuery(data).find('.grid-blog .post');
                $('.overlay a', filtered).prepend('<span class="more"></span>');
                $(filtered).imagesLoaded(function(){
                    $('.grid-blog').isotope('insert', filtered, function(){
                        $('.grid-blog').isotope('reLayout');
                        $('.grid-blog').isotope( 'remove',  $removeItem );
                        $('.grid-blog .grid-loader').fadeOut(200, function(){
                            $(this).remove();
                        });
                    });
                });
            });
    
            //GET NEW PAGINATION
            $.get(url, function(data){
                var pagination = jQuery(data).find('.pagination');
                $('a', pagination).each(function(){
                    var stripUrl = $(this).attr('href');
                    var stripped = getPathFromUrl(stripUrl);
                    $(this).attr('href', stripped);
                });
                if( $('body').hasClass('home') ){
                    $(pagination).appendTo('.row:has(.grid-blog) .span12');
                } else {
                    $(pagination).insertAfter('.grid-blog');
                }
            });
    
            //PREVENT WINDOW CHANGE
            return false;
          });
    });
    /*-----------------------------------------------------------------------------------*/
    /*  PRETTIFY
    /*-----------------------------------------------------------------------------------*/
    jQuery(document).ready(function () {
    window.prettyPrint && prettyPrint()
    });
    /*-----------------------------------------------------------------------------------*/
    /*  PARALLAX MOBILE
    /*-----------------------------------------------------------------------------------*/
    jQuery(document).ready(function($) {
    if( navigator.userAgent.match(/Android/i) || 
        navigator.userAgent.match(/webOS/i) ||
        navigator.userAgent.match(/iPhone/i) || 
        navigator.userAgent.match(/iPad/i)|| 
        navigator.userAgent.match(/iPod/i) || 
        navigator.userAgent.match(/BlackBerry/i)){
                $('.parallax').addClass('mobile');
    }
    });
    /*-----------------------------------------------------------------------------------*/
    /*  DATA REL
    /*-----------------------------------------------------------------------------------*/
    jQuery('a[data-rel]').each(function() {
        jQuery(this).attr('rel', jQuery(this).data('rel'));
    });
    
    User Gravatar

    avihay69

    Posted Oct 21 2013 22:38 UTC

    $10


    • Assigned To guyisra
    • Solved
    • isotope
      multiple filter
    • 19561 Views

    18 Replies


    What do you want it to show? all items? or filter it by logo?

    User Gravatar

    guyisra

    Posted Oct 21 2013 22:56 UTC

    I'm not sure I understood, but if you want to show only .logo you can put this

     $container.isotope({
                filter: '.logo'
            });
    

    inside the imagesLoaded at the top of your code, since at the moment the filter happens only on click event

    User Gravatar

    guyisra

    Posted Oct 21 2013 23:05 UTC

    i've tries many various with as following but with no success:

    jQuery(document).ready(function ($) { var $container = $('#portfolio-archive .items'); $container.imagesLoaded(function () { $container.isotope({ filter: '.logo' });

    });
    
    $('#portfolio-archive .filter li a').click(function () {
    
        $('#portfolio-archive .filter li a').removeClass('active');
        $(this).addClass('active');
    
        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: '.logo'
        });
    
        return false;
    });
    

    });

    User Gravatar

    avihay69

    Posted Oct 22 2013 0:05 UTC

    try this

    jQuery(document).ready(function ($) {
            var $container = $('#portfolio-archive .items');
            $container.imagesLoaded(function () {
                $container.isotope({
                    itemSelector: '#portfolio-archive .item',
                    layoutMode: 'fitRows'
                });
                $container.isotope({
                  filter: '.logo'
                });
            });
    });
    
    User Gravatar

    guyisra

    Posted Oct 22 2013 0:08 UTC

    Nothing, its like this section has no effect on the site...even if i delete it all it still functions the same ??? make sense ?

    User Gravatar

    avihay69

    Posted Oct 22 2013 0:16 UTC

    can you show how you included isotope in the page? or better yet, a link to the page itself

    User Gravatar

    guyisra

    Posted Oct 22 2013 0:18 UTC

    sure its the WORK > LIGHTBOX page...and thanx

    http://switcher.madeinebor.com/?theme=Kyte

    avihay

    User Gravatar

    avihay69

    Posted Oct 22 2013 0:21 UTC

    the problem seems to be that in that page (check the source) there is this

      jQuery(document).ready(function ($) {
                    var $container = $('#aq_block_1_lightbox .items');
                    $container.imagesLoaded(function () {
                        $container.isotope({
                            itemSelector: '#aq_block_1_lightbox .item',
                            layoutMode: 'fitRows'
                        });
                    });
    
                    $('#aq_block_1_lightbox .filter li a').click(function () {
    
                        $('#aq_block_1_lightbox .filter li a').removeClass('active');
                        $(this).addClass('active');
    
                        var selector = $(this).attr('data-filter');
                        $container.isotope({
                            filter: selector
                        });
    
                        return false;
                    });
                });
    

    which answers the question when you delete everything, as you said above, it still works the same..

    so try to replace it with

    jQuery(document).ready(function ($) {
                    var $container = $('#aq_block_1_lightbox .items');
                    $container.imagesLoaded(function () {
                        $container.isotope({
                            itemSelector: '#aq_block_1_lightbox .item',
                            layoutMode: 'fitRows'
                        });
                                 $container.isotope({
                            filter: selector
                        });
                    });
    
                });
    

    or delete those, and the page will use the one in scripts.js (just make sure that its correct)

    User Gravatar

    guyisra

    Posted Oct 22 2013 0:32 UTC

    firstly thanx, after days i feel i'm close to solving this and get my site up...

    do you mean this code (it was in a file called 'aq-portfolio-block')

    'Portfolio', 'size' => 'span12', 'resizable' => 0 ); //create the block parent::__construct('aq_portfolio_block', $block_options); } function form($instance) { $defaults = array( 'display_type' => 'showcase'); $display_options = array( 'showcase' => 'Showcase Portfolio', 'lightbox' => 'Lightbox Portfolio' ); $args = array( 'orderby' => 'name', 'hide_empty' => 0, 'hierarchical' => 1, 'taxonomy' => 'portfolio-category' ); $filter_options = get_categories( $args ); $instance = wp_parse_args($instance, $defaults); extract($instance); ?>

    get_field_id('title') ?>"> Title (optional)

    get_field_id('display_type') ?>"> Pick portfolio display type

    get_field_id('filter') ?>">

    " class="container showcase-wrapper"> '.$title.'

    '; ?> slug . '">' . $category->name . ''; } ?>
            <ul class="items thumbs">
    
            <?php if($filter == 'all' || $filter == false){
                $portfolio_query = new WP_Query( array( 'post_type' => 'portfolio', 'posts_per_page' => -1 ) );
            } else {
                $portfolio_query = new WP_Query( array( 'post_type' => 'portfolio', 'posts_per_page' => -1, 'tax_query' => array(
                        array(
                            'taxonomy' => 'portfolio-category',
                            'field' => 'id',
                            'terms' => $filter
                        )
                    ) ) );  
            } ?>
    
            <?php if( $portfolio_query->have_posts() ) : while( $portfolio_query->have_posts() ) : $portfolio_query->the_post(); global $post; ?>
    
              <?php get_template_part('loop/loop','portfolio'); ?>
    
            <?php endwhile; endif; wp_reset_query(); ?>
    
            </ul>
           </div>
         </div><!--/.container--> 
         <?php if( get_theme_mod('portfolio_single','0') == 0 ) : ?>
         <script type="text/javascript">
    
         /*-----------------------------------------------------------------------------------*/
         /* CONTENT SLIDER
         /*-----------------------------------------------------------------------------------*/
         /**************************************************************************
          * jQuery Plugin for Content Slider
          * @version: 1.0
          * @requires jQuery v1.8 or later
          * @author ThunderBudies
          **************************************************************************/
    
         jQuery(document).ready(function ($) {
    
    
             var speed=600;         // SLIDE OUT THE MAIN CONTENT
             var speed2=500;            // FADE IN THE NEW CONTENTS
    
    
             jQuery.fn.extend({
                 unwrapInner: function (selector) {
                     return this.each(function () {
                         var t = this,
                             c = $(t).children(selector);
                         if (c.length === 1) {
                             c.contents().appendTo(t);
                             c.remove();
                         }
                     });
                 }
             });
    
             jQuery('.dropdown-menu.filter a').each(function(i) {
                jQuery(this).click(function() {
    
                    jQuery('.container.box#<?php echo $block_id . '_showcase'; ?>').css({minHeight:'0px'});
                });
             });
    
    
    
    
            ///////////////////////////
            // GET THE URL PARAMETER //
            ///////////////////////////
            function getUrlVars(hashdivider)
                    {
                        var vars = [], hash;
                        var hashes = window.location.href.slice(window.location.href.indexOf(hashdivider) + 1).split('_');
                        for(var i = 0; i < hashes.length; i++)
                        {
                            hashes[i] = hashes[i].replace('%3D',"=");
                            hash = hashes[i].split('=');
                            vars.push(hash[0]);
                            vars[hash[0]] = hash[1];
                        }
                        return vars;
                    }
            ////////////////////////
            // GET THE BASIC URL  //
            ///////////////////////
             function getAbsolutePath() {
                    var loc = window.location;
                    var pathName = loc.pathname.substring(0, loc.pathname.lastIndexOf('/') + 1);
                    return loc.href.substring(0, loc.href.length - ((loc.pathname + loc.search + loc.hash).length - pathName.length));
             }
    
             //////////////////////////
            // SET THE URL PARAMETER //
            ///////////////////////////
             function updateURLParameter(paramVal){
                    var baseurl = window.location.pathname.split("#")[0];
                    var url = baseurl.split("#")[0];
                    if (paramVal==undefined) paramVal="";
    
                    par='#'+paramVal;
    
                    if (par=="#") par=" ";
                    window.location.replace(url+par);
            }
    
    
             var items = jQuery('#<?php echo $block_id . '_showcase'; ?> .item a');
             var deeplink = getUrlVars("#");
    
             jQuery.ajaxSetup({
                 // Disable caching of AJAX responses */
                 cache: false
             });
    
    
             // FIRST ADD THE HANDLING ON THE DIFFERENT PORTFOLIO ITEMS
             items.slice(0, items.length).each(function (i) {
                 var item = jQuery(this);
                 item.data('index', i);
    
                var hashy = window.pageYOffset;
    
    
                 if (jQuery.support.leadingWhitespace == false){
                    var conurl = jQuery(this).data('contenturl');
                    item.attr('href',conurl);
                 } else {
    
                        // THE HANDLING IN CASE ITEM IS CLICKED
                        item.click(function () {
    
                            hashy = window.pageYOffset;
    
                            jQuery('.portfolio-filter.btn-group.pull-right.open').removeClass("open");
    
                            var cur = item.data('index');
                            jQuery('body').data('curPortfolio',cur);
    
                            var hashy = window.pageYOffset;
    
                            var grid = jQuery('#<?php echo $block_id . '_showcase'; ?>');
    
                            // PREPARE THE CONTAINER FOR LOAD / REMOVE ITEMS
                            grid.css({'minHeight':grid.outerHeight()+"px",'maxHeight':grid.outerHeight()+"px", 'position':'relative','overfow':'hidden'});
                            grid.wrapInner('<div class="grid-remove"></div>');
    
                            // REMOVE THE GRID
                            var gr = grid.find('.grid-remove');
                            gr.css({width:grid.outerWidth()+"px",height:grid.height()});
                            gr.animate({'marginLeft':'-120%'},{duration:speed,queue:false, easing:"easeInOutCubic"});
                            gr.fadeOut(speed+500);
    
                            grid.append('<div class="grid-newcontent"></div>');
                            grid.find('.grid-newcontent').fadeOut(0);
                            grid.append('<div class="grid-loader"></div>');
    
    
    
                             //ADD A NEW CONTENT WRAPPER
                            var conurl = jQuery(this).data('contenturl');
                            var concon = jQuery(this).data('contentcontainer');
                            updateURLParameter(conurl);
    
                            var extraclass = "";
    
                            clearTimeout(jQuery('body').data('minhreset'));
                            // PRELOAD THE NEW ITEM
                            setTimeout(function () {
                                if (conurl != undefined && conurl.length > 0) {
    
                                    jQuery('.grid-newcontent').load(conurl + " " + concon, function () {
    
                                        //alert(jQuery('body,html').scrollTop()+"  "+grid.offset().top-60);
    
                                        jQuery('body,html').animate({
                                            scrollTop: (grid.offset().top-60) + "px"
                                        }, {
                                            duration: 600,
                                            queue: false
                                        });
    
    
                                        var gnc = grid.find('.grid-newcontent');
                                        gnc.fadeIn(speed2);
                                        //grid.animate({'maxHeight':gnc.innerHeight()+"px"});
                                        grid.css({'maxHeight':'none'});
                                        jQuery('body').data('minhreset',setTimeout(function() {
                                            grid.transition({'minHeight':'0px','maxHeight':'none',duration:400});
                                        },1500));
                                        setTimeout(function() {
                                            var callback = new Function(item.data('callback'));
                                            callback();
                                        },speed2+100);
                                        jQuery('.grid-loader').fadeOut(speed2)
                                        setTimeout(function() {
                                            jQuery('.grid-loader').remove();
                                        },speed2);
                                    });
                                }
                            }, speed + 200);
    
    
    
                            return false;
    
                        });
                    if (i==0) {
                                // SET THE BASIC BUTTON FUNCTIONS
                                jQuery('#<?php echo $block_id . '_showcase'; ?> .btn.back').live("click",function() {
                                    updateURLParameter("!");
                                    jQuery('.portfolio-filter.btn-group.pull-right.open').removeClass("open");
    
                                    var grid = jQuery('#<?php echo $block_id . '_showcase'; ?>');
                                    clearTimeout(jQuery('body').data('minhreset'));
    
                                    //alert(jQuery('body,html').scrollTop()+"  "+grid.offset().top-60);
                                    jQuery('body,html').animate({
                                        scrollTop: (grid.offset().top-60) + "px"
                                    }, {
                                        duration: 300,
                                        queue: false
                                    });
    
                                    var gr = grid.find('.grid-remove');
                                    grid.find('.grid-newcontent').fadeOut(speed2);
                                    setTimeout(function() {
                                        grid.find('.grid-newcontent').remove();
                                        grid.find('.grid-remove').find('div').first().unwrap();
                                        grid.transition({'minHeight':'0px',duration:300});
                                        var $container = $('.items').isotope('reLayout');
                                    },speed2+100);
                                    grid.css({'minHeight':gr.height()+"px", 'maxHeight':'none'});
                                    gr.animate({'marginLeft':'0'},{duration:speed,queue:false, easing:"easeInOutCubic"});
                                    gr.fadeIn(speed+800);
                                    setTimeout(function() {
                                        var $container = $('.items').isotope('reLayout');
                                    },100);
                                    return false;
                                });
    
                                jQuery('#<?php echo $block_id . '_showcase'; ?> .nav-next-item').live('click',function() {
    
                                        var cur = jQuery('body').data('curPortfolio');
                                        cur = cur + 1;
                                        if (cur == items.length) cur = 0;
    
                                        jQuery('body').data('curPortfolio',cur);
                                        var nextitem;
                                        items.slice(cur, cur + 1).each(function (re) {
    
                                            nextitem = jQuery(this);
                                        });
                                        //console.log("Next Item:"+cur);
                                        swapContents(nextitem);
                                        return false;
                                });
    
                                jQuery('#<?php echo $block_id . '_showcase'; ?> .nav-prev-item').live('click',function() {
    
                                        var cur = jQuery('body').data('curPortfolio');
                                        cur = cur - 1;
                                        if (cur < 0) cur = items.length - 1;
                                        jQuery('body').data('curPortfolio',cur);
                                        var nextitem;
                                        items.slice(cur, cur + 1).each(function (re) {
    
                                            nextitem = jQuery(this);
                                        });
                                        //console.log("Next Item:"+cur);
                                        swapContents(nextitem);
                                        return false;
                                });
                            }
                }
            });
    
            var firstfound=0;
             items.slice(0, items.length).each(function (i) {
              var item=jQuery(this);
                 if (deeplink!=undefined && deeplink.length>0 && deeplink == jQuery(this).data('contenturl')) {
                        if (firstfound==0) {
    
                            setTimeout(function() {item.click();},2000);
                            firstfound=1;
                        }
                    }
            });
    
            function swapContents(nextitem) {
    
                    clearTimeout(jQuery('body').data('minhreset'));
    
                    var grid = jQuery('#<?php echo $block_id . '_showcase'; ?>');
                    var gr = grid.find('.grid-remove');
    
                    grid.append('<div class="grid-loader"></div>');
    
                    grid.find('.grid-newcontent').fadeOut(speed2/2);
                    grid.css({'minHeight':gr.height()+"px", 'maxHeight':'none'});
    
                    setTimeout(function() {
    
                            //ADD A NEW CONTENT WRAPPER
                            var conurl = nextitem.data('contenturl');
                            var concon = nextitem.data('contentcontainer');
                            updateURLParameter(conurl);
    
    
    
                            var extraclass = "";
    
    
                            if (conurl != undefined && conurl.length > 0) {
    
                                    jQuery('.grid-newcontent').load(conurl + " " + concon, function () {
                                        var gnc = grid.find('.grid-newcontent');
                                        gnc.fadeIn(speed2);
                                        //grid.animate({'maxHeight':gnc.innerHeight()+"px"});
                                        grid.css({'maxHeight':'none'});
                                        jQuery('body').data('minhreset',setTimeout(function() {
                                            grid.css({'minHeight':'auto','maxHeight':'none'});
                                        },2500));
    
                                        setTimeout(function() {
                                            var callback = new Function(nextitem.data('callback'));
                                            callback();
                                        },speed2+100);
                                        jQuery('.grid-loader').fadeOut(speed2)
                                        setTimeout(function() {
                                            jQuery('.grid-loader').remove();
                                        },speed2);
                                    });
                                }
                    },speed2+100);
            }
    
         });
    
            jQuery(document).ready(function ($) {
                var $container = $('#<?php echo $block_id . '_showcase'; ?> .items');
                $container.imagesLoaded(function () {
                    $container.isotope({
                        itemSelector: '#<?php echo $block_id . '_showcase'; ?> .item',
                        layoutMode: 'fitRows'
                    });
                });
    
                $('#<?php echo $block_id . '_showcase'; ?> .filter li a').click(function () {
    
                    $('#<?php echo $block_id . '_showcase'; ?> .filter li a').removeClass('active');
                    $(this).addClass('active');
    
                    var selector = $(this).attr('data-filter');
                    $container.isotope({
                        filter: selector
                    });
    
                    return false;
                });
            });
    
         </script>
         <?php endif; ?>
    <?php
    break;
    case('lightbox') : ?>
        <div id="<?php echo $block_id . '_lightbox'; ?>" class="container">
          <div class="inner">
            <?php if($title) echo '<p class="lead">'.$title.'</p>'; ?>
            <div class="divide30"></div>
            <?php if($filter == 'all' || $filter == false) : ?>
                <ul class="filter">
                  <?php $categories = get_categories('taxonomy=portfolio-category');
                        foreach ($categories as $category){
                            echo '<li><a href="#" data-filter=".' . $category->slug . '">' . $category->name . '</a></li>';
                        } ?>
                </ul>
                <!-- /.filter -->
            <?php endif; ?>
    
            <ul class="items thumbs">
    
            <?php if($filter == 'all' || $filter == false){
                $portfolio_query = new WP_Query( array( 'post_type' => 'portfolio', 'posts_per_page' => -1 ) );
            } else {
                $portfolio_query = new WP_Query( array( 'post_type' => 'portfolio', 'posts_per_page' => -1, 'tax_query' => array(
                        array(
                            'taxonomy' => 'portfolio-category',
                            'field' => 'id',
                            'terms' => $filter
                        )
                    ) ) );  
            } ?>
    
            <?php if( $portfolio_query->have_posts() ) : while( $portfolio_query->have_posts() ) : $portfolio_query->the_post(); global $post; ?>
    
                <?php get_template_part('loop/portfolio','lightboxloop'); ?>
    
            <?php endwhile; endif; wp_reset_query(); ?>
    
            </ul>
           </div>
         </div><!--/.container--> 
         <script type="text/javascript">
    
            jQuery(document).ready(function ($) {
                var $container = $('#<?php echo $block_id . '_lightbox'; ?> .items');
                $container.imagesLoaded(function () {
                    $container.isotope({
                        itemSelector: '#<?php echo $block_id . '_lightbox'; ?> .item',
                        layoutMode: 'fitRows'
                    });
                });
    
                $('#<?php echo $block_id . '_lightbox'; ?> .filter li a').click(function () {
    
                    $('#<?php echo $block_id . '_lightbox'; ?> .filter li a').removeClass('active');
                    $(this).addClass('active');
    
                    var selector = $(this).attr('data-filter');
                    $container.isotope({
                        filter: selector
                    });
    
                    return false;
                });
            });
    
         </script>
    <?php break;
    endswitch;
    
    
    }
    

    }

    User Gravatar

    avihay69

    Posted Oct 22 2013 0:48 UTC

    seems so, at the end

     <script type="text/javascript">
    
            jQuery(document).ready(function ($) {
                var $container = $('#<?php echo $block_id . '_lightbox'; ?> .items');
                $container.imagesLoaded(function () {
                    $container.isotope({
                        itemSelector: '#<?php echo $block_id . '_lightbox'; ?> .item',
                        layoutMode: 'fitRows'
                    });
                });
    
                $('#<?php echo $block_id . '_lightbox'; ?> .filter li a').click(function () {
    
                    $('#<?php echo $block_id . '_lightbox'; ?> .filter li a').removeClass('active');
                    $(this).addClass('active');
    
                    var selector = $(this).attr('data-filter');
                    $container.isotope({
                        filter: selector
                    });
    
                    return false;
                });
            });
    
         </script>
    

    try changing it to

     <script type="text/javascript">
    
            jQuery(document).ready(function ($) {
                var $container = $('#<?php echo $block_id . '_lightbox'; ?> .items');
                $container.imagesLoaded(function () {
                    $container.isotope({
                        itemSelector: '#<?php echo $block_id . '_lightbox'; ?> .item',
                        layoutMode: 'fitRows'
                    });
                $container.isotope({
                    filter:  '.logo'
                });
                });
    
                $('#<?php echo $block_id . '_lightbox'; ?> .filter li a').click(function () {
    
                    $('#<?php echo $block_id . '_lightbox'; ?> .filter li a').removeClass('active');
                    $(this).addClass('active');
    
                    var selector = $(this).attr('data-filter');
                    $container.isotope({
                        filter: selector
                    });
    
                    return false;
                });
            });
    
         </script>
    
    User Gravatar

    guyisra

    Posted Oct 22 2013 0:51 UTC

    Solution

    This didn't solve your task? Get your own custom solution.

    man you rock!!!!!

    it worked the only thing i need is the "logo" link to appear active...

    please let me know how to pay my fee...

    avihay

    User Gravatar

    avihay69

    Posted Oct 22 2013 1:00 UTC

    Horray, glad it works!

    for making the .logo active, just addClass to it right below the isotope filter, just make sure your selector is that specific one and not the other .logo in the page.

    User Gravatar

    guyisra

    Posted Oct 22 2013 1:04 UTC

    sorry not a programmer...what do you mean with addClass ?

    thanks for everything!

    User Gravatar

    avihay69

    Posted Oct 22 2013 1:27 UTC

    try adding this

    $("#aq_block_1_lightbox ul.filter a[data-filter='.logo']").addClass('active');
    
    User Gravatar

    guyisra

    Posted Oct 22 2013 1:38 UTC

    in this code ? where ?

    jQuery(document).ready(function ($) { var $container = $('# .items'); $container.imagesLoaded(function () { $container.isotope({ itemSelector: '# .item', layoutMode: 'fitRows' }); $container.isotope({ filter: '.logo' }); }); $('# .filter li a').click(function () { $('# .filter li a').removeClass('active'); $(this).addClass('active'); var selector = $(this).attr('data-filter'); $container.isotope({ filter: selector }); return false; }); });
    User Gravatar

    avihay69

    Posted Oct 22 2013 1:55 UTC

    sorry,

    make it look like this

     <script type="text/javascript">
    
            jQuery(document).ready(function ($) {
                var $container = $('#<?php echo $block_id . '_lightbox'; ?> .items');
                $container.imagesLoaded(function () {
                    $container.isotope({
                        itemSelector: '#<?php echo $block_id . '_lightbox'; ?> .item',
                        layoutMode: 'fitRows'
                    });
                $container.isotope({
                    filter:  '.logo'
                });
             $("#aq_block_1_lightbox ul.filter a[data-filter='.logo']").addClass('active');
    
                });
    
                $('#<?php echo $block_id . '_lightbox'; ?> .filter li a').click(function () {
    
                    $('#<?php echo $block_id . '_lightbox'; ?> .filter li a').removeClass('active');
                    $(this).addClass('active');
    
                    var selector = $(this).attr('data-filter');
                    $container.isotope({
                        filter: selector
                    });
    
                    return false;
                });
            });
    
         </script>
    
    User Gravatar

    guyisra

    Posted Oct 22 2013 1:57 UTC

    i got to ask...if i view source locally (where i work on my site) i get this '#6592_lightbox value can this be reason why the active doesn't work ?:

        jQuery(document).ready(function ($) {
            var $container = $('#6592_lightbox .items');
            $container.imagesLoaded(function () {
                $container.isotope({
                    itemSelector: '#6592_lightbox .item',
                    layoutMode: 'fitRows'
                });
            $container.isotope({
                filter:  '.logo'
    
            });
    

    });

            $('#6592_lightbox .filter li a').click(function () {
    
                $('#6592_lightbox .filter li a').removeClass('active');
                $(this).addClass('active');
    
                var selector = $(this).attr('data-filter');
                $container.isotope({
                    filter: selector
                });
    
                return false;
            });
        });
    
     </script>
    
    User Gravatar

    avihay69

    Posted Oct 22 2013 2:12 UTC

    sorry didn't work but the main issue is fixed and i am happy...this would be the icing on the cake but if it is too much to ask i will understand...

    User Gravatar

    avihay69

    Posted Oct 22 2013 2:49 UTC

    Add a reply

    By posting a reply on CodersClan you agree to our Terms & Conditions