Question

我正在使用jQuery Isotope来动画我网站上的图片。它在jsFiddle中工作正常但动画拒绝初始化，直到我在网站上调整浏览器大小。

我已经查看了其他相关问题，并尝试将代码包装在一个就绪函数中并查找隐藏的字符，但似乎没有任何工作。该网站是：

http://rgbdrinks.squarespace.com

而小提琴是：

感激不尽的任何帮助。

安德鲁

<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 }
    });

  });

});

JS在Fiddle中很好，但在Squarespace网站上浏览器调整大小之前没有动画

0 个答案: