user3057089
user3057089

Reputation:

Isotope after jquery.load()


I'm trying to using ajax on wordpress ( properly jQuery .load() function ) but I have a problem because after the page load isotope doesn't work. Does anyone have an idea how to solve that?
Thanks!
Here is the entire of my code:

var $j = jQuery.noConflict();

//Isotope
$j(document).ready(function($){
    $j('#container').isotope({
          itemSelector: '.thumbportfolio',
          layoutMode: 'fitRows'       
          });
    });

$j(document).ready(function(){
    $j('#filters a').click(function(){  
      var selector = $j(this).attr('data-filter');
      $j('#container').isotope({ filter: selector });
      return false;
}); 
}); 

/* AJAX */
$j(function() {
    var $mainContent = $j("#content"),
    URL = '',
    siteURL = "http://" + top.location.host.toString(),
    $internalLinks = $j("a[href^='"+siteURL+"']"),
    hash = window.location.hash,
    $ajaxSpinner = $j("#content"),
    $el, $allLinks = $j("a");

    $internalLinks.each(function(){
        $j(this).attr("href", "#" + this.pathname);
    }).click(function($){
        $ajaxSpinner.fadeIn();
        $mainContent.animate({"opacity": "0.1"});
        $el = $j(this);
        $j(".current_page_item").removeClass("current_page_item");
        URL = $el.attr("href").substring(1);
        URL = URL + " #content";
        $allLinks.removeClass("current_link");
        $mainContent.load(URL, function(){
            $el.addClass("current_link").parent().addClass(".current_page_item");
            /*$ajaxSpinner.fadeOut();*/
            $mainContent.animate({ opacity: "1"});
        });
    });
});

Upvotes: 0

Views: 1353

Answers (1)

user3057089
user3057089

Reputation:

I solved in this way:

/* AJAX */
$j(function() {
    var $mainContent = $j("#content"),
    URL = '',
    siteURL = "http://" + top.location.host.toString(),
    $internalLinks = $j("a[href^='"+siteURL+"']"),
    hash = window.location.hash,
    $ajaxSpinner = $j("#content"),
    $el, $allLinks = $j("a");

    $internalLinks.each(function(){
        $j(this).attr("href", "#" + this.pathname);
    }).click(function($){
        $ajaxSpinner.fadeIn();
        $mainContent.animate({"opacity": "0.1"});
        $el = $j(this);
        $j(".current_page_item").removeClass("current_page_item");
        URL = $el.attr("href").substring(1);
        URL = URL + " #content";
        $allLinks.removeClass("current_link");
        $mainContent.load(URL, function(){
            $el.addClass("current_link").parent().addClass(".current_page_item");
            /*$ajaxSpinner.fadeOut();*/
            $mainContent.animate({ opacity: "1"});
            $j('#container').isotope({
                  itemSelector: '.thumbportfolio',
                  layoutMode: 'fitRows'       
             });
            $j('#filters a').click(function(){  
              var selector = $j(this).attr('data-filter');
              $j('#container').isotope({ filter: selector });
              return false;
            });     
        });
    });
});

Upvotes: 1

Related Questions