Reputation:
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
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