jquery-isotope

jQuery Isotope - corner stamp issue

泪湿孤枕 提交于 2019-12-06 09:22:04
问题 I started using awsome JQuery Isotope plugin in my project. Everything works great, but I'm having one issue with corner-stapm option. Each element in my masnory grid has fixed width (220px + 5 margin) and random height (depending on its content) and I am using @media queries in CSS file to change columns number on different screen resolution (page width can be 230, 460, 690.. etc.). Problem with corner stamp occurs in the narrowest version (one column) - the corner stamp is covered with

Isotope Gallery Error: Uncaught Error No layout mode packery line 8

房东的猫 提交于 2019-12-06 08:26:41
I am trying to use packery as a layout for my gallery. I am using fancybox with the isotope gallery. I don't see fancybox being the issue. I'm using isotope v2 and the latest packery download. Every single other layout works, even the ones not included in isotope js like fitRows and fitColumns. But with packery I get this error from isotope: Uncaught Error: No layout mode: packery isotope.pkgd.js line 8 Here is an example on codepen: http://codepen.io/anon/pen/QwXEvr JS: jQuery('.fancybox').fancybox({ openEffect: 'none', closeEffect: 'none' }); $('#testing').isotope({ 'layoutMode': 'packery';

jQuery Isotope — sort by category, but specify which comes first

旧城冷巷雨未停 提交于 2019-12-06 08:18:42
问题 I'm looking for a type of sort behaviour, one that would match a specific category and bring this to the front of the listing. Like a filter would, except without removing other items. Imagine these category items in an Isotope grid: Red Green Blue Red Green Blue If I sort by category, it does so alphabetically to show: Blue Blue Green Green Red Red What I'd like is to float a specific category to the front, e.g. "Green", like so: Green Green Red Red Blue Blue Is this possible? I've tried

How to get Isotope working with dynamic DOM nodes?

折月煮酒 提交于 2019-12-06 07:29:20
问题 I the context of Backbone views, I add and remove views in the DOM. However, the container that contains Isotope elements only works during the initial load; after that, when the container is removed, and added again, Isotope is not working as expected. I did quick JSfiddle here: http://jsfiddle.net/mulderp/T8aSQ/6/ --> When I add the Isotope container: var list = '<div data-foo="bar" id="container"><div class="item red"></div><div class="item blue"></div></div>'; $container.html(list);

Using Angular Masonry in AngularJS?

ⅰ亾dé卋堺 提交于 2019-12-05 16:54:31
I have a layout like this. I am using passsy extension for angular masonry . <masonry column-width="200"> <div class="masonry-brick" ng-repeat="data in comments"> <div ng-switch on="data.type"> <div ng-switch-when="hoots"> <article class="hoot_main"> //content goes here //hoot_main is the main class for this div layout </article> </div> </div> </div> <div ng-switch on="data.type"> <div ng-switch-when="article"> <article class="hoot_main"> //content goes here //hoot_main is the main class for this div layout </article> </div> </div> <div ng-switch on="data.type"> <div ng-switch-when="story">

Isotope Dynamic Sorts

末鹿安然 提交于 2019-12-05 07:26:29
问题 I'm using the jQuery Isotope plugin (http://isotope.metafizzy.co/) which is awesome, but I have a problem with creating the sorts. It's more of a JavaScript problem than anything to do with Isotope itself. The problem is that I'm building the sort data dynamically. So I've created a function that makes the sortData. An example below: function getSortData(){ sortData = {}; var sorts = ['symbol', 'number', 'score', 'name']; for (var i in sorts) { sortData[sorts[i]] = function($elem) { console

Isotope: combination filtering + multiple selection

自闭症网瘾萝莉.ら 提交于 2019-12-05 07:08:48
问题 To all jQuery heros out there, I need help! (again) I found similar questions to mine on the internet but there were no answers so far :-/ I want to filter a bunch of items with jquery isotope. I adapted the combination filter example from the plugin homepage, which works fine and looks like so: $(function () { var $container = $('#container'), filters = {}; $container.isotope({ itemSelector: '.item', filter: '', }); // filter links $('.filter a').click(function () { var $this = $(this); //

Isotope: Select and display .xx class at the top

安稳与你 提交于 2019-12-05 06:55:42
问题 I'm using the sorting methods within Isotope (http://isotope.metafizzy.co/docs/sorting.html) and need to display elements with a specific CSS class name assigned to them at the top when a link is clicked. The remaining elements must remain visible beneath the sorted elements so I cannot use Isotope filtering. I'm not so comfortable with JS/jQuery so I'm not even to sure if this code is even set out correctly but currently my elements are sorting by date which is great, however its doing this

Issues with isotope appending

妖精的绣舞 提交于 2019-12-05 06:33:19
I am using isotope to build a smooth grid gallery. Currently I am having issues with the append feature: http://isotope.metafizzy.co/docs/methods.html#appended If I call the append like this $('#loadMore').click(function(){ val='<div class="content-box masonry-brick img11"><a href="#"><img src="images/1.jpg" style="width: 290px; height: 163.36666666666667px; "><div class="portfolio-more"><div class="portfolio-icon"></div></div></a><div class="content-box-content"><h3 class="post-info">Lifestyle / People</h3><h2>Street Life</h2></div></div>'; var $container = $('#grid-gallery'); $container

jQuery: Fluid isotope only working after resize

本秂侑毒 提交于 2019-12-05 01:15:39
问题 I'm having some trouble with a fluid isotope grid I'm setting up, a simple 4 column grid, each .grid-block being 24% width, leaving a 1% allowance. The problem is though, when the page loads it's displaying as a 3 column grid until the browser window is resized and it snaps into 4 columns. Here's a jsfiddle demo: http://jsfiddle.net/BVzTV/4/ jQuery: $(document).ready(function() { var $container = $('#main-grid'); $container.isotope({ itemSelector: '.grid-block', animationEngine: 'best