jquery-masonry

jquery, masonry after append complete

由 核能气质少年 提交于 2019-12-25 05:08:29
问题 I have the jQuery below http://jsfiddle.net/XMdYw/7/ var elements = ''; var ELEMENT_COUNT_PER_PAGE = 301; var page = 1; for (var i = (ELEMENT_COUNT_PER_PAGE * (page - 1)); i <= (ELEMENT_COUNT_PER_PAGE * page); i++) { elements+= '<div class="imgwrap"><img src="lq/'+i+'.jpg" class="image-'+i+'"/></div>' } $('.imagecontainer').append(elements).masonry();​ The issue with it is that the images are overlapping, after refreshing the page it fixes but once the site is completely realoded it has the

Changing a parameter based on browser window width?

由 ∥☆過路亽．° 提交于 2019-12-25 04:24:58
问题 With Masonry, I'm using the following code to change columnWidth to 320 when the width of the screen or the browser window is reduced to less than 1035px . When the width of the screen is greater than 1035px , columnWidth is supposed to be 240 . However, the code below causes columnWidth to stay at 320 regardless of the width of the screen. For example, you can see what I'm talking about with the blogs on this site: http://keebs.com/sandbox On full screen, it looks like this: When the browser

imagesLoaded jquery function not working with masonry

由 风流意气都作罢 提交于 2019-12-25 02:46:07
问题 I've been working on this for some time. I am trying to use a fadein function after all of my post content has been loaded and had the relevant masonry layout applied. Have researched this in several places, tried different versions of the imagesLoaded plugin but cannot seem to get it working. This is my basic html structure: <div id="posts"> <article class="post text clearfix"> // text post etc </article> </div> I am calling masonry and then the imagesLoaded jquery plugin. My js looks like

Isotope 2 link to specific filter from another page (like has history)

由 天大地大妈咪最大 提交于 2019-12-25 01:55:54
问题 I'm using the latest Isotope (v2) and it seems the Hash History no longer works from V1. I would like to be able to link to a certain filter from another page. For example I'm on 'about.html' which contains a link to 'support.html#filtertype'. This is my current setup. HTML: <ul id="filters" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1"> <li><a data-filter="*">All</a></li> <li><a data-filter=".chocolate">Chocolate</a></li> <li><a data-filter=".sweets">Sweets</a><

cannot call methods on masonry prior to initialization; attempted to call 'destroy'

由 别来无恙 提交于 2019-12-24 16:19:31
问题 So I am attempting to combine jQuery Masonry plugin ( from : http://masonry.desandro.com/ ) with modernizr to kill masonry when at low resolutions so that my divs revert to a centered partial width layout. I will admit that my javascript skills are still in developing, but I figured the community might be able to help me out on this one. At resolutions below 768 px I would like masonry to be destroyed if active and when at larger resolutions I would like it to execute if not already running.

jquery masonry appending images with custom sizes.

由 陌路散爱 提交于 2019-12-24 14:36:03
问题 Evening! My current relevant code: var $test; var $iterator = 0; $(document).ready(function() { $("#demo-input").tokenInput("php-example.php" ,{ classes: { tokenList: "token-input-list-facebook", token: "token-input-token-facebook", tokenDelete: "token-input-delete-token-facebook", selectedToken: "token-input-selected-token-facebook", highlightedToken: "token-input-highlighted-token-facebook", dropdown: "token-input-dropdown-facebook", dropdownItem: "token-input-dropdown-item-facebook",

Masonry grid not showing properly

由 我怕爱的太早我们不能终老 提交于 2019-12-24 14:02:22
问题 here i am trying to get the masonry grid to my bootstrap row values. but when i initiate the masonry grid i am getting the grid with lots of space between the items in below rows. how can i resolve this? FULL HTML: <!DOCTYPE html> <html> <head> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"> <style> .grid-item {width:400px;} </style> </head> <body> <div class="container-fluid"> <div class="row"> <div class="grid"> <div class="col-xs-10 col-sm-4

masonry.js not working with modal partial

由 孤街浪徒 提交于 2019-12-24 11:27:52
问题 Basically i have something like this, just a partial to render posts and position them with Masonry.js . It worked great, but when I added the " show " partial shown below (a hidden bootstrap modal to "show" the post when clicked) the posts are loaded in a single column. Then when more posts are appended via pagination and window scroll event they are positioned just fine across the screen. Has anyone done anything similar or knows what could be happening? <% @posts.each do |post| %> <%=

jQuery Masonry not working with jQuery tabs

由 纵饮孤独 提交于 2019-12-24 07:46:41
问题 I have a tabbed element on a website, and in each tab the jQuery Masonry script is used. The only problem is that the Masonry grid will only work for the content in the first tab, but I need it to work for the content in every tab. I have tried renaming the containers for each tab, but nothing seems to work. Here is the website: http://joltentertainment.com/services-2/ Here is my code: <ul class="services-tabs"> <li><a href="#tab1">Entertainment</a></li> <li><a href="#tab2">Ambiance & Décor<

jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize

由 房东的猫 提交于 2019-12-24 06:14:08
问题 I've noticed that when using jQuery Isotope or Masonry with a fluid / responsive website, the elements overlap momentarily whilst the browser window is being resized. Please see the images below, which are screenshots from this demo. You can also see this happening on the Isotope website. Is there anything that can be done to avoid this overlapping? 回答1: For Isotope version 3 use: $(window).resize(function(){ $('.grid').isotope('layout'); }); to avoid overlapping grid items. 回答2: Thanks to
订阅 jquery-masonry