-1

I wanted to create a lightbox effect for images when clicked, so eventually I found this tutorial and followed all the necessary steps to insert it into my page (with a little modification).

The lightbox functions exactly the way I want it to, but the jQuery library used for the lightbox is conflicting with another script and it's messing up the multi-column layout and endless scroll.

This is a mock page with the lightbox effect. Normally, all the posts should be scattered in a lose multi-column fashion and new posts should load with endless scroll.

I tried deleting a bunch of things to see where the conflict was, and these are the two scripts that conflict.

<script type="text/javascript" src="http://static.tumblr.com/twte3d7/4Wjm5wj58/disassemble_v3.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
Ashley Medway
  • 6,659
  • 7
  • 43
  • 63
S G
  • 1

2 Answers2

0

jQuery needs to be the first script you include.
jQuery Masonry extends jQuery so you must reference the jQuery library first.

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/twte3d7/4Wjm5wj58/disassemble_v3.js"></script>
Ashley Medway
  • 6,659
  • 7
  • 43
  • 63
  • I tried that and masonry worked, but the lightbox did not. But thanks so much for your suggestion! – S G Mar 13 '14 at 04:46
0

I see multiple IDs on divs containing images 

<div id="post">
   <img src="">
</div>

what if you put class instead of id? And could you provide an example of your masonry implementation?

Thanks

theLibertine
  • 175
  • 7
  • I tried that and it didn't make a difference :( And I honestly have no idea, the layout is a Tumblr theme that I modified. But thank you for your help! – S G Mar 13 '14 at 04:45