CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user1514434
user1514434

Reputation:

Change button and div on click

Hello I need to mimic this websites function with the "view 360" button: http://www.designrattan.co.uk/daybed/apple

I have already got the 360 script worked out it is JUST THE BUTTON that I cannot work out?

I have attempted it here: http://designliving.tk/winchester-rattan-garden-round-table-set

but several things are wrong as you can see.

I need the DIV to change when clicking the button, but I also need the button to change every time it is clicked (from "view 360" to "view image").

In addition to that I need the images in my photos tab to be able to change the div and button back to "view 360"

I think I have the JavaScript but I dont know how to use this in conjunction with HTML

$('.yourButton').bind('click',function(){
if (!$('.yourButton').hasClass('dragMode')) {
    $('.yourButton').addClass('dragMode');
    $('.yourButton').attr('value')="Drag [...]";
} else { // if in drag mode
    $('.yourButton').removeClass('dragMode');
    $('.yourButton').attr('value')="View 360";
}
});

$('.yourTabImages').bind('click',function(){
if ($('.yourButton').hasClass('dragMode')) {
    $('.yourButton').removeClass('dragMode');
    $('.yourButton').attr('value')="View 360";
}
});

I hope this all makes sense!,

Thanks everyone!

Upvotes: 0

Views: 324

Answers (2)

Rajesh
Rajesh

Reputation: 3014

Dont implement you own code, that will take time. Use this any of plugin which you like: http://www.jquery4u.com/plugins/jquery-360-degrees-image-display-plugins/#.T_wDU5GFp9g

Upvotes: 0

Frederik.L
Frederik.L

Reputation: 5610

If you use jquery, it can be easily achieved with something like :

$('.yourButton').bind('click',function(){
    if (!$('.yourButton').hasClass('dragMode')) {
        $('.yourButton').addClass('dragMode');
        $('.yourButton').attr('value')="Drag [...]";
    } else { // if in drag mode
        $('.yourButton').removeClass('dragMode');
        $('.yourButton').attr('value')="View 360";
    }
});

$('.yourTabImages').bind('click',function(){
    if ($('.yourButton').hasClass('dragMode')) {
        $('.yourButton').removeClass('dragMode');
        $('.yourButton').attr('value')="View 360";
    }
});

This way you can validate in which mode your button is when choosing which method to call when handling the click event. Hope this helps

Upvotes: 3

Related Questions