Webrotator 360 product viewer not working properly with MVC4


New member
Hi Everyone,
I'm new user of WebRotator 360 product. I've download it and embedding with my MVC4 Razor website but the product viewer visible always top even I've set z-index value is greater than product viewer (webrotator 360 product) z-index. can you tell me how to resolve this problem. Please paste your code if you've make any changes in product viewer code.

Pravesh Singh.


Active member
Hi Pravesh, I guess your z-index could be still lower than what we use to keep our DOM elements on top against each other. You can probably try a higher number. Or just shoot us you live link to support @ webrotate360 com or paste it here and we will come back to you shortly.


New member
Code which I've written for adding Webrotator 360 product viewer:
<div id="content">
<div id="wr360PlayerId" class="wr360_player">
<script language="javascript" type="text/javascript">

_imageRotator.settings.jsScriptOnly = false;
_imageRotator.settings.swfFileURL = "/imagerotator/imagerotator.swf";
_imageRotator.settings.configFileURL = "/360_assets/RotatingShoe/rotatingshoe.xml";
_imageRotator.settings.graphicsPath = "imagerotator/html/img/basic";



and I've written javascript lightbox code but it does not look properly:
JavaScript LightBox Code:
CSS Code:
#lightbox {
position:fixed ;
top: 0px;
left: 50%;
height: 365px;
width: 685px;
margin-left: -250px;
z-index: 9999999;
display: none;

#lightbox-shadow {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000000;
background-color : #000000;
filter: alpha(opacity=75);
-moz-opacity: 0.75;
-khtml-opacity: 0.75;
opacity: 0.75;
z-index: 9999990;
display: none;

.Js Code:

function lightbox(insertContent, ajaxContentUrl) {

// jQuery wrapper (optional, for compatibility only)
(function ($) {

// add lightbox/shadow <div/>'s if not previously added
if ($('#lightbox').size() == 0) {
var theLightbox = $('<div id="lightbox" class="shadow"/>');
var theShadow = $('<div id="lightbox-shadow"/>');
// Add My Custom Close Image
// var theImage = $('<img src="../../Images/close.png" id="btnClose" alt="close" />');
$(theShadow).click(function (e) {
//Add Image in body
// $('body').append(theImage);


// remove any previously added content

// insert HTML content
if (insertContent != null) {
//Add Close button content
var theImage = $('<img src="../../Images/btnCrossPopup.png" id="btnClose" alt="close" style="float:right;margin-top: -1px;margin-right:-45px;z-index:9999999; cursor:pointer;" />');
$(theImage).click(function (e) {


// insert AJAX content
if (ajaxContentUrl != null) {
// temporarily add a "Loading..." message in the lightbox
$('#lightbox').append('<p class="loading">Loading...</p>');

// request AJAX content
type: 'GET',
url: ajaxContentUrl,
success: function (data) {
// remove "Loading..." message and append AJAX content
error: function () {
alert('AJAX Failure!');

// move the lightbox to the current window top + 100px
$('#lightbox').css('top', $(window).scrollTop() + 100 + 'px');

$('#lightbox').css('marginLeft', '-' + $('#lightbox').width() / 2 + 'px');

// display the lightbox
// $('#lightbox-shadow').show();

$('#lightbox-shadow').fadeIn('fast', function () {

})(jQuery); // end jQuery wrapper


// close the lightbox
function closeLightbox() {

// jQuery wrapper (optional, for compatibility only)
(function ($) {

// hide lightbox/shadow <div/>'s


// remove contents of lightbox in case a video or other content is actively playing

})(jQuery); // end jQuery wrapper

But Webrotator product viewer visible at the top of lightbox. Check out the code and tell me where is going wrong.
Arun Singh


Active member
Hmm.. can't see quickly where you add the viewer in the lightbox code, but maybe I'm just missing it. Please send us a live link to your lighbox sample with the viewer integrated where it's not working and we will review.


New member
It worked fine except IE9. So let me know how to set lowest z-index of webrotate 360 product viewer.
In imagerotator.js file at the three places z-index value is assigned when I'm changing it then it would have not work.


Active member
Did you try our css files that come with the viewer under imagerotator/html/css?

I would first try to play with z-index for these two:

.wr360_player and
.wr360_player .container

If this doesn't work, please send us a link with a sample so we could see if something else can be done for your implementation.