Databases
StackOverflow2013
Postsdbo
POJquery Masonry Seamless Responsive Image Grid
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery Masonry Seamless Responsive Image Grid
    primarykey
    data
    text
    <p>I'm looking to create a seamless (no gutters) fullscreen image grid using jquery masonry, where the images are fully responsive and are of varying widths. I've found a couple other starting points out there, but it's proving to be quite difficult for my amount of jquery knowledge.</p> <p>This is what I'm going for: <a href="http://future.thefutureforward.com/~cycles/assets/images/HUB0002_dAutremont_4WEB.jpg" rel="nofollow">http://future.thefutureforward.com/~cycles/assets/images/HUB0002_dAutremont_4WEB.jpg</a></p> <p>And this is what I have so far: <a href="http://future.thefutureforward.com/~cycles/archive-test-fluid.html" rel="nofollow">http://future.thefutureforward.com/~cycles/archive-test-fluid.html</a></p> <p>HTML (just a portion):</p> <pre><code>&lt;div id="masonry-container"&gt; &lt;div class="box nav-container"&gt; &lt;div id="bumble-bee-sub"&gt;&lt;a href="[[~1]]"&gt;&lt;img src="assets/img/bumble_bee.png" alt="Cycles d'Autremont" title="Cycles d'Autremont" /&gt;&lt;/a&gt;&lt;/div&gt; &lt;ul id="nav-masonry"&gt; &lt;li&gt;&lt;a href="#"&gt;Featured&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Process&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Archive&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" class="active"&gt;Blog&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="box"&gt; &lt;a href="#"&gt; &lt;img src="assets/images/archive-thumbs/one.jpg" alt="" title="" /&gt; &lt;span class="bike-name"&gt;&lt;span&gt;Bicycle #001&lt;/span&gt;&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;div class="box"&gt; &lt;a href="#"&gt; &lt;img src="assets/images/archive-thumbs/two.jpg" alt="" title="" /&gt; &lt;span class="bike-name"&gt;&lt;span&gt;Bicycle #002&lt;/span&gt;&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;div class="box"&gt; &lt;a href="#"&gt; &lt;img src="assets/images/archive-thumbs/three.jpg" alt="" title="" /&gt; &lt;span class="bike-name"&gt;&lt;span&gt;Bicycle #003&lt;/span&gt;&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS for each "box":</p> <pre><code>.box{ margin: 0px 0px 0px 0px; padding: 0px; float: left; max-width: 33.3%; /* since we're going for three across... */ } .box img { margin: 0px 0px 0px 0px; padding: 0px; max-width:100%; display:block; } </code></pre> <p>And here's the jQuery that's doing most the heavy-lifting:</p> <pre><code>jQuery(document).ready(function($) { var CollManag = (function() { var $ctCollContainer = $('#masonry-container'), collCnt = 1, init = function() { changeColCnt(); initEvents(); initPlugins(); }, changeColCnt = function() { var w_w = $(window).width(); if( w_w &lt;= 600 ) n = 2; else n = 3; }, initEvents = function() { $(window).on( 'smartresize.CollManag', function( event ) { changeColCnt(); }); }, initPlugins = function() { $ctCollContainer.imagesLoaded( function(){ $ctCollContainer.masonry({ itemSelector : '.box', columnWidth : function( containerWidth ) { return containerWidth / n; }, isAnimated : true, animationOptions: { duration: 300 } }); }); }; return { init: init }; })(); CollManag.init(); }); </code></pre> <p>It's getting there, but at certain widths it's not filling all of the gaps properly, and smaller screen sizes need some work. If anyone has any tips or thoughts on how to improve this, that would be amazing.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USnickff
    1. USnickff
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    3. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POJquery Masonry Seamless Responsive Image Grid
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POJquery Masonry Seamless Responsive Image Grid
      1. USBytemain
      1. VTFavorite
    3. VO
      singulars
      1. POJquery Masonry Seamless Responsive Image Grid
      1. This table or related slice is empty.
      1. VTUpMod
    1. COProbably wrong suggestion, but have you considered http://www.wookmark.com/jquery-plugin as alternative? Some of the gaps (hard to see in your sandbox because of the black background) are due to the fact that your Isotope items have sometimes a width of less than one column, therefore a gap is inevitable, unless you use a matching modularity in terms of Isotope item size. See http://stackoverflow.com/a/11701171/963514 (with fiddle) or http://stackoverflow.com/a/11814339/963514
      singulars
      1. POJquery Masonry Seamless Responsive Image Grid
      1. USSystembolaget
    2. COthanks for the thoughts, @Systembolaget. that example for wookmark doesn't show items of variable widths, so I'm wondering if it's worth trying or not. Based on your experience, do you think I would be better off trying isotope? I didn't think I needed it since I'm not doing any filtering, but perhaps it offers something that would help...and I'll make my BG white so the gaps are easier to recognize.
      singulars
      1. POJquery Masonry Seamless Responsive Image Grid
      1. USnickff
    3. COalso, here's a version with static widths (which I'm not against) - http://future.thefutureforward.com/~cycles/archives/ - still having issues. your fiddle with isotope and fixed width/height seemed better than this attempt - do you think copying your fiddle and setting specific widths/height for the different sizes will yield better results? I'm just not sure, since I"ve got 4 different sized boxes going...
      singulars
      1. POJquery Masonry Seamless Responsive Image Grid
      1. USnickff
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload