CODEWITHSUNDEEP
cssjquery-ui-sortablecss-transitions
user1058322
user1058322

Reputation: 189

Visual Sorting array of images in Javascript using CSS3

Check out this demo by FaTaL. It is explained in his blog that he has used CSS3 :target and transitions to achieve this "visual sorting" of images. The target positions have been hard coded in pres.css

The problem is that my array of images is generated at real time. Here is a demo. I want to "visually sort" these images (on button click) alphabetically by file name. How can I achieve such functionality with CSS3 without hard coding the positions ? A JSON object of filename and other parameters will be available at runtime for the sorting.

Upvotes: 1

Views: 1606

Answers (2)

user1058322
user1058322

Reputation: 189

This is exactly the kind of stuff I was looking for http://isotope.metafizzy.co/ Hope it also helps some of you out there.

Upvotes: 1

AppleGrew
AppleGrew

Reputation: 9570

I could not think of any CSS solution. So, here is my pure Javascript solution. Live at http://jsfiddle.net/uhAEA/1/.

It sorts based on the value set on each a tag's sortelm attribute.

Upvotes: 1

Related Questions