166
rated 0 times
[
172]
[
6]
/ answers: 1 / hits: 16906
/ 13 Years ago, tue, november 1, 2011, 12:00:00
the title pretty much says everything, I did look into the images plugin from masonry yet I had no luck, I wonder if anyone could help?
The script does many things, it has the filter bit, the animation, show/hide, ajax to get the content etc etc. I'd be happy if anyone could investigate into why it is overlapping and how i could solve it based on the code below:
jQuery(function(){
jQuery('#container').masonry({
itemSelector: '.box',
animate: true
});
});
(function ($) {
// Get all menu items with IDs starting with filter- and loop over them
$(.menu li[id|=filter]).each(function () {
// Get the ID add extract the page class name from it (remove filter- from it)
var type = $(this).attr(id).replace(filter-, );
// Get the items in the webbies list with that class name
var items = $(#container div[class~= + type + ]);
// Don't do anything if there aren't any
if (items.length == 0) return;
// Get a list of the other items in the list
var others = $(#container>div:not([class~= + type + ]));
// Add a click event to the menu item
$(a, this).click(function (e) {
// Stop the link
e.preventDefault();
// Close open item
if (openItem) {
close(openItem);
}
items.removeClass(inactive).animate({opacity: 1});
others.addClass(inactive).animate({opacity: 0.2});
});
});
$(.reset-filter a).click(function (e) {
e.preventDefault();
if (openItem) close(openItem);
$(div.box.inactive).removeClass(inactive).animate({opacity: 1});
});
var openItem;
// Opens an item
var open = function (item) {
// Close open item
if (openItem) close(openItem);
item.addClass(loading);
$(img, item).first().hide();
item.width(340);
item.height(600);
if (!item.data('loaded')) {
$(div.fader, item).load($(a, item).first().attr(href) + #content, function () {
stButtons.locateElements();
stButtons.makeButtons();
stWidget.init();
$(#container).masonry('reloadItems', function () {
$(div.fader, item).animate({opacity: 1}, function () {
item.removeClass(loading);
$('<a href=# class=close>Close</a>').appendTo(this).click(function (e) {
e.preventDefault();
close(item);
$(document).scrollTo( $(#navigation-block), 600, {offset:-50} );
});
$(div.info, item).fadeIn(slow, function () {
$(document).scrollTo( $(.info), 600, {offset:80} );
});
});
});
item.data('loaded', true);
});
} else {
item.removeClass(loading);
$(#container).masonry('reloadItems', function () {
$(div.fader, item).animate({opacity: 1}, function () {
$(div.info, item).fadeIn(slow, function () {
$(document).scrollTo( $(.info), 600, {offset:80} );
});
});
});
}
// Set open item
openItem = item;
};
// Closes an item
var close = function (item) {
$(div.fader, item).animate({opacity: 0});
$(div.info, item).hide();
item.animate({width: 150, height: 100}, function () {
$(img, item).first().fadeIn(slow);
$(#container).masonry('reloadItems');
});
// Reset open item
openItem = null;
};
$(#container div.box).each(function () {
var item = $(this);
item.data('loaded', false);
$(div.fader, item).css(opacity, 0);
$(a.close, item).click(function (e) {
e.preventDefault();
close(item);
$(document).scrollTo( $(#navigation-block), 600, {offset:-50} );
});
$(a.showMe, item).click(function (e) {
e.preventDefault();
if (item.hasClass(inactive)) return;
open(item);
});
});
})(jQuery);
</script>
More From » jquery
