On click rotate image, jquery

Question

I try to set up image that rotates after links are clicked. having 3 links in total. If second link is clicked, image rotates by 20 degress. If after second link, the third link is clicked, image rotates +20 degrees more. If first link is clicked, image rotates back to default position.
Concept simplified:
link1 = images default position
link2 = image rotates by 20degrees
link3 = + another 20degrees
If clicked from link3 to link2 -20degrees.

Website uses fullpage.js . Rotating image is meant as navigation dots (see ex. here ). I dont expect to image to rotate if mouse scroll is used, thats far beyod my reach...

As base I am using jQuery rotate plugins example 5

var value = 0
$("#img").rotate({ 
   bind: 
     { 
        click: function(){
            value +=90;
            $(this).rotate({ animateTo:value})
        }
     } 

});

jsfiddle so far... I dont even know how to assign links so that on click image rotates.

Help is highly appreciated. I dont expect to get everything done by someone else, please, at least guide me in direction...

Answer 1

You can just bind a click event to the li . Every time a li is clicked check its text. And based on that rotate your image

Try:

var value = 0;
$( "li" ).click(function() {
    var text=$(this).text();
    if(text==="Link1"){value=0;}
    if(text==="Link2"){value+=20;}
    if(text==="Link3"){value-=20;}
    $("#image").rotate({ animateTo:value});

});

DEMO