Hi,
Code which I've written for adding Webrotator 360 product viewer:
<div id="content">
<div id="wr360PlayerId" class="wr360_player">
</div>
<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";
_imageRotator.runImageRotator("wr360PlayerId");
</script>
</div>
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;
background-color:#fff;
z-index: 9999999;
display: none;
color:#000;
}
#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) {
//closeLightbox();
});
//Add Image in body
// $('body').append(theImage);
$('body').append(theShadow);
$('body').append(theLightbox);
}
// remove any previously added content
$('#lightbox').empty();
// 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
ointer;" />');
$('#lightbox').append(theImage);
$(theImage).click(function (e) {
closeLightbox();
});
//
$('#lightbox').append(insertContent);
}
// insert AJAX content
if (ajaxContentUrl != null) {
// temporarily add a "Loading..." message in the lightbox
$('#lightbox').append('<p class="loading">Loading...</p>');
// request AJAX content
$.ajax({
type: 'GET',
url: ajaxContentUrl,
success: function (data) {
// remove "Loading..." message and append AJAX content
$('#lightbox').empty();
$('#lightbox').append(data);
},
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').show();
// $('#lightbox-shadow').show();
$('#lightbox-shadow').fadeIn('fast', function () {
$('#lightbox').fadeIn('fast');
});
})(jQuery); // end jQuery wrapper
}
// close the lightbox
function closeLightbox() {
// jQuery wrapper (optional, for compatibility only)
(function ($) {
// hide lightbox/shadow <div/>'s
$('#lightbox').hide();
//$('#lightbox-shadow').hide();
$('#lightbox-shadow').fadeOut('slow');
// remove contents of lightbox in case a video or other content is actively playing
$('#lightbox').empty();
})(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.
Thanks,
Arun Singh
