jQuery全屏相册插件zoomVisualizer js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery全屏相册插件zoomVisualizer js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery全屏相册插件zoomVisualizer</title>
<link rel="stylesheet" media="screen" type="text/css" href="zoom-visualizer.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/ZoomVisualizer.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
    $(window).ZoomVisualizer({
        added: added,
        removed: removed,
        object: '#zoom-visualizer',
        resizeInitial: true,
        centerThumbs: true,
        loader: "img/ajax-loader-overlay.gif",
        sliderOrientation: "vertical",
        positionZoom: {
            left: 10,
            right: 10,
            top:10,
            bottom:10
        }
    });
    function added() {
        console.log("相册打开了！");
    }
    function removed() {
        console.log("相册关闭了！");
    }
});
</script>
<style type="text/css">
.clear {
	clear: both !important;
	float: none !important;
	margin: 0px !important;
	padding: 0px !important;
	height: 0px !important;
	width: 0px !important
}
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.clearfix {
	display: inline-block;
}
html[xmlns] .clearfix {
	display: block;
}
* html .clearfix {
	height: 1%;
}
img {
	display: block;
}
input, textarea {
	color: #999999;
}
select {
	color: #999999;
}
.oldBrowser {
	display: none !important
}
.center {
	width: 1000px;
	margin: 0 auto;
	text-align: left
}
body {
	background: #f7f6f6;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: #555;
	font-weight: 100;
}
</style>
</head>

<body>
<!--<h1>jQuery zoomVisualizer Plugin Demo</h1>-->
<div id="zoom-visualizer">
  <div class="lightbox-ofertas-bg"></div>
  <div class="lightbox">
    <div class="header">
      <div class="inside">
        <div id="wrapper-fechar" class="tooltip-content">
          <div class="tooltip">
            <p>Close</p>
            <span></span> </div>
          <a href="" class="fechar tooltip-caller"></a>
          <div class="clear"></div>
        </div>
        <div id="zoom">
          <div>
            <div class="tooltip-content">
              <div class="tooltip">
                <p>Zoom Out</p>
                <span></span> </div>
              <a href="#" class="zoom-out tooltip-caller"></a> </div>
            <div id="wrapper-barra-zoom" class="tooltip-content">
              <div class="tooltip">
                <p>Zoom</p>
                <span></span> </div>
              <div class="tooltip-caller wrapper-barra"> <span id="barra"> <strong id="scroll" class="ui-draggable" style="position: relative; left: 0px;"> </strong> </span> </div>
            </div>
            <div class="tooltip-content">
              <div class="tooltip">
                <p>Zoom In</p>
                <span></span> </div>
              <a href="#" class="zoom-in tooltip-caller"></a> </div>
            <div class="clear"></div>
          </div>
        </div>
        <div class="clear"></div>
      </div>
    </div>
    
    <div class="content"> <a href="" id="next"></a>
      <div class="wrapper" style="width: 1415px; height: 362px;">
      	<img src="img/camiseta_hombre_jackknife_negra.jpg" class="dragme">
      </div>
      <a href="" id="before"></a>
    </div>
    <div class="footer">
      <a href="#" id="aba-lista"><span>Hide Thumbnails</span></a>
      <div id="listagem-imagens">
        <div>
            <a class="item-zoom-image ativo" href="img/camiseta_hombre_jackknife_negra.jpg" alt="0"><img src="img/camiseta_hombre_jackknife_negra-thumb.jpg"> </a>
            <a class="item-zoom-image" href="img/design.png" alt="1"><img src="img/design-thumb.png"> </a>
            <a class="item-zoom-image" href="img/camiseta_hombre_lumberjack_blanca.jpg" alt="2"> <img src="img/camiseta_hombre_lumberjack_blanca-thumb.jpg"> </a>
            <a class="item-zoom-image" href="img/camiseta_hombre_mr-speed_blanca1.jpg" alt="2"> <img src="img/camiseta_hombre_mr-speed_blanca1-thumb.jpg"> </a>
            <div class="clear"></div>
        </div>
      </div>      
    </div>
  </div>
</div>
</body>
</html>

JS代码(ZoomVisualizer.js):

(function($){
	//$.fn.ZoomVisualizer = function( method ){
	//var methods ={
	init:function( options ){
	return this.each(function(){
	_init(this,options);
}
);
}
}
;
	var defaults ={
	object:null,resizeInitial:false,// redimensiona ou não a imagem em zoomsliderOrientation:"horizontal",positionZoom:{
	left:0,right:0,top:0,bottom:0}
,//margem para a mascara do zoom na telacenterThumbs:false,loader:"",added:function(){
}
,removed:function(){
}
}
;
	var _this;
	var _imageLoad;
	//nome da imagem a ser carregadavar _data;
	//dadosvar _wrapperResize;
	//objeto a ser redimensionado/ movimentadovar _originalWidth;
	var _originalHeight;
	var _wrapper;
	var hDragMove;
	var btZoomIn;
	var btZoomOut;
	var posDragMove = 0;
	var moveDrag = 2;
	var firstLoad;
	var wrapper_geral;
	var scaleResize = 1;
	var index_ativo = 0;
	var plugin_settings;
	// Method calling logicif ( methods[method] )//caso exista um método,esse método é chamado{
	return methods[ method ].apply( this,Array.prototype.slice.call( arguments,1 ));
}
else if ( typeof method === 'object' || ! method )//caso não exista um método ou seja apenas passado o objeto{
	return methods.init.apply( this,arguments );
}
else//caso o método não exista{
	$.error( 'Method ' + method + ' does not exist on ZoomVisualizer' );
}
function _init($this,options){
	var $this= $($this);
	var options= $.extend(defaults,options);
	plugin_settings= options;
	$this.data(options);
	_this = $this;
	var data= $this.data();
	if(options.object == ''){
	alert('The object is empty!!!!');
}
else{
	initialize($this);
}
}
function initialize($this){
	_data = $this.data();
	wrapper_geral = $(_data.object);
	wrapper_geral.fadeIn(400);
	plugin_settings.added.call(this,{
	object:wrapper_geral}
);
	//prevent body from scrolljQuery(document.body).css('overflow','hidden');
	_imageLoad = wrapper_geral.find(".wrapper img").attr("src");
	_wrapper = wrapper_geral.find(".wrapper");
	btZoomIn = $(wrapper_geral.find(".zoom-in"));
	btZoomIn.click(zoomIn);
	btZoomOut = $(wrapper_geral.find(".zoom-out"));
	btZoomOut.click(zoomOut);
	//posiciona a imagem do zoom$(".content",wrapper_geral).css({
	top:_data.positionZoom.top,left:_data.positionZoom.left}
);
	//wrapper_geral.addClass(_data.sliderOrientation);
	//posiciona os thumbs caso centerThumbs == trueif(_data.centerThumbs == true){
	var _width = 0;
	$('#listagem-imagens a',wrapper_geral).each(function(index,value){
	_width += $(this).outerWidth(true);
}
);
	if(_width > $(window).width()){
	$('#listagem-imagens > div',wrapper_geral).width(_width+5);
	$('#listagem-imagens',wrapper_geral).css({
	overflow:"scroll"}
);
	_width = $(window).width() - 10;
}
$('#listagem-imagens',wrapper_geral).width(_width+5);
	$('#listagem-imagens',wrapper_geral).css({
	margin:'0 auto'}
);
}
//oculta footer e as setas caso tenha apenas um item no zoomif($('#listagem-imagens a',wrapper_geral).size() == 1){
	$(".footer",wrapper_geral).remove();
	$(".content #next",wrapper_geral).hide();
	$(".content #before",wrapper_geral).hide();
}
if(_data.sliderOrientation == "vertical"){
	$(".tooltip-caller",wrapper_geral).mouseenter(function(){
	var _tooltip = $(".tooltip",$(this).parent());
	_tooltip.css({
	display:'block',opacity:0}
);
	if(!_tooltip.hasClass('positioned')){
	_tooltip.addClass('positioned');
	_tooltip.css({
	left:-$("p",_tooltip).outerWidth(true)-10,width:$("p",_tooltip).outerWidth(true)}
);
}
_tooltip.animate({
	opacity:1}
,80);
}
);
	$(".tooltip-caller",wrapper_geral).mouseleave(function(){
	var _tooltip = $(".tooltip",$(this).parent());
	_tooltip.hide(100);
}
);
}
//---------------------------------//drag zoom//----------var _drag = wrapper_geral.find("#barra #scroll");
	//barravar _box = wrapper_geral.find("#barra");
	hDragMove = (_data.sliderOrientation == "horizontal") ? _box.width()-_drag.width():_box.height()-_drag.height();
	var _axis = (_data.sliderOrientation == "horizontal") ? 'x':'y';
	_drag.draggable({
	axis:_axis,containment:'parent',cursor:'pointer',appendTo:'body',scroll:false,drag:function(event,ui){
	reposImage();
}
,start:function(event,ui){
	_box.parent().parent().mouseleave(function(){
	$('.ui-draggable-dragging',wrapper_geral).draggable( 'option','revert',false ).trigger('mouseup');
}
);
}
,stop:function(event,ui){
	//box.parent().parent().unbind();
}
}
);
	//---------------------//move image with mouse wheel/*_wrapper.bind('mousewheel',function(event,delta){
	if(_wrapperResize){
	//-----------------------------------var posDrag = parseFloat(getSize(_drag,"left"));
	var pctBox = (_wrapper.height()/_wrapperResize.height())*5;
	var _rate = 1;
	if(posDrag-(delta*_rate*pctBox) >= 0 && posDrag-(delta*_rate*pctBox) <= hDragMove){
	_drag.css('left',(posDrag-(delta*_rate*pctBox))+"px");
}
else{
	if(posDrag-(delta*_rate) < 0){
	_drag.css('left',"0px");
}
if(posDrag-(delta*_rate) > hDragMove){
	_drag.css('left',hDragMove+"px");
}
}
reposImage();
}
//-----------------------------------return false;
}
);
	*/
//-----------------------------var _btFechar = $(wrapper_geral.find(".fechar"));
	//barra_btFechar.click(function (){
	$(_data.object).animate({
	opacity:0}
,300,function(){
	$(_data.object).remove();
	destroy();
}
);
	jQuery(document.body).css('overflow','auto');
	return false;
}
);
	initListaThumbs();
	//inicia a lista com os thumbsloadImage();
	//carrega imageminitSetas();
	//inicia as setasinitAbaMinimizar();
	moveImage();
	//redimensionamento do browser$(window).resize(resizeHandler);
	resizeHandler();
}
//end initializefunction moveImage (){
	//$( "#zoom-visualizer .wrapper" ).mousemove(function( event ){
	//console.log ( event.clientX + "," + event.clientY);
	//}
);
	$(".wrapper",wrapper_geral).mousemove(function (e){
	//http://www.quirksmode.org/js/events_properties.html//getting current mouse positionvar posx = 0;
	var posy = 0;
	posx = e.clientX;
	posy = e.clientY;
	var _left = getSize($(this).parent(),'left');
	var _top = getSize($(this).parent(),'top');
	posx = posx - _left;
	posy = posy - _top;
	//------------------//movimento da imagem//------------------var _thumb = $(".dragme",$(this));
	var _mouseY = posy;
	var _mouseX = posx;
	var ctposY = getSize(_thumb,'top');
	var ctposX = getSize(_thumb,'left');
	var widthMask = $(this).width();
	var heightMask = $(this).height();
	var xTemp = (_mouseX/widthMask)*((widthMask- _thumb.width()));
	var dgmX = (xTemp-ctposX)/5;
	var yTemp = (_mouseY/heightMask)*((heightMask - _thumb.height()));
	var dgmY = (yTemp-ctposY)/5;
	if(_thumb.height()>heightMask){
	if (dgmY < -0.050000 || dgmY > 0.050000)_thumb.css({
	top:(ctposY + dgmY)}
);
}
if(_thumb.width()>widthMask){
	if (dgmX < -0.050000 || dgmX > 0.050000)_thumb.css({
	left:(ctposX + dgmX)}
);
}
//------------------//------------------}
);
}
function getSize(_obj,_css){
	var _regExp = new RegExp("[a-z][A-Z]","g");
	return parseFloat(_obj.css(_css).replace(_regExp,""));
}
function initAbaMinimizar (){
	$("#aba-lista",wrapper_geral).click(function(){
	//---------------if($(".footer",wrapper_geral).hasClass("closed")){
	$(this).find("span").text("Ocultar miniaturas");
	$(".footer",wrapper_geral).animate({
	height:135}
,0);
	$("#listagem-imagens",wrapper_geral).show();
	$(" .footer",wrapper_geral).removeClass("closed");
}
else{
	$(this).find("span").text("Show Thumbnails");
	$(".footer",wrapper_geral).animate({
	height:10}
,0);
	$("#listagem-imagens",wrapper_geral).hide();
	$(".footer",wrapper_geral).addClass("closed");
}
resizeHandler();
	reposImage ();
	//--------------return false;
}
);
}
function destroy (){
	//--------_this = null;
	_imageLoad = null;
	//nome da imagem a ser carregada_data = null;
	//dados_wrapperResize = null;
	//objeto a ser redimensionado/ movimentado_originalWidth = null;
	_originalHeight = null;
	_wrapper = null;
	hDragMove = null;
	btZoomIn = null;
	btZoomOut = null;
	posDragMove = 0;
	moveDrag = 2;
	firstLoad = null;
	wrapper_geral = null;
	scaleResize = 1;
	index_ativo = 0;
	plugin_settings.removed.call(this,{
}
);
}
//--------------------function initListaThumbs (){
	//item-zoom-image$(wrapper_geral.find(".footer .item-zoom-image")).each(function(index,element){
	if(index == index_ativo){
	$(element).addClass('ativo');
}
$(element).attr("alt",index);
	$(element).click(function(){
	if(!$(element).hasClass("ativo")){
	index_ativo = $(this).attr("alt");
	changeImage({
	bt:$(this)}
);
}
//end ifreturn false;
}
);
	//end click}
);
	//end each}
//end lista thumbsfunction changeImage (obj_){
	if(wrapper_geral.find(".footer .ativo").size()>0){
	wrapper_geral.find(".footer .ativo").removeClass("ativo");
}
obj_.bt.addClass("ativo");
	_wrapperResize.fadeOut(300,function(){
	_wrapperResize.remove();
	_wrapperResize = null;
	_imageLoad = obj_.bt.attr("href");
	loadImage ();
}
);
}
function initSetas (){
	var _setaEsq = $(wrapper_geral.find("#before"));
	var _setaDir = $(wrapper_geral.find("#next"));
	var _length = $(wrapper_geral.find(".footer .item-zoom-image")).length;
	if(_length==1){
	_setaDir.hide();
	_setaEsq.hide();
}
_setaDir.click(function(){
	if(index_ativo < _length-1){
	index_ativo++;
}
else{
	index_ativo = 0;
}
changeImageBySeta ();
	//-------return false;
}
);
	_setaEsq.click(function(){
	if(index_ativo == 0){
	index_ativo = _length-1;
}
else{
	index_ativo --;
}
changeImageBySeta ();
	//-------return false;
}
);
}
//end init setasfunction changeImageBySeta (){
	$(wrapper_geral.find(".footer .item-zoom-image")).each(function(index,element){
	if(index_ativo==index){
	changeImage({
	bt:$(this)}
);
}
}
);
}
//--------------------//bts de zoomfunction zoomIn (){
	var _drag = $(wrapper_geral.find("#barra #scroll"));
	//barravar _box = $(wrapper_geral.find("#barra"));
	var _maxValue = (_data.sliderOrientation == "horizontal") ? _box.width() - _drag.width():_box.height() - _drag.height();
	if(posDragMove<_maxValue){
	posDragMove += moveDrag;
	if(_data.sliderOrientation == "horizontal"){
	_drag.css({
	left:posDragMove}
);
}
else{
	_drag.css({
	top:posDragMove}
);
}
reposImage();
}
else{
	//do nothing}
return false;
}
function zoomOut (){
	var _drag = $(wrapper_geral.find("#barra #scroll"));
	//barravar _box = $(wrapper_geral.find("#barra"));
	var _maxValue = (_data.sliderOrientation == "horizontal") ? _box.width() - _drag.width():_box.height() - _drag.height();
	if(posDragMove>0){
	posDragMove -= moveDrag;
	if(_data.sliderOrientation == "horizontal"){
	_drag.css({
	left:posDragMove}
);
}
else{
	_drag.css({
	top:posDragMove}
);
}
reposImage();
}
else{
	//do nothing}
return false;
}
//------------------------------------function resizeHandler (){
	var _wrapper = wrapper_geral.find(".wrapper");
	var _width = $(window).width()-(_data.positionZoom.left+_data.positionZoom.right);
	var _height = $(window).height() - (_data.positionZoom.top+_data.positionZoom.bottom) - wrapper_geral.find(".footer").height()-$("#aba-lista").height();
	_wrapper.css({
	width:_width,height:_height}
);
	reposImage ();
}
//end resizeHandler//------------------------------------function loadImage (){
	var _body = jQuery(document.body);
	//remove a imagem caso existawrapper_geral.find(".wrapper img").remove();
	var img = new Image();
	if(_data.loader != ""){
	var _loader = $("<div class='loader_overlay'><img src='"+_data.loader+"'></div>");
	_body.append(_loader);
}
$(img).load(function(){
	firstLoad = false;
	if(_data.loader != ""){
	_loader.remove();
}
wrapper_geral.find(".wrapper").append($(this));
	//image loaded_wrapperResize = wrapper_geral.find(".wrapper img");
	_wrapperResize.css({
	display:"block",opacity:0}
);
	_wrapperResize.animate({
	opacity:1}
,300);
	_wrapperResize.addClass('dragme');
	_originalWidth = _wrapperResize.width();
	_originalHeight = _wrapperResize.height();
	var _drag = wrapper_geral.find("#barra #scroll");
	//barraif(_data.sliderOrientation == "horizontal"){
	_drag.css({
	left:0}
);
}
else{
	_drag.css({
	top:0}
);
}
reposImage();
}
).attr({
	src:_imageLoad}
).error(function(){
	//do something if image cannot load}
);
}
//end loadImage//------------------------------------function reposImage (){
	var _drag = wrapper_geral.find("#barra #scroll");
	//barravar _box = wrapper_geral.find("#barra");
	var posDrag = (_data.sliderOrientation == "horizontal") ? parseFloat(getSize(_drag,"left")):parseFloat(getSize(_drag,"top"));
	var _newWid;
	var _newHei;
	var _posMaxDrag = (_data.sliderOrientation == "horizontal") ? _box.width()-_drag.width():_box.height()-_drag.height();
	if(_wrapperResize){
	if(!firstLoad){
	//checa se foi a primeira vez que a imagem foi carregadafirstLoad = true;
	scaleResize = Math.min(_wrapper.width()/_originalWidth,_wrapper.height()/_originalHeight);
	//checa se a imagem é menor que a altura ou a largura do wrapper com a mascaraif(scaleResize < 1){
}
else{
	scaleResize = 1;
}
if(_data.resizeInitial)//redimensiona imagem para ela caber no frame de visualização{
	_newWid = _originalWidth*scaleResize;
	_newHei = _originalHeight*scaleResize;
}
else{
	_newWid = _originalWidth;
	_newHei = _originalHeight;
	_drag.css({
	left:_posMaxDrag}
);
	posDrag = parseFloat(getSize(_drag,"left"));
}
}
else{
	var _newHeightImg = (((_originalHeight - _wrapper.height())/_posMaxDrag)*posDrag) + _wrapper.height();
	var _scale = _newHeightImg / _originalHeight;
	_newHei = _newHeightImg;
	_newWid = _originalWidth * _scale;
}
posDragMove = posDrag;
	var _center_x = (_wrapper.width()-_newWid)/2;
	var _center_y = (_wrapper.height()-_newHei)/2;
	_left = _center_x;
	_top = _center_y;
	_wrapperResize.css({
	width:_newWid,height:_newHei,left:_left,top:_top}
);
}
}
//end reposImage//===================================================================================//===================================================================================}
;
}
)(jQuery);

CSS代码(zoom-visualizer.css):

/*---------------------LIGHTBOX OFERTAS------------------------------------*/
#zoom-visualizer{display:none;position:fixed;z-index:90000;top:0;left:0;width:100%;height:100%;}
#zoom-visualizer .lightbox{display:block;z-index:6000;}
#zoom-visualizer .header{height:72px;position:fixed;width:100%;z-index:7000;}
#zoom-visualizer .header .inside{}
#zoom-visualizer .header .inside div .fechar{display:block;height:26px;width:28px;background:url(img/bt-fechar-zoomvisualizer.png) no-repeat 0 0 #313131;}
#zoom-visualizer .header .inside #wrapper-fechar{}
#zoom-visualizer .header .inside p{float:left;font-weight:400;font-size:18px;color:#034ea2;margin-top:29px;}
#zoom-visualizer .header .inside #zoom .zoom-out{width:28px;height:26px;display:block;background:url(img/zoom-out.png) no-repeat 0 0 #313131;}
#zoom-visualizer .header .inside #zoom .zoom-in{width:28px;height:26px;display:block;background:url(img/zoom-in.png) no-repeat 0 0 #313131;}
#zoom-visualizer .header .inside #zoom #barra{position:relative;width:5px;height:115px;background-color:#212121;position:relative;display:block}
#zoom-visualizer .header .inside #zoom #wrapper-barra-zoom{background-color:#313131;}
#zoom-visualizer .header .inside #zoom #scroll{display:block;left:0;top:0;background-color:#999479;}
/*zoom horizontal*/
#zoom-visualizer.horizontal .header .inside #zoom{margin:0 0 0 0;float:left;}
#zoom-visualizer.horizontal .header .inside #zoom > div > div{float:left;}
#zoom-visualizer.horizontal .header .inside #wrapper-fechar{float:left;}
#zoom-visualizer.horizontal .header .inside #zoom .zoom-out{margin:0 0 0 0;}
#zoom-visualizer.horizontal .header .inside #zoom .zoom-in{margin:0 0 0 0;}
#zoom-visualizer.horizontal .header .inside #zoom #barra{height:4px;width:115px;}
#zoom-visualizer.horizontal .header .inside #zoom #scroll{display:block;height:5px;width:25px;}
#zoom-visualizer.horizontal .header .inside #zoom img{float:left;margin-left:20px;display:none;}
#zoom-visualizer.horizontal .header{height:30px;position:fixed;width:252px;z-index:7000;right:10px;top:10px;border:none;}
#zoom-visualizer.horizontal .header .inside #wrapper-fechar{border:none;float:right;}
#zoom-visualizer.horizontal .header .inside #zoom #wrapper-barra-zoom{float:left;height:26px;margin:0 3px;}
#zoom-visualizer.horizontal .header .inside #zoom #wrapper-barra-zoom > div{padding:12px 12px 5px 12px;}
/*--------------------------*/
/*zoom vertical*/
#zoom-visualizer.vertical .header .inside #zoom{margin:0 0 0 0;height:172px;}
#zoom-visualizer.vertical .header .inside #zoom .zoom-out{margin:2px 0 2px 0;}
#zoom-visualizer.vertical .header .inside #zoom .zoom-in{margin:2px 0 0 0;}
#zoom-visualizer.vertical .header .inside #zoom #barra{width:4px;height:115px;margin-left:12px;}
#zoom-visualizer.vertical .header .inside #zoom #scroll{display:block;width:5px;height:25px;}
#zoom-visualizer.vertical .header .inside #zoom img{float:left;margin-left:20px;display:none;}
#zoom-visualizer.vertical .header{height:252px;position:fixed;width:30px;z-index:7000;right:10px;top:10px;border:none;}
#zoom-visualizer.vertical .header .inside #wrapper-fechar{border:none;}
#zoom-visualizer.vertical .header .inside #zoom #wrapper-barra-zoom{width:28px;}
#zoom-visualizer.vertical .header .inside #zoom #wrapper-barra-zoom .wrapper-barra{padding:5px 0 5px 0;}
/*--------------------------*/
#zoom-visualizer .content{position:fixed;}
#zoom-visualizer .wrapper{overflow:hidden;position:relative;}
#zoom-visualizer .content img{display:none;position:relative;left:0;top:0;}
#zoom-visualizer .content #next{display:block;width:28px;height:28px;position:absolute;background:url(img/icon-next.png) no-repeat 2px 0 #313131;top:50%;right:50px;z-index:9999;}
#zoom-visualizer .content #before{display:block;width:28px;height:28px;position:absolute;background:url(img/icon-before.png) no-repeat 0 0 #313131;top:50%;left:50px;z-index:9999;}
#zoom-visualizer .footer{background-color:#303030;height:135px;position:fixed;width:100%;bottom:0;}
#zoom-visualizer .footer div a{float:left;width:67px;height:104px;margin:4px 5px 5px 0;position:relative;opacity:.3;}
#zoom-visualizer .footer div a span{width:67px;height:104px;position:absolute;top:0}
#zoom-visualizer .footer div a.ativo,#zoom-visualizer .footer a:hover{opacity:1;}
#zoom-visualizer .footer #listagem-imagens > div{margin-top:13px;}
#zoom-visualizer .lightbox-ofertas-bg{position:fixed;background:url(img/bg-overlay-zoomvisualizer.png) repeat 0 0;width:100%;height:100%;z-index:5000;}
#zoom-visualizer .lightbox{position:absolute;}
#zoom-visualizer .galeria-fotos{display:none;}
#zoom-visualizer #aba-lista{position:absolute;height:30px;width:140px;left:50%;top:-30px;margin-left:-70px;background-color:#303030;text-decoration:none;}
#zoom-visualizer #aba-lista span{color:#999999;display:block;text-align:center;padding-top:5px;font-weight:400;font-size:12px;}
#zoom-visualizer #aba-lista span:hover{color:#ffffff;}
.loader_overlay{position:fixed;width:31px;height:31px;display:block;left:50%;top:50%;margin:-15px 0 0 -15px;z-index:999999;background-color:#ffffff;padding:10px;border-radius:10px;}
#zoom-visualizer.vertical .tooltip-content{position:relative;}
#zoom-visualizer.vertical .tooltip-content .tooltip{position:absolute;top:50%;display:none;margin-top:-13px;width:300px;}
#zoom-visualizer.vertical .tooltip-content .tooltip p{background-color:#313131;padding:3px 15px;color:#89856d;font-size:14px;margin:0;}
#zoom-visualizer.vertical .tooltip-content .tooltip span{right:-6px;top:5px;position:absolute;background:url(img/aba-tooltip.png) no-repeat 0 0;width:7px;height:14px;display:block;}
#zoom-visualizer.horizontal .tooltip-content .tooltip{display:none;}

附件:下载该文件资源,减少时间成本(增值服务)