Adding rating feature to Jetpack Carousel

Question

I'm using jet-pack carousel in my gallery website and i want to add image rating capabilities. I have the "wp-postratings" plugin running on the rest of my site.

I'm assuming that i could add this to individual images as wp treats each image as a post, if so where would i find the template i should add this code to?

All the plugin requires is that i add one line of php to the page/image but i can't figure out where it shoud go as the code for carousel seems to be entirely js and php generated.

Answer 1

• demo: http://so.devilmaycode.it/adding-rating-feature-to-jetpack-carousel/gallery/

in a js file jetPack_meet_wpPostRating.js copy this code (place the file in the js folder of your theme):

• https://gist.github.com/aSeptik/9739808

in the functions.php file of your theme put this code:

• https://gist.github.com/aSeptik/9739808

---

• NOTE
• after installing the above scripts make sure to delete the browser cache before test.
• tested with latest wordpress, jetpack and wp-postrating versions.
• this will also work with multiple gallery in the same page.
• does not need to put any extra [ratings] shortcode anyware.
• the bounty for this answer is too low... ;)

---

• FIX
• Fixed bugs added some check and debug to consol.log...

Answer 2

You can use hook into the Jetpack Carousel on the server-side 
(like to output your data, for example). 

Then on the client-side, get your Javascript rating code to 
load after the Jetpack+Carousel JS, and hook into them 
(hook on the bindings, etc). 

 JetPack provides 2 JavaScript hooks: 
 1) jp_carousel.afterOpen 
 2)jp_carousel.beforeClose. 

Action hook code example