Portfolio Issue with Isotope filter - javascript

This has been a nightmare. I bought a Wordpress template but the support is offering me no help. The issue is that when you click one of the list items that acts like a filter sometimes doesn't work properly when you go to the lightbox gallery (clicking the picture). The main problem I encounter is when the user tries to hover the section before it has charged the lightbox shows a mix of pictures and not only the pictures of the section that you are. So far the Javascript related code is this:
$(window).load(function(){
// Container
var $container = $('.isotope-container');
$container.isotope({
filter:'*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
// Isotope Button
$('#options li a').click(function(){
var n = jQuery.queue( $( 'class' )[ 0 ], 'fx' );
var selector = $(this).attr('data-filter');
$container.isotope({
filter:selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
return false;
});
var $optionSets = $('#options'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ($this.hasClass('selected')) {
return false;
}
var $optionSet = $this.parents('#options');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
$('.foliobox').removeClass('active');
$container.isotope( 'on', 'layoutComplete', function() {
$('.foliobox').each(function(){
$this = $(this);
if($this.is(':visible')){
$this.addClass('active')
}
})
} )
});
});
I guess that this is isotope caller.
I can post the rest of the code that calls the lightbox. I guess as an idea what could be done is add a fake button in the top of the gallery with a z-index and hide it when the function is complete. Could you help me with that? I am not good at all at javascript.
Here is the website: http://donarnold.com.au/
Many thanks!

Related

Using JQuery to resize and realign images doesn't work on first load

So I am relatively inexperienced with Jquery. What I did was purchase a wordpress theme from theme forest and it has a portfolio section which is supposed to work either as a masonry or grid layout. Neither of which load correctly on first load. The theme uses the Isotope, and I think this link explains what needs to be done: http://isotope.metafizzy.co/appendix.html#imagesloaded
Below is the code that I think calls this function, and the site can be viewed here https://www.roseryflowers.com/bridal-gallery/
jQuery(document).ready(function($) {
/*-- Portfolio --*/
if ($('.portfolio-items').length > 0) {
$container = $('.portfolio-items');
$container.isotope({filter: '.element'});
$(window).trigger('resize');
$('.portfolio-links a').click(function(e){
e.preventDefault();
var $this = $(this);
if ($this.hasClass('active')) {
return false;
}
$this.parents('.portfolio-links').find('.active').removeClass('active');
$this.parent().addClass('active');
$this.addClass('active');
var selector = $this.attr('data-filter');
$container.isotope( {filter: selector} );
});
}
I am at a loss for what to do here. Any help would be appreciated. I even implemented a preloader.
Remove the imagesloaded.js file from your page and change the line with
$(window).trigger('resize');
to
$(window).load(function(){ $(window).trigger('resize'); });
From Isotope's documentation
Unloaded images can throw off Isotope layouts and cause item elements
to overlap. imagesLoaded resolves this issue. imagesLoaded works by
triggering a callback after all child images have been loaded.
initialize Isotope after all images have loaded
var $container = $('#container').imagesLoaded( function() {
$container.isotope({
//options
});
});
This could be the problem
There is a little bit more about...
EDIT
your wrapper tag is ".portfolio-items" then try this
var $container = $('.portfolio-items').imagesLoaded(function () {
if ($('.portfolio-items').length > 0) {
$container = $('.portfolio-items');
$container.isotope({ filter: '.element' });
$(window).trigger('resize');
$('.portfolio-links a').click(function (e) {
e.preventDefault();
var $this = $(this);
if ($this.hasClass('active')) {
return false;
}
$this.parents('.portfolio-links').find('.active').removeClass('active');
$this.parent().addClass('active');
$this.addClass('active');
var selector = $this.attr('data-filter');
$container.isotope({ filter: selector });
});
}
});
You need to be sure to add ImagesLoaded to your project https://github.com/desandro/imagesloaded

Masonry: Layout isn't triggered when browser is resized

Here is the site.
When I resize my window, the layout isn't triggered. So after I resize, I have to refresh the browser in order to see the reconfigured layout. I looked through the Masonry docs and found this page which I think describes my problem: http://masonry.desandro.com/methods.html#bindresize
$container.masonry('bindResize')
However, I'm not sure where I'm supposed to implement it. Below is the code that I'm currently using.
if(jQuery().isotope) {
$container = jQuery('#masonry');
$container.imagesLoaded( function() {
$container.isotope({
itemSelector : '.item',
masonry: {
columnWidth: $(document).width() > 1035 ? 240 : 320
},
getSortData: {
order: function($elem) {
return parseInt($elem.attr('data-order'));
}
},
sortBy: 'order'
}, function() {
// Isotope Chrome Fix
setTimeout(function () {
jQuery('#masonry').isotope('reLayout');
}, 1000);
});
});
// filter items when filter link is clicked
$container = jQuery('#masonry');
jQuery('#filter li').click(function(){
jQuery('#filter li').removeClass('active');
jQuery(this).addClass('active');
var selector = jQuery(this).find('a').attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
}
Can someone help me out?
if(jQuery().isotope) {
$container = jQuery('#masonry');
$container.imagesLoaded( function() {
$container.isotope({
itemSelector : '.item',
masonry: {
columnWidth: 240
},
getSortData: {
order: function($elem) {
return parseInt($elem.attr('data-order'));
}
},
sortBy: 'order'
}, function() {
// Isotope Chrome Fix
setTimeout(function () {
jQuery('#masonry').isotope('reLayout');
}, 1000);
});
});
// filter items when filter link is clicked
$container = jQuery('#masonry');
jQuery('#filter li').click(function(){
jQuery('#filter li').removeClass('active');
jQuery(this).addClass('active');
var selector = jQuery(this).find('a').attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
//added this line
jQuery(window).resize(function(){jQuery('#masonry').isotope('reLayout'); });
}
I have just added a single line in last and it will work.
Did you tried to insert the bindResize Snippet after your $container var?
// filter items when filter link is clicked
$container = jQuery('#masonry');
$container.masonry('bindResize');
jQuery('#filter li').click(function(){
...
}
The bindResize method should triggered on the Resize-Event so you don’t need to add it to the event manually. But the Amit’s solution should work too. But can you please remove the refreshing on the demo-site on resize? i can’t really test anything there.

Combining masonry, imagesLoaded with ajax functionality

I'm making a site where all internal links make the current page fade out and the new page fade in. This works great for me now. The problem is that I'm trying to combine it with the great masonry plugin. On the first pageload masonry does work, but I can't seem to figure out how to re-fire masonry on the newly loaded content via ajax. I should add that all the items from the current masonry get deleted, and then replaced by new ones.
The masonry code is like this:
$container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.item',
transitionDuration: 0
});
});
And the ajax load code is like this:
var newHash = "",
$mainContent = $("#ajaxcontainer"),
$ajaxSpinner = $("#loader"),
$el;
$('.internal').each(function() {
$(this).attr("href", "#" + this.pathname);
});
$(document).on('click', '.internal', function() {
window.location.hash = $(this).attr("href");
});
$(window).bind('hashchange', function(){
newHash = window.location.hash.substring(1);
if (newHash) {
$mainContent.fadeOut(500, function() {
$ajaxSpinner.fadeIn();
$mainContent.load(newHash + " #container", function() {
$ajaxSpinner.fadeOut( function() {
$mainContent.fadeIn(1000);
});
$('.internal').each(function() {
$(this).attr("href", "#" + this.pathname);
});
});
});
};
});
$(window).trigger('hashchange');
Does anyone have any input as to how to achieve this? Thank you very much.
I finally managed to get it to work!
I hope other people will find this helpful so I'm posting it here for future reference.
One of the problems I had, seems to be that I hid the container while the data was loading. I hid it with fadeOut and fadeIn which seems to cause problems with masonry. Insted of hiding it per se, I now animate the opacity to 0 and back to 1 once the data is loaded. The script is as follows:
$(window).bind('hashchange', function(){
newHash = window.location.hash.substring(1);
if (newHash) {
$('#ajaxcontainer').fadeTo(500, 0, function() {
$ajaxSpinner.fadeIn();
$mainContent.empty();
$.get(newHash, function(data){
var $data = $(data).find("#container > *");
$container.prepend($data).imagesLoaded(function(){
$container.masonry( 'prepended', $data, true );
});
$ajaxSpinner.fadeOut( function() {
$('#ajaxcontainer').fadeTo(1000, 1);
});
});
});
};
});

Cloning content, appending and prepending

I am trying to built an infinite scroll both upwards and downwards, using the isotope plugin.
But I'm stuck yet again after getting some help here on stackoverflow. Unfortunately the content only gets cloned once, but my intention is to clone and append/prepend it every time as soon as the user reaches the bottom or the top of the page.
I'm new to jQuery and I would really appreciate if you could help me debug it.
http://jsfiddle.net/sqJqr/7/
$(document).ready(function() {
var $newElements = $(".isotope").first().children().clone();
$(window).scroll(function() {
if ( $(window).scrollTop() >= ($('body').height() - $(window).height()) ) {
$(".isotope").append( $newElements ).isotope( 'appended', $newElements );
$isotope = $(".isotope").first().children().clone();
}
else if ( $(window).scrollTop() == 1 ) {
$(".isotope").prepend( $newElements ).isotope('reloadItems').isotope({ sortBy: 'original-order' });
$isotope = $(".isotope").first().children().clone();
}
return false;
});
});
It sounds like you are trying to do an infinite scroll. The isotope plugin is interoperable with the infinite scroll plugin so you shouldn't have a problem. Here is an example using both from this page:
$(function(){
var $container = $('#container');
$container.isotope({
itemSelector : '.element'
});
$container.infinitescroll({
navSelector : '#page_nav', // selector for the paged navigation
nextSelector : '#page_nav a', // selector for the NEXT link (to page 2)
itemSelector : '.element', // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/qkKy8.gif'
}
},
// call Isotope as a callback
function( newElements ) {
$container.isotope( 'appended', $( newElements ) );
}
);
});

Getting Lavalamp jQuery plugin to work with dropdown menu?

I have a problem with the jQuery Lavalamp plugin. It works perfectly with a single-level menu, but after adding a dropdown it gets a bit lost. Here's what I mean: http://screenr.com/0fS.
Of course what I would like to achieve is for the lavalamp background to stay on the Portfolio item when the user hovers over the subitems.
I guess it's a matter of changing the plugin slightly, so here's the full code of the plugin. What's needed is just a simple way to make the lavalamp stop at the current stage when <li>'s children are hovered and then go back to working normally after. Here's the full plugin code for reference!
(function($) {
$.fn.lavaLamp = function(o) {
o = $.extend({ fx: "linear", speed: 500, click: function(){} }, o || {});
return this.each(function() {
var me = $(this), noop = function(){},
$back = $('<li class="back"><div class="left"></div></li>').appendTo(me),
$li = $("li", this), curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0];
$li.not(".back").hover(function() {
move(this);
}, noop);
$(this).hover(noop, function() {
move(curr);
});
$li.click(function(e) {
setCurr(this);
return o.click.apply(this, [e, this]);
});
setCurr(curr);
function setCurr(el) {
$back.css({ "left": el.offsetLeft+"px", "width": el.offsetWidth+"px" });
curr = el;
};
function move(el) {
$back.each(function() {
$(this).dequeue(); }
).animate({
width: el.offsetWidth,
left: el.offsetLeft
}, o.speed, o.fx);
};
});
};
})(jQuery);`
Thanks in advance.
the fix for this is to change the hover() in the lavalamp to mouseover as show on the following page..
http://hekimian-williams.com/?p=146
I added additional class to top level li and updated the js:
$li = $("li.top-level-item", this),

Categories

Resources