Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Isotope items scaling transition

I am using the latest version of isotope and I want the same zoom/scale functionality as the example websites seen on http://isotope.metafizzy.co/.

When the above page loads, the website examples that one sees (these are loaded into the page dynamically using javascript index.html line 362...they are coming from zootools?) zoom or scale in. I don't know how to make my images do this.

What can I do to make my images zoom in like David's?

Thanks,

Keith

User Gravatar

Keith

Posted Jun 12 2013 0:00 UTC

$10


  • Assigned To Dror
  • Solved
  • jquery
    isotope
  • 1303 Views

1 Replies


Add your elements to another div of class "container" -

<div id="alpha" class="container">
        <!-- Add your items like this one -->
    <li class="example isotope-item" data-number="45">
        <a href="http://test.com" target="_blank">  
            <img src="img/test.png" />
            <b>Standard static site with vertical</b>
        </a>
      </li>
</div>

add this to your css so this container would be invisible -

#alpha { display: none; }

and add this to your javascript -

var $alpha = $('#alpha');
      var $container = $('#container');

      $container.isotope({
        itemSelector: '.example',
               //
               .....
               //
             }).isotope( 'insert', $alpha.find('.example'));

This should make Isotope add the hidden items from the alpha container automatically on startup and cause the appending animation to work.

User Gravatar

Dror

Posted Jun 12 2013 18:21 UTC

Solution

This didn't solve your task? Get your own custom solution.

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions