JS fine in Fiddle but doesn't animate until browser resize on Squarespace site

问题

I'm using jQuery Isotope to animate images on my site. It works fine in jsFiddle but the animation refuses to initialise until I resize the browser on the site itself.

I have looked at other related questions and tried wrapping the code in a ready function and looking for hidden characters but nothing seems to work. The site is:

http://rgbdrinks.squarespace.com

and the fiddle is:

http://jsfiddle.net/tutmoses/kxLck/3/

Any help gratefully received.

Andrew

<div id="container">

<div class="item"><div id="squarespace-slideshow-wrapper-1371031439" rel="51b847e2e4b0552c3a104be5" class="ss-slideshow-v2"></div><p>This is a test</p></div>

<div class="item"><img style="width: 150px;" src="/picture/drink%20pour%203.jpg?pictureId=18133348&amp;asGalleryImage=true&amp;__SQUARESPACE_CACHEVERSION=1370962041640" alt="" /></div>

<div class="item"><img style="width: 150px;" src="/picture/martini%20glass%20splash.jpg?pictureId=18133349&amp;asGalleryImage=true&amp;__SQUARESPACE_CACHEVERSION=1370962058097" alt="" /></div>

<div class="item"><img style="width: 150px;" src="/picture/tablecloth.jpg?pictureId=18133350&amp;asGalleryImage=true&amp;__SQUARESPACE_CACHEVERSION=1370962092184" alt="" /></div>

<div class="item"><div id="squarespace-slideshow-wrapper-1370943850" rel="51b6f18ae4b0877f36bb6468" class="ss-slideshow-v2"></div></div>

<div class="item"><div id="squarespace-slideshow-wrapper-1371031528" rel="51b84800e4b0552c3a104be6" class="ss-slideshow-v2"></div></div>

<div class="item"><div id="squarespace-slideshow-wrapper-1371031555" rel="51b8481be4b0552c3a104be7" class="ss-slideshow-v2"></div></div>

<div class="item"><div id="squarespace-slideshow-wrapper-1371031585" rel="51b8483ee4b0552c3a104be8" class="ss-slideshow-v2"></div></div>


</div>

<script src="http://rgbdrinks.squarespace.com/storage/isotope/js/jquery-1.7.1.min.js"></script>
<script src="http://rgbdrinks.squarespace.com/storage/isotope/js/jquery.isotope.min.js"></script>
<script src="http://rgbdrinks.squarespace.com/storage/isotope/js/fake-element.js"></script>



<script>

var $container = $('#container')

    // initialize Isotope

$container.isotope({

    // options...
    sortBy : 'random',
    resizable : true,
    itemSelector : '.item',
    animationEngine : 'best-available',
    // set columnWidth to a percentage of container width
    masonry: { columnWidth: $container.width() / 6 }

});

    // update columnWidth on window resize
  $(document).ready(function() {
    $(window).smartresize(function(){

    $container.isotope({
    // update columnWidth to a percentage of container width
    masonry: { columnWidth: $container.width() / 6 }
    });

  });

});

来源：https://stackoverflow.com/questions/17239478/js-fine-in-fiddle-but-doesnt-animate-until-browser-resize-on-squarespace-site

标签

jquery

jquery-isotope

jsfiddle

squarespace