2013-06-12 2 views
0

это все шло хорошо, внедрение изотопа на:Jquery Изотоп реализация: не анимировать

http://rgbdrinks.squarespace.com/

Тогда я забегаю вперед, попыталась изменить контейнер CSS и не смогла повторить мои шаги.

Я был бы очень благодарен за любую помощь.

С наилучшими пожеланиями,

Andrew

Вот код:


<div id="container"> 
    <div class="item"><span class="full-image-inline ssNonEditable"><span><img style="width: 150px;" src="/picture/drink%20pour%203.jpg?pictureId=18133348&amp;asGalleryImage=true&amp;__SQUARESPACE_CACHEVERSION=1370962041640" alt="" /></span></span></div> 
    <div class="item"><span class="full-image-inline ssNonEditable"><span><img style="width: 150px;" src="/picture/martini%20glass%20splash.jpg?pictureId=18133349&amp;asGalleryImage=true&amp;__SQUARESPACE_CACHEVERSION=1370962058097" alt="" /></span></span></div> 
    <div class="item"><span class="full-image-inline ssNonEditable"><span><img style="width: 150px;" src="/picture/tablecloth.jpg?pictureId=18133350&amp;asGalleryImage=true&amp;__SQUARESPACE_CACHEVERSION=1370962092184" alt="" /></span></span></div> 
<div class="item"><div id="squarespace-slideshow-wrapper-1370943850" rel="51b6f18ae4b0877f36bb6468" 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> 
$('#container').isotope({ 
    // options 
    itemSelector : '.item', 
    layoutMode : 'fitRows' 
}); 
</script> 
+0

В чем проблема на самом деле? – Stanley

+0

Div не изменяет размер с помощью окна браузера, поэтому анимации элементов нет. –

+0

ДА! Большое вам спасибо. –

ответ

0

Вы можете установить фиксированную ширину (1024px) для #canvasWrapper и #contentWrapper. Попробуйте установить ширину в процентах вместо фиксированной ширины

#canvasWrapper { 
    width: 100%; 
} 

#contentWrapper{ 
    width: 100%; 
} 
Смежные вопросы