search

Kris-B / nanoGALLERY

image gallery simplified - jQuery plugin. Touch enabled, responsive, justified/cascading/grid layout and it supports pulling in Flickr, Google Photos and self hosted images.
https://nanogallery2.nanostudio.org/
438 stars 101 forks source link

Dynamically modify CSS #55

Closed bwanshoom closed 9 years ago

bwanshoom commented 9 years ago

I'd like to add buttons to rotate the images in the gallery. I'm doing this by modifying the css via jquery for both the image and the thumbnail which works fine. However, the css changes I make don't persist. Is there a better approach to add rotation or is there some way to have the css changes stick?

I'm making a call similar to this to do the rotation: $('img.image.imgCurrent').css('transform','rotate(' + angle + 'deg)');

Kris-B commented 9 years ago

What do you mean with "don't persist" ? Can you give me details? Thanks.

bwanshoom commented 9 years ago

I have a custom toolbar button set up to rotate the image which works fine. But if I click the left or right arrow to page through the images the rotated image goes back to its original orientation. So the modified css only sticks while that image is the currently selected one. Does that help?

Kris-B commented 9 years ago

Ok, and how will you save the images rotations so that one can have these rotations on each visit? Is it stored server side? How?

bwanshoom commented 9 years ago

That's why I'm doing this - so the user can modify images (rotate or delete). The processing will then be done to the image server-side and the image permanently rotated or removed.

Kris-B commented 9 years ago

You can have a look at http://jsfiddle.net/Kris_B/saw8kqve/ to see how to store custom data. CSS settings associated to imgCurrent is not enough: actually 3 images are used (for preloading). So you'll have to manage the CSS settings for these 3 elements.