更改按钮并单击div

Question

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!

Answer 1

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

Answer 2

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