Web Analytics Made Easy -
StatCounter Image grid skipping 1 spot - CodingForum

Announcement

Collapse
No announcement yet.

Image grid skipping 1 spot

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Image grid skipping 1 spot

    Hey guys

    I’m adapting a page, it used to run quicksand plugin to sort the image grid, but I don’t need sorting anymore. So I disabled the Quicksand jquery.
    Instead I’m only using the grid design in combination with lightbox2 to show the complete galleries per topic.

    However it skips the 7th spot in the grid and continues at 8.
    Funny thing is that when I use the Firefox element inspector, the image jumps back into place. So I can’t figure out why this is happening. The spot is just empty.

    Would appreciate any feedback smile.gif smile.gif

    Link: DDW

    In this 2nd section called ‘realisaties’ you’ll see that the ‘ventilatie’ comes in place 8 and not in place 7 (after warmtepompen)

  • #2
    Whilst I don't know what "quicksand" is, I do know that jQuery is a train wreck laundry list of how NOT to make a website, and if you need jQ or even JavaScript to control your layout, there is something really, REALLY wrong with both the HTML and CSS.

    This is apparent in the data- attributes on tags that shouldn't need them and host of bloated unneccessary markup. Much of it being gibberish too like the use of H4 when no new subsections of the page are being started.

    But the "real" problem here is that the layout appears to be using floats, when inline-block width vertical-align:top; would be better suited for the task. The reason that "spot" is skipped is that with a lack of row based clearing one of the taller elements is pushing that third element to the side.

    A proper fix would be display:flex with flex-wrap, using columns, or simply leveraging inline-block. What's really wierd is those LI are set to BOTH inline-block and float... so I'd probably just axe the float and adjust the widths until you have an adequate number of columns at your various widths.

    Though display:flex might be the better solution. In general though that entire codebase is in need of some serious lovin' by a competent developer. It's a mish-mash mix of different approaches, none of which are particularly great in the first place.

    Hence why it's vomiting up this:

    Code:
    <li data-tag="tag0" data-id="id-0-2" style="display:none;">
    	<a href="img/Totaalproject-02.jpg" rel="lightbox[gal0]" title="Totaalproject 02">
    		<div class="zoom-icon icon-search"></div>
    		<img src="img/Totaalproject-01-thumb.jpg" alt="Totaalproject 02" />
    	</a>
    	<h4>Totaalprojecten</h4>
    </li>
    to do the job of this:

    Code:
    <li>
    	<a href="img/Totaalproject-02.jpg">
    		<img src="img/Totaalproject-01-thumb.jpg" alt="Totaalproject 02">
    	</a>
    	Totaalprojecten
    </li>
    "It is amazing what can be accomplished when nobody cares who gets the credit." -- Kelly Johnson
    http://www.cutcodedown.com

    Comment


    • #3
      Thanks for looking at the code Deathshadow.

      The reason I'm using the extra mark-up, is for the lightbox function to work. I want each picture to load a different gallery. Hence the data-tags & display:none on the other images.

      I'll have a look at your suggestion with display:flex

      (I'm not a professional developer, that's why I'm here )

      Comment


      • #4
        Ok, so I've sorted it out with a css grid instead. (and removed the unnecessary code)

        Comment


        • #5
          Hmm, but this is not working in Chrome? Why is that?

          Comment

          Working...
          X