jquery-isotope

问题 I'm trying to integrate bootstrap with isotope but only four image is loading first time, after clicking all it shows all the images! Can't figure out what's wrong! Here is Codepen Link This is my HTML : <div class="row"> <div id="filters" class="button-group"> <button class="button btn btn-primary is-checked" data-filter="*">show all</button> <button class="button btn btn-primary" data-filter=".web">WEB</button> <button class="button btn btn-primary" data-filter=".design">DESIGN</button> <

问题 I'm trying to integrate bootstrap with isotope but only four image is loading first time, after clicking all it shows all the images! Can't figure out what's wrong! Here is Codepen Link This is my HTML : <div class="row"> <div id="filters" class="button-group"> <button class="button btn btn-primary is-checked" data-filter="*">show all</button> <button class="button btn btn-primary" data-filter=".web">WEB</button> <button class="button btn btn-primary" data-filter=".design">DESIGN</button> <

问题 I have an isotope layout with sorting of grid items by a filter; and when items are sorted by button, the items in the grid that are not in the selected data-category have their CSS opacity changed to .25. The problem is that when the grid is complete - either on initial page load or after an "arrangeComplete" by the button action of sorting - there are certain data-categories that have no items in the grid. This means that some sorting buttons are still clickable even though they don't sort

问题 My current isotope grid has two dropdown filters that sort the grid items. The first filter is menu type, and the second filter is drink type. Each menu type however does not contain all drink types so when some filter configurations are chosen, no results are showed, which is correct. But i would like to stop this from happening by when the user selects the first filter, the second filter hides the empty types. Working Codepen of current filters: https://codepen.io/whitinggg/pen/zYGEaNb This

问题 I am desperately trying to make the filtering work with multiple keywords. Somehow it doesnt work as expected. For example the keyword combination: laurene maria works but laurene maria ben or laurene ben or laurene clara and so on does not work. What have I dont wrong? http://fiddle.jshell.net/7t8mgont/18/ var $quicksearch = $('#quicksearch').keyup( debounce( function() { qsRegex = new RegExp( $quicksearch.val(), 'gi' ); $container.isotope({ filter: function() { return qsRegex ? $(this).text

问题 I am desperately trying to make the filtering work with multiple keywords. Somehow it doesnt work as expected. For example the keyword combination: laurene maria works but laurene maria ben or laurene ben or laurene clara and so on does not work. What have I dont wrong? http://fiddle.jshell.net/7t8mgont/18/ var $quicksearch = $('#quicksearch').keyup( debounce( function() { qsRegex = new RegExp( $quicksearch.val(), 'gi' ); $container.isotope({ filter: function() { return qsRegex ? $(this).text

问题 I have been reading stack overflow for a solution but can't find it. ( full size image at http://i.imgur.com/hrcDg.png ) When I load the page it looks like that Here is the site (beta) http://e-gimnazija.hostoi.com/test/site/index.html If you press all it unfolds, maybe I can solve it if it auto unfolds at the start 回答1: The problem is that when you run .isotope the images are not yet loaded, so the plugin cannot calculate their size.. You have some different options to choose from Start

问题 I have been reading stack overflow for a solution but can't find it. ( full size image at http://i.imgur.com/hrcDg.png ) When I load the page it looks like that Here is the site (beta) http://e-gimnazija.hostoi.com/test/site/index.html If you press all it unfolds, maybe I can solve it if it auto unfolds at the start 回答1: The problem is that when you run .isotope the images are not yet loaded, so the plugin cannot calculate their size.. You have some different options to choose from Start

问题 I am using the Jquery Isotope plugin with divs that have a back ground image and that are a particular size: .frontpageimage { height: 200px; width: 200px; background-image: url('tile1.jpg'); } This works fine. But I want to throw something in there that randomly selects and image and makes it bigger then the others, so I created this: $('#isotopecontainer .isotope-item:nth-child(2)').find('.frontpageimage').addClass('frontpageimagehigh'); .frontpageimagehigh { height: 420px; width: 200px; }

问题 This question is a follow-up to this one: Isotope grid + corner stamp removing empty spaces, sorting logic The answer there works flawlessly on the unfiltered isotope layout. Once some elements are removed though, this functionality stops working. I am wondering if there is a good way to modify the code in the previous answer in order to accommodate for this. Here is a fiddle with a basic filter added on click of the corner-stamp: http://jsfiddle.net/zewkG/13/ Note when, after clicking the