Настройка скрипта Light Box2

Angela · December 2, 2009

Здравствуйте уважаемые форумчане!

Хотелось бы настроить прозрачность темного фона между изображением галереи и сайтом. Знаю, что нужно изменить значение... функции? аргумента? opacity от 0 до 1. Умолчальное 0.9

Вот код файла effects.js, если кто знает ткните пожалуйста пальцем

// Copyright © 2005 Thomas Fuchs (http://script.aculo.us, [url="http://mir.aculo.us)"]http://mir.aculo.us)[/url]
// Contributors:
//  Justin Palmer (http://encytemedia.com/)
//  Mark Pilgrim (http://diveintomark.org/)
//  Martin Bialasinki
// 
// See scriptaculous.js for full license.  

/* ————- element ext ————-- */  

// converts rgb() and #xxx to #xxxxxx format,  
// returns self (or first argument) if not convertable  
String.prototype.parseColor = function() {  
  var color = '#';  
  if(this.slice(0,4) == 'rgb(') {  
	var cols = this.slice(4,this.length-1).split(',');  
	var i=0; do { color += parseInt(cols[i]).toColorPart() } while (++i<3);  
  } else {  
	if(this.slice(0,1) == '#') {  
	  if(this.length==4) for(var i=1;i<4;i++) color += (this.charAt(i) + this.charAt(i)).toLowerCase();  
	  if(this.length==7) color = this.toLowerCase();  
	}  
  }  
  return(color.length==7 ? color : (arguments[0] || this));  
}

Element.collectTextNodes = function(element) {  
  return $A($(element).childNodes).collect( function(node) {
	return (node.nodeType==3 ? node.nodeValue : 
	  (node.hasChildNodes() ? Element.collectTextNodes(node) : ''));
  }).flatten().join('');
}

Element.collectTextNodesIgnoreClass = function(element, className) {  
  return $A($(element).childNodes).collect( function(node) {
	return (node.nodeType==3 ? node.nodeValue : 
	  ((node.hasChildNodes() && !Element.hasClassName(node,className)) ? 
		Element.collectTextNodes(node) : ''));
  }).flatten().join('');
}

Element.setStyle = function(element, style) {
  element = $(element);
  for(k in style) element.style[k.camelize()] = style[k];
}

Element.setContentZoom = function(element, percent) {  
  Element.setStyle(element, {fontSize: (percent/100) + 'em'});   
  if(navigator.appVersion.indexOf('AppleWebKit')>0) window.scrollBy(0,0);  
}

Element.getOpacity = function(element){  
  var opacity;
  if (opacity = Element.getStyle(element, 'opacity'))  
	return parseFloat(opacity);  
  if (opacity = (Element.getStyle(element, 'filter') || '').match(/alpha\(opacity=(.*)\)/))  
	if(opacity[1]) return parseFloat(opacity[1]) / 100;  
  return 1.0;  
}

Element.setOpacity = function(element, value){  
  element= $(element);  
  if (value == 1){
	Element.setStyle(element, { opacity: 
	  (/Gecko/.test(navigator.userAgent) && !/Konqueror|Safari|KHTML/.test(navigator.userAgent)) ? 
	  0.9999 : null });
	if(/MSIE/.test(navigator.userAgent))  
	  Element.setStyle(element, {filter: Element.getStyle(element,'filter').replace(/alpha\([^\)]*\)/gi,'')});  
  } else {  
	if(value < 0.00001) value = 0;  
	Element.setStyle(element, {opacity: value});
	if(/MSIE/.test(navigator.userAgent))  
	 Element.setStyle(element, 
	   { filter: Element.getStyle(element,'filter').replace(/alpha\([^\)]*\)/gi,'') +
				 'alpha(opacity='+value*100+')' });  
  }   
}  

Element.getInlineOpacity = function(element){  
  return $(element).style.opacity || '';
}  

Element.childrenWithClassName = function(element, className) {  
  return $A($(element).getElementsByTagName('*')).select(
	function© { return Element.hasClassName(c, className) });
}

Array.prototype.call = function() {
  var args = arguments;
  this.each(function(f){ f.apply(this, args) });
}

/*————————————————————————--*/

var Effect = {
  tagifyText: function(element) {
	var tagifyStyle = 'position:relative';
	if(/MSIE/.test(navigator.userAgent)) tagifyStyle += ';zoom:1';
	element = $(element);
	$A(element.childNodes).each( function(child) {
	  if(child.nodeType==3) {
		child.nodeValue.toArray().each( function(character) {
		  element.insertBefore(
			Builder.node('span',{style: tagifyStyle},
			  character == ' ' ? String.fromCharCode(160) : character), 
			  child);
		});
		Element.remove(child);
	  }
	});
  },
  multiple: function(element, effect) {
	var elements;
	if(((typeof element == 'object') || 
		(typeof element == 'function')) && 
	   (element.length))
	  elements = element;
	else
	  elements = $(element).childNodes;

	var options = Object.extend({
	  speed: 0.1,
	  delay: 0.0
	}, arguments[2] || {});
	var masterDelay = options.delay;

	$A(elements).each( function(element, index) {
	  new effect(element, Object.extend(options, { delay: index * options.speed + masterDelay }));
	});
  },
  PAIRS: {
	'slide':  ['SlideDown','SlideUp'],
	'blind':  ['BlindDown','BlindUp'],
	'appear': ['Appear','Fade']
  },
  toggle: function(element, effect) {
	element = $(element);
	effect = (effect || 'appear').toLowerCase();
	var options = Object.extend({
	  queue: { position:'end', scope:(element.id || 'global') }
	}, arguments[2] || {});
	Effect[Element.visible(element) ? 
	  Effect.PAIRS[effect][1] : Effect.PAIRS[effect][0]](element, options);
  }
};

var Effect2 = Effect; // deprecated

/* ————- transitions ————- */

Effect.Transitions = {}

Effect.Transitions.linear = function(pos) {
  return pos;
}
Effect.Transitions.sinoidal = function(pos) {
  return (-Math.cos(pos*Math.PI)/2) + 0.5;
}
Effect.Transitions.reverse  = function(pos) {
  return 1-pos;
}
Effect.Transitions.flicker = function(pos) {
  return ((-Math.cos(pos*Math.PI)/4) + 0.75) + Math.random()/4;
}
Effect.Transitions.wobble = function(pos) {
  return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5;
}
Effect.Transitions.pulse = function(pos) {
  return (Math.floor(pos*10) % 2 == 0 ? 
	(pos*10-Math.floor(pos*10)) : 1-(pos*10-Math.floor(pos*10)));
}
Effect.Transitions.none = function(pos) {
  return 0;
}
Effect.Transitions.full = function(pos) {
  return 1;
}

/* ————- core effects ————- */

Effect.ScopedQueue = Class.create();
Object.extend(Object.extend(Effect.ScopedQueue.prototype, Enumerable), {
  initialize: function() {
	this.effects  = [];
	this.interval = null;
  },
  _each: function(iterator) {
	this.effects._each(iterator);
  },
  add: function(effect) {
	var timestamp = new Date().getTime();

	var position = (typeof effect.options.queue == 'string') ? 
	  effect.options.queue : effect.options.queue.position;

	switch(position) {
	  case 'front':
		// move unstarted effects after this effect  
		this.effects.findAll(function(e){ return e.state=='idle' }).each( function(e) {
			e.startOn  += effect.finishOn;
			e.finishOn += effect.finishOn;
		  });
		break;
	  case 'end':
		// start effect after last queued effect has finished
		timestamp = this.effects.pluck('finishOn').max() || timestamp;
		break;
	}

	effect.startOn  += timestamp;
	effect.finishOn += timestamp;
	this.effects.push(effect);
	if(!this.interval) 
	  this.interval = setInterval(this.loop.bind(this), 40);
  },
  remove: function(effect) {
	this.effects = this.effects.reject(function(e) { return e==effect });
	if(this.effects.length == 0) {
	  clearInterval(this.interval);
	  this.interval = null;
	}
  },
  loop: function() {
	var timePos = new Date().getTime();
	this.effects.invoke('loop', timePos);
  }
});

Effect.Queues = {
  instances: $H(),
  get: function(queueName) {
	if(typeof queueName != 'string') return queueName;

	if(!this.instances[queueName])
	  this.instances[queueName] = new Effect.ScopedQueue();

	return this.instances[queueName];
  }
}
Effect.Queue = Effect.Queues.get('global');

Effect.DefaultOptions = {
  transition: Effect.Transitions.sinoidal,
  duration:   1.0,   // seconds
  fps:		25.0,  // max. 25fps due to Effect.Queue implementation
  sync:	   false, // true for combining
  from:	   0.0,
  to:		 1.0,
  delay:	  0.0,
  queue:	  'parallel'
}

Effect.Base = function() {};
Effect.Base.prototype = {
  position: null,
  start: function(options) {
	this.options	  = Object.extend(Object.extend({},Effect.DefaultOptions), options || {});
	this.currentFrame = 0;
	this.state		= 'idle';
	this.startOn	  = this.options.delay*1000;
	this.finishOn	 = this.startOn + (this.options.duration*1000);
	this.event('beforeStart');
	if(!this.options.sync)
	  Effect.Queues.get(typeof this.options.queue == 'string' ? 
		'global' : this.options.queue.scope).add(this);
  },
  loop: function(timePos) {
	if(timePos >= this.startOn) {
	  if(timePos >= this.finishOn) {
		this.render(1.0);
		this.cancel();
		this.event('beforeFinish');
		if(this.finish) this.finish(); 
		this.event('afterFinish');
		return;  
	  }
	  var pos   = (timePos - this.startOn) / (this.finishOn - this.startOn);
	  var frame = Math.round(pos * this.options.fps * this.options.duration);
	  if(frame > this.currentFrame) {
		this.render(pos);
		this.currentFrame = frame;
	  }
	}
  },
  render: function(pos) {
	if(this.state == 'idle') {
	  this.state = 'running';
	  this.event('beforeSetup');
	  if(this.setup) this.setup();
	  this.event('afterSetup');
	}
	if(this.state == 'running') {
	  if(this.options.transition) pos = this.options.transition(pos);
	  pos *= (this.options.to-this.options.from);
	  pos += this.options.from;
	  this.position = pos;
	  this.event('beforeUpdate');
	  if(this.update) this.update(pos);
	  this.event('afterUpdate');
	}
  },
  cancel: function() {
	if(!this.options.sync)
	  Effect.Queues.get(typeof this.options.queue == 'string' ? 
		'global' : this.options.queue.scope).remove(this);
	this.state = 'finished';
  },
  event: function(eventName) {
	if(this.options[eventName + 'Internal']) this.options[eventName + 'Internal'](this);
	if(this.options[eventName]) this.options[eventName](this);
  },
  inspect: function() {
	return '#<Effect:' + $H(this).inspect() + ',options:' + $H(this.options).inspect() + '>';
  }
}

Effect.Parallel = Class.create();
Object.extend(Object.extend(Effect.Parallel.prototype, Effect.Base.prototype), {
  initialize: function(effects) {
	this.effects = effects || [];
	this.start(arguments[1]);
  },
  update: function(position) {
	this.effects.invoke('render', position);
  },
  finish: function(position) {
	this.effects.each( function(effect) {
	  effect.render(1.0);
	  effect.cancel();
	  effect.event('beforeFinish');
	  if(effect.finish) effect.finish(position);
	  effect.event('afterFinish');
	});
  }
});

Effect.Opacity = Class.create();
Object.extend(Object.extend(Effect.Opacity.prototype, Effect.Base.prototype), {
  initialize: function(element) {
	this.element = $(element);
	// make this work on IE on elements without 'layout'
	if(/MSIE/.test(navigator.userAgent) && (!this.element.hasLayout))
	  Element.setStyle(this.element, {zoom: 1});
	var options = Object.extend({
	  from: Element.getOpacity(this.element) || 0.0,
	  to:   1.0
	}, arguments[1] || {});
	this.start(options);
  },
  update: function(position) {
	Element.setOpacity(this.element, position);
  }
});

Effect.Move = Class.create();
Object.extend(Object.extend(Effect.Move.prototype, Effect.Base.prototype), {
  initialize: function(element) {
	this.element = $(element);
	var options = Object.extend({
	  x:	0,
	  y:	0,
	  mode: 'relative'
	}, arguments[1] || {});
	this.start(options);
  },
  setup: function() {
	// Bug in Opera: Opera returns the "real" position of a static element or
	// relative element that does not have top/left explicitly set.
	// ==> Always set top and left for position relative elements in your stylesheets 
	// (to 0 if you do not need them) 
	Element.makePositioned(this.element);
	this.originalLeft = parseFloat(Element.getStyle(this.element,'left') || '0');
	this.originalTop  = parseFloat(Element.getStyle(this.element,'top')  || '0');
	if(this.options.mode == 'absolute') {
	  // absolute movement, so we need to calc deltaX and deltaY
	  this.options.x = this.options.x - this.originalLeft;
	  this.options.y = this.options.y - this.originalTop;
	}
  },
  update: function(position) {
	Element.setStyle(this.element, {
	  left: this.options.x  * position + this.originalLeft + 'px',
	  top:  this.options.y  * position + this.originalTop  + 'px'
	});
  }
});

// for backwards compatibility
Effect.MoveBy = function(element, toTop, toLeft) {
  return new Effect.Move(element, 
	Object.extend({ x: toLeft, y: toTop }, arguments[3] || {}));
};

Effect.Scale = Class.create();
Object.extend(Object.extend(Effect.Scale.prototype, Effect.Base.prototype), {
  initialize: function(element, percent) {
	this.element = $(element)
	var options = Object.extend({
	  scaleX: true,
	  scaleY: true,
	  scaleContent: true,
	  scaleFromCenter: false,
	  scaleMode: 'box',		// 'box' or 'contents' or {} with provided values
	  scaleFrom: 100.0,
	  scaleTo:   percent
	}, arguments[2] || {});
	this.start(options);
  },
  setup: function() {
	this.restoreAfterFinish = this.options.restoreAfterFinish || false;
	this.elementPositioning = Element.getStyle(this.element,'position');

	this.originalStyle = {};
	['top','left','width','height','fontSize'].each( function(k) {
	  this.originalStyle[k] = this.element.style[k];
	}.bind(this));

	this.originalTop  = this.element.offsetTop;
	this.originalLeft = this.element.offsetLeft;

	var fontSize = Element.getStyle(this.element,'font-size') || '100%';
	['em','px','%'].each( function(fontSizeType) {
	  if(fontSize.indexOf(fontSizeType)>0) {
		this.fontSize	 = parseFloat(fontSize);
		this.fontSizeType = fontSizeType;
	  }
	}.bind(this));

	this.factor = (this.options.scaleTo - this.options.scaleFrom)/100;

	this.dims = null;
	if(this.options.scaleMode=='box')
	  this.dims = [this.element.offsetHeight, this.element.offsetWidth];
	if(/^content/.test(this.options.scaleMode))
	  this.dims = [this.element.scrollHeight, this.element.scrollWidth];
	if(!this.dims)
	  this.dims = [this.options.scaleMode.originalHeight,
				   this.options.scaleMode.originalWidth];
  },
  update: function(position) {
	var currentScale = (this.options.scaleFrom/100.0) + (this.factor * position);
	if(this.options.scaleContent && this.fontSize)
	  Element.setStyle(this.element, {fontSize: this.fontSize * currentScale + this.fontSizeType });
	this.setDimensions(this.dims[0] * currentScale, this.dims[1] * currentScale);
  },
  finish: function(position) {
	if (this.restoreAfterFinish) Element.setStyle(this.element, this.originalStyle);
  },
  setDimensions: function(height, width) {
	var d = {};
	if(this.options.scaleX) d.width = width + 'px';
	if(this.options.scaleY) d.height = height + 'px';
	if(this.options.scaleFromCenter) {
	  var topd  = (height - this.dims[0])/2;
	  var leftd = (width  - this.dims[1])/2;
	  if(this.elementPositioning == 'absolute') {
		if(this.options.scaleY) d.top = this.originalTop-topd + 'px';
		if(this.options.scaleX) d.left = this.originalLeft-leftd + 'px';
	  } else {
		if(this.options.scaleY) d.top = -topd + 'px';
		if(this.options.scaleX) d.left = -leftd + 'px';
	  }
	}
	Element.setStyle(this.element, d);
  }
});

Effect.Highlight = Class.create();
Object.extend(Object.extend(Effect.Highlight.prototype, Effect.Base.prototype), {
  initialize: function(element) {
	this.element = $(element);
	var options = Object.extend({ startcolor: '#ffff99' }, arguments[1] || {});
	this.start(options);
  },
  setup: function() {
	// Prevent executing on elements not in the layout flow
	if(Element.getStyle(this.element, 'display')=='none') { this.cancel(); return; }
	// Disable background image during the effect
	this.oldStyle = {
	  backgroundImage: Element.getStyle(this.element, 'background-image') };
	Element.setStyle(this.element, {backgroundImage: 'none'});
	if(!this.options.endcolor)
	  this.options.endcolor = Element.getStyle(this.element, 'background-color').parseColor('#ffffff');
	if(!this.options.restorecolor)
	  this.options.restorecolor = Element.getStyle(this.element, 'background-color');
	// init color calculations
	this._base  = $R(0,2).map(function(i){ return parseInt(this.options.startcolor.slice(i*2+1,i*2+3),16) }.bind(this));
	this._delta = $R(0,2).map(function(i){ return parseInt(this.options.endcolor.slice(i*2+1,i*2+3),16)-this._base[i] }.bind(this));
  },
  update: function(position) {
	Element.setStyle(this.element,{backgroundColor: $R(0,2).inject('#',function(m,v,i){
	  return m+(Math.round(this._base[i]+(this._delta[i]*position)).toColorPart()); }.bind(this)) });
  },
  finish: function() {
	Element.setStyle(this.element, Object.extend(this.oldStyle, {
	  backgroundColor: this.options.restorecolor
	}));
  }
});

Effect.ScrollTo = Class.create();
Object.extend(Object.extend(Effect.ScrollTo.prototype, Effect.Base.prototype), {
  initialize: function(element) {
	this.element = $(element);
	this.start(arguments[1] || {});
  },
  setup: function() {
	Position.prepare();
	var offsets = Position.cumulativeOffset(this.element);
	if(this.options.offset) offsets[1] += this.options.offset;
	var max = window.innerHeight ? 
	  window.height - window.innerHeight :
	  document.body.scrollHeight - 
		(document.documentElement.clientHeight ? 
		  document.documentElement.clientHeight : document.body.clientHeight);
	this.scrollStart = Position.deltaY;
	this.delta = (offsets[1] > max ? max : offsets[1]) - this.scrollStart;
  },
  update: function(position) {
	Position.prepare();
	window.scrollTo(Position.deltaX, 
	  this.scrollStart + (position*this.delta));
  }
});

/* ————- combination effects ————- */

Effect.Fade = function(element) {
  var oldOpacity = Element.getInlineOpacity(element);
  var options = Object.extend({
  from: Element.getOpacity(element) || 1.0,
  to:   0.0,
  afterFinishInternal: function(effect) { with(Element) { 
	if(effect.options.to!=0) return;
	hide(effect.element);
	setStyle(effect.element, {opacity: oldOpacity}); }}
  }, arguments[1] || {});
  return new Effect.Opacity(element,options);
}

Effect.Appear = function(element) {
  var options = Object.extend({
  from: (Element.getStyle(element, 'display') == 'none' ? 0.0 : Element.getOpacity(element) || 0.0),
  to:   1.0,
  beforeSetup: function(effect) { with(Element) {
	setOpacity(effect.element, effect.options.from);
	show(effect.element); }}
  }, arguments[1] || {});
  return new Effect.Opacity(element,options);
}

Effect.Puff = function(element) {
  element = $(element);
  var oldStyle = { opacity: Element.getInlineOpacity(element), position: Element.getStyle(element, 'position') };
  return new Effect.Parallel(
   [ new Effect.Scale(element, 200, 
	  { sync: true, scaleFromCenter: true, scaleContent: true, restoreAfterFinish: true }), 
	 new Effect.Opacity(element, { sync: true, to: 0.0 } ) ], 
	 Object.extend({ duration: 1.0, 
	  beforeSetupInternal: function(effect) { with(Element) {
		setStyle(effect.effects[0].element, {position: 'absolute'}); }},
	  afterFinishInternal: function(effect) { with(Element) {
		 hide(effect.effects[0].element);
		 setStyle(effect.effects[0].element, oldStyle); }}
	 }, arguments[1] || {})
   );
}

Effect.BlindUp = function(element) {
  element = $(element);
  Element.makeClipping(element);
  return new Effect.Scale(element, 0, 
	Object.extend({ scaleContent: false, 
	  scaleX: false, 
	  restoreAfterFinish: true,
	  afterFinishInternal: function(effect) { with(Element) {
		[hide, undoClipping].call(effect.element); }} 
	}, arguments[1] || {})
  );
}

Effect.BlindDown = function(element) {
  element = $(element);
  var oldHeight = Element.getStyle(element, 'height');
  var elementDimensions = Element.getDimensions(element);
  return new Effect.Scale(element, 100, 
	Object.extend({ scaleContent: false, 
	  scaleX: false,
	  scaleFrom: 0,
	  scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
	  restoreAfterFinish: true,
	  afterSetup: function(effect) { with(Element) {
		makeClipping(effect.element);
		setStyle(effect.element, {height: '0px'});
		show(effect.element); 
	  }},  
	  afterFinishInternal: function(effect) { with(Element) {
		undoClipping(effect.element);
		setStyle(effect.element, {height: oldHeight});
	  }}
	}, arguments[1] || {})
  );
}

Effect.SwitchOff = function(element) {
  element = $(element);
  var oldOpacity = Element.getInlineOpacity(element);
  return new Effect.Appear(element, { 
	duration: 0.4,
	from: 0,
	transition: Effect.Transitions.flicker,
	afterFinishInternal: function(effect) {
	  new Effect.Scale(effect.element, 1, { 
		duration: 0.3, scaleFromCenter: true,
		scaleX: false, scaleContent: false, restoreAfterFinish: true,
		beforeSetup: function(effect) { with(Element) {
		  [makePositioned,makeClipping].call(effect.element);
		}},
		afterFinishInternal: function(effect) { with(Element) {
		  [hide,undoClipping,undoPositioned].call(effect.element);
		  setStyle(effect.element, {opacity: oldOpacity});
		}}
	  })
	}
  });
}

Effect.DropOut = function(element) {
  element = $(element);
  var oldStyle = {
	top: Element.getStyle(element, 'top'),
	left: Element.getStyle(element, 'left'),
	opacity: Element.getInlineOpacity(element) };
  return new Effect.Parallel(
	[ new Effect.Move(element, {x: 0, y: 100, sync: true }), 
	  new Effect.Opacity(element, { sync: true, to: 0.0 }) ],
	Object.extend(
	  { duration: 0.5,
		beforeSetup: function(effect) { with(Element) {
		  makePositioned(effect.effects[0].element); }},
		afterFinishInternal: function(effect) { with(Element) {
		  [hide, undoPositioned].call(effect.effects[0].element);
		  setStyle(effect.effects[0].element, oldStyle); }} 
	  }, arguments[1] || {}));
}

Effect.Shake = function(element) {
  element = $(element);
  var oldStyle = {
	top: Element.getStyle(element, 'top'),
	left: Element.getStyle(element, 'left') };
	  return new Effect.Move(element, 
		{ x:  20, y: 0, duration: 0.05, afterFinishInternal: function(effect) {
	  new Effect.Move(effect.element,
		{ x: -40, y: 0, duration: 0.1,  afterFinishInternal: function(effect) {
	  new Effect.Move(effect.element,
		{ x:  40, y: 0, duration: 0.1,  afterFinishInternal: function(effect) {
	  new Effect.Move(effect.element,
		{ x: -40, y: 0, duration: 0.1,  afterFinishInternal: function(effect) {
	  new Effect.Move(effect.element,
		{ x:  40, y: 0, duration: 0.1,  afterFinishInternal: function(effect) {
	  new Effect.Move(effect.element,
		{ x: -20, y: 0, duration: 0.05, afterFinishInternal: function(effect) { with(Element) {
		undoPositioned(effect.element);
		setStyle(effect.element, oldStyle);
  }}}) }}) }}) }}) }}) }});
}

Effect.SlideDown = function(element) {
  element = $(element);
  Element.cleanWhitespace(element);
  // SlideDown need to have the content of the element wrapped in a container element with fixed height!
  var oldInnerBottom = Element.getStyle(element.firstChild, 'bottom');
  var elementDimensions = Element.getDimensions(element);
  return new Effect.Scale(element, 100, Object.extend({ 
	scaleContent: false, 
	scaleX: false, 
	scaleFrom: 0,
	scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
	restoreAfterFinish: true,
	afterSetup: function(effect) { with(Element) {
	  makePositioned(effect.element);
	  makePositioned(effect.element.firstChild);
	  if(window.opera) setStyle(effect.element, {top: ''});
	  makeClipping(effect.element);
	  setStyle(effect.element, {height: '0px'});
	  show(element); }},
	afterUpdateInternal: function(effect) { with(Element) {
	  setStyle(effect.element.firstChild, {bottom:
		(effect.dims[0] - effect.element.clientHeight) + 'px' }); }},
	afterFinishInternal: function(effect) { with(Element) {
	  undoClipping(effect.element); 
	  undoPositioned(effect.element.firstChild);
	  undoPositioned(effect.element);
	  setStyle(effect.element.firstChild, {bottom: oldInnerBottom}); }}
	}, arguments[1] || {})
  );
}

Effect.SlideUp = function(element) {
  element = $(element);
  Element.cleanWhitespace(element);
  var oldInnerBottom = Element.getStyle(element.firstChild, 'bottom');
  return new Effect.Scale(element, 0, 
   Object.extend({ scaleContent: false, 
	scaleX: false, 
	scaleMode: 'box',
	scaleFrom: 100,
	restoreAfterFinish: true,
	beforeStartInternal: function(effect) { with(Element) {
	  makePositioned(effect.element);
	  makePositioned(effect.element.firstChild);
	  if(window.opera) setStyle(effect.element, {top: ''});
	  makeClipping(effect.element);
	  show(element); }},  
	afterUpdateInternal: function(effect) { with(Element) {
	  setStyle(effect.element.firstChild, {bottom:
		(effect.dims[0] - effect.element.clientHeight) + 'px' }); }},
	afterFinishInternal: function(effect) { with(Element) {
		[hide, undoClipping].call(effect.element); 
		undoPositioned(effect.element.firstChild);
		undoPositioned(effect.element);
		setStyle(effect.element.firstChild, {bottom: oldInnerBottom}); }}
   }, arguments[1] || {})
  );
}

// Bug in opera makes the TD containing this element expand for a instance after finish 
Effect.Squish = function(element) {
  return new Effect.Scale(element, window.opera ? 1 : 0, 
	{ restoreAfterFinish: true,
	  beforeSetup: function(effect) { with(Element) {
		makeClipping(effect.element); }},  
	  afterFinishInternal: function(effect) { with(Element) {
		hide(effect.element); 
		undoClipping(effect.element); }}
  });
}

Effect.Grow = function(element) {
  element = $(element);
  var options = Object.extend({
	direction: 'center',
	moveTransistion: Effect.Transitions.sinoidal,
	scaleTransition: Effect.Transitions.sinoidal,
	opacityTransition: Effect.Transitions.full
  }, arguments[1] || {});
  var oldStyle = {
	top: element.style.top,
	left: element.style.left,
	height: element.style.height,
	width: element.style.width,
	opacity: Element.getInlineOpacity(element) };

  var dims = Element.getDimensions(element);	
  var initialMoveX, initialMoveY;
  var moveX, moveY;

  switch (options.direction) {
	case 'top-left':
	  initialMoveX = initialMoveY = moveX = moveY = 0; 
	  break;
	case 'top-right':
	  initialMoveX = dims.width;
	  initialMoveY = moveY = 0;
	  moveX = -dims.width;
	  break;
	case 'bottom-left':
	  initialMoveX = moveX = 0;
	  initialMoveY = dims.height;
	  moveY = -dims.height;
	  break;
	case 'bottom-right':
	  initialMoveX = dims.width;
	  initialMoveY = dims.height;
	  moveX = -dims.width;
	  moveY = -dims.height;
	  break;
	case 'center':
	  initialMoveX = dims.width / 2;
	  initialMoveY = dims.height / 2;
	  moveX = -dims.width / 2;
	  moveY = -dims.height / 2;
	  break;
  }

  return new Effect.Move(element, {
	x: initialMoveX,
	y: initialMoveY,
	duration: 0.01, 
	beforeSetup: function(effect) { with(Element) {
	  hide(effect.element);
	  makeClipping(effect.element);
	  makePositioned(effect.element);
	}},
	afterFinishInternal: function(effect) {
	  new Effect.Parallel(
		[ new Effect.Opacity(effect.element, { sync: true, to: 1.0, from: 0.0, transition: options.opacityTransition }),
		  new Effect.Move(effect.element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition }),
		  new Effect.Scale(effect.element, 100, {
			scaleMode: { originalHeight: dims.height, originalWidth: dims.width }, 
			sync: true, scaleFrom: window.opera ? 1 : 0, transition: options.scaleTransition, restoreAfterFinish: true})
		], Object.extend({
			 beforeSetup: function(effect) { with(Element) {
			   setStyle(effect.effects[0].element, {height: '0px'});
			   show(effect.effects[0].element); }},
			 afterFinishInternal: function(effect) { with(Element) {
			   [undoClipping, undoPositioned].call(effect.effects[0].element); 
			   setStyle(effect.effects[0].element, oldStyle); }}
		   }, options)
	  )
	}
  });
}

Effect.Shrink = function(element) {
  element = $(element);
  var options = Object.extend({
	direction: 'center',
	moveTransistion: Effect.Transitions.sinoidal,
	scaleTransition: Effect.Transitions.sinoidal,
	opacityTransition: Effect.Transitions.none
  }, arguments[1] || {});
  var oldStyle = {
	top: element.style.top,
	left: element.style.left,
	height: element.style.height,
	width: element.style.width,
	opacity: Element.getInlineOpacity(element) };

  var dims = Element.getDimensions(element);
  var moveX, moveY;

  switch (options.direction) {
	case 'top-left':
	  moveX = moveY = 0;
	  break;
	case 'top-right':
	  moveX = dims.width;
	  moveY = 0;
	  break;
	case 'bottom-left':
	  moveX = 0;
	  moveY = dims.height;
	  break;
	case 'bottom-right':
	  moveX = dims.width;
	  moveY = dims.height;
	  break;
	case 'center':  
	  moveX = dims.width / 2;
	  moveY = dims.height / 2;
	  break;
  }

  return new Effect.Parallel(
	[ new Effect.Opacity(element, { sync: true, to: 0.0, from: 1.0, transition: options.opacityTransition }),
	  new Effect.Scale(element, window.opera ? 1 : 0, { sync: true, transition: options.scaleTransition, restoreAfterFinish: true}),
	  new Effect.Move(element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition })
	], Object.extend({			
		 beforeStartInternal: function(effect) { with(Element) {
		   [makePositioned, makeClipping].call(effect.effects[0].element) }},
		 afterFinishInternal: function(effect) { with(Element) {
		   [hide, undoClipping, undoPositioned].call(effect.effects[0].element);
		   setStyle(effect.effects[0].element, oldStyle); }}
	   }, options)
  );
}

Effect.Pulsate = function(element) {
  element = $(element);
  var options	= arguments[1] || {};
  var oldOpacity = Element.getInlineOpacity(element);
  var transition = options.transition || Effect.Transitions.sinoidal;
  var reverser   = function(pos){ return transition(1-Effect.Transitions.pulse(pos)) };
  reverser.bind(transition);
  return new Effect.Opacity(element, 
	Object.extend(Object.extend({  duration: 3.0, from: 0,
	  afterFinishInternal: function(effect) { Element.setStyle(effect.element, {opacity: oldOpacity}); }
	}, options), {transition: reverser}));
}

Effect.Fold = function(element) {
  element = $(element);
  var oldStyle = {
	top: element.style.top,
	left: element.style.left,
	width: element.style.width,
	height: element.style.height };
  Element.makeClipping(element);
  return new Effect.Scale(element, 5, Object.extend({   
	scaleContent: false,
	scaleX: false,
	afterFinishInternal: function(effect) {
	new Effect.Scale(element, 1, { 
	  scaleContent: false, 
	  scaleY: false,
	  afterFinishInternal: function(effect) { with(Element) {
		[hide, undoClipping].call(effect.element); 
		setStyle(effect.element, oldStyle);
	  }} });
  }}, arguments[1] || {}));
}

Проблема, что очень много значений какое из них выбрать?

Edited December 2, 2009 by s0rr0w

s0rr0w · December 2, 2009

Здравствуйте уважаемые форумчане!
Хотелось бы настроить прозрачность темного фона между изображением галереи и сайтом. Знаю, что нужно изменить значение... функции? аргумента? opacity от 0 до 1. Умолчальное 0.9
Вот код файла effects.js, если кто знает ткните пожалуйста пальцем
Проблема, что очень много значений какое из них выбрать?

Мы очень, очень рады видеть полотенце чужого кода, который могли бы скачать с официального сайта.

Копайте css, а не js

Great Rash · December 2, 2009

Ищите что-то типа opacity в CSS или в коде скрипта. И плюс что-нить типа этого -> filter:alpha(opacity=n) опять же либо там, либо там (это для ИЕ).

Angela · December 2, 2009

Мы очень, очень рады видеть полотенце чужого кода, который могли бы скачать с официального сайта.
Копайте css, а не js

sOrrOw, Sorry

P/S Ну, что Вы такой злопамятный... женщинам свойственны импульсивные высказывания Вы не знали?

Ищите в CSS или в коде скрипта...

Так я искала в коде СКРИПТА а вот в сисс нет

Justnewone · December 2, 2009

женщинам свойственны импульсивные высказывания

В формате форума Вы не женщина, Вы - специалист. =)

Angela · December 2, 2009

В формате форума Вы не женщина, Вы - специалист. =)

В формате форума я ... Участник ) написано ведь. А можно так и написать - Женщина?

Edited December 2, 2009 by Angela

Veseloff · December 2, 2009

В формате форума я ... Участник ) написано ведь. А можно так и написать - Женщина?

Через 464 собщения можно

Angela · December 2, 2009

Через 464 собщения можно

Ясно

Если позволите продолжаю на тему Light Box2

Как мне посоветовали я посмотрела css:

#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	}

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	

#overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	}


/* Min-Width */
.lbWidth { /* most browsers */
	position: absolute;
	top: 0px; left: 0px;
	width: 100%;
	min-width: 790px;
	}

* html .lbContent { /* IE6 */
	margin-left: -790px;
	position:relative;
	}

* html .lbMinWidth { /* IE6 */
	padding-left: 790px;
	}


/* Clearfix */	
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

За этот черный фон, отвечает идентификатор #overlay только вот opacity с ним не работает... (в мозилле и в опере) а цвет фона меняется... И фон В общем то не сплошной черный а немного прозрачный, значит где то значение все таки есть

Great Rash · December 3, 2009

Значит оно уже в скрипте проставляется, что в общем логично, т.к., насколько я понимаю, див постепенно темнеет (светлеет). Ищите opacity в скрипте.

UPD:

И я даже уже нашел в каком месте проставляется opacity. Осталось дело за малым - чтобы это место нашли вы

UPD2:

CTRL+F ???

Edited December 3, 2009 by Great Rash

Angela · December 3, 2009

Great Rash, Вы случайно не это место имеете в виду?:

Element.setOpacity = function(element, value){  
  element= $(element);  
  if (value == 1){
	Element.setStyle(element, { opacity: 
	  (/Gecko/.test(navigator.userAgent) && !/Konqueror|Safari|KHTML/.test(navigator.userAgent)) ? 
	  0.9999 : null });
	if(/MSIE/.test(navigator.userAgent))  
	  Element.setStyle(element, {filter: Element.getStyle(element,'filter').replace(/alpha\([^\)]*\)/gi,'')});  
  } else {  
	if(value < 0.00001) value = 0;  
	Element.setStyle(element, {opacity: value});
	if(/MSIE/.test(navigator.userAgent))  
	 Element.setStyle(element, 
	   { filter: Element.getStyle(element,'filter').replace(/alpha\([^\)]*\)/gi,'') +
				 'alpha(opacity='+value*100+')' });  
  }   
}

Если это, то значение 0.9999 я меняла..., но прозрачная становится сама картинка, а не фон. Все это код только файла effects.js в других трех opacity нет

Edited December 3, 2009 by Angela

Great Rash · December 3, 2009

Вот это:

Effect.DefaultOptions = {
transition: Effect.Transitions.sinoidal,
duration: 1.0, // seconds
fps: 25.0, // max. 25fps due to Effect.Queue implementation
sync: false, // true for combining
from: 0.0, // судя по всему, начальное значение
to: 1.0, // судя по всему, конечное значение
delay: 0.0,
queue: 'parallel'
}

Опять же стоит посмотреть где вызывается .setOpacity

Как вы с таким знанием яваскрипта вообще взялись за настройку чего-либо?

Angela · December 3, 2009

Вот это:

Effect.DefaultOptions = {
transition: Effect.Transitions.sinoidal,
duration: 1.0, // seconds
fps: 25.0, // max. 25fps due to Effect.Queue implementation
sync: false, // true for combining
from: 0.0, // судя по всему, начальное значение
to: 1.0, // судя по всему, конечное значение
delay: 0.0,
queue: 'parallel'
}

Не а... не прокатывает

Как вы с таким знанием яваскрипта вообще взялись за настройку чего-либо?

Да я то ладно, глобальные модераторы! советуют "копать" не там где надо.

Great Rash · December 3, 2009

Не а... не прокатывает

Да ну нафиг... а что происходит?

Да я то ладно, глобальные модераторы! советуют "копать" не там где надо.

Шутку понял - смешно.

s0rr0w · December 3, 2009

Да я то ладно, глобальные модераторы! советуют "копать" не там где надо.

Я не виноват, что скрипт писал идиот.

Angela · December 3, 2009

Я не виноват, что скрипт писал идиот.

sOrrOw, Вы серьезно?

Ну я конечно как начинающий! верстальщик, не имею права подвергать Ваши профессиональные способности и знания сомнению... :blink: Так, что если это написал неумный человек... то просто просьба посоветовать - Что лучше? Конкретно. Без воды и желательно инструкция по установке как в случае со "Светлым Ящиком2" которую я скачала вместе с ним.

Поймите, то что Вам кажется до ужаса простым, начинающему - сложно. Так вот и я, сначала взяла толстую книгу по html 4.0, потом начала копаться в сети и набрела на ресурс htmlbook.ru Здесь все просто с примерам и понятно и вообще здорово! (об этом я кстати уже писала)

Так почему же! Почему же на форуме такая вот... байда? По моему я говорю понятные и очевидные вещи и не надо пожалуйста мои слова выворачивать наизнанку.

З.Ы. Я не возмущаюсь. Эмоциональные мысли=ИМХО!

Да ну нафиг... а что происходит?

Не происходит изменение прозрачности. Могу выслать Вам архив со скриптом для проверки работы

Edited December 3, 2009 by Angela

s0rr0w · December 3, 2009

sOrrOw, Вы серьезно?
Ну я конечно как начинающий! верстальщик, не имею права подвергать Ваши профессиональные способности и знания сомнению... Так, что если это написал неумный человек... то просто просьба посоветовать - Что лучше? Конкретно. Без воды и желательно инструкция по установке как в случае со "Светлым Ящиком2" которую я скачала вместе с ним.

Оформление относится к CSS. Человек, который не додумался вынести прозрачность в CSS, для меня никогда не будет профессионалом.

Попробуйте SlimBox. Вроде и проще был, и работал всегда надежно.

Не происходит изменение прозрачности. Могу выслать Вам архив со скриптом для проверки работы

Зачем он мне? Вы хотите отвязаться от назойливого скрипта или выучить технологию?

hAhol · December 4, 2009

ShadowBox :blink:

В некоторых случаях из пушки по воробьям, но данный скрипт очень хорош. ИМХО, разумеется

3ABAPKA · December 4, 2009

Возможно 52 строчка

Element.getOpacity = function(element){
var opacity;
if (opacity = Element.getStyle(element, 'opacity'))
return parseFloat(opacity);
if (opacity = (Element.getStyle(element, 'filter') || '').match(/alpha\(opacity=(.*)\)/))
if(opacity[1]) return parseFloat(opacity[1]) / 100;
return 1.0;
}

или 61

Edited December 4, 2009 by 3ABAPKA

Great Rash · December 4, 2009

Оформление относится к CSS. Человек, который не додумался вынести прозрачность в CSS, для меня никогда не будет профессионалом.

Стоп, там же происходит анимация изменения прозрачности. Т.е. значение постоянно меняется. Как же это вынести в CSS?

Не происходит изменение прозрачности. Могу выслать Вам архив со скриптом для проверки работы

Блин, мне лень разбираться в коде... да и потом уж лучше ссылку на скрипт и сайт девелопера.

Предлагаю изучить все места где вызывается setOpacity и getOpacity. Ибо основное действо происходит именно там. А в профессионализме камрада s0rr0w можете не сомневаться - он тут любого задавит интеллектом.

s0rr0w · December 4, 2009

А в профессионализме камрада s0rr0w можете не сомневаться - он тут любого задавит интеллектом.

Не любого. Есть люди, которые знают гораздо больше меня.

psywalker · December 4, 2009

Не любого. Есть люди, которые знают гораздо больше меня.

Нет, не так. Есть люди на планете, которые знают гораздо больше меня, но их надо поискать :blink:

Edited December 4, 2009 by psywalker

Great Rash · December 4, 2009

Now i know who's main flooder on this forum :blink:

psywalker · December 4, 2009

Now i know who's main flooder on this forum

Да лошара, мы давно тебя вычеслили

Justnewone · December 4, 2009

Да лошара, мы давно тебя вычеслили

Зачем вот в тролля превращаться?

psywalker · December 4, 2009

Зачем вот в тролля превращаться?

Да ладно тебе, чёж ты такой серьёзный то прям.. :blink:

Angela · December 5, 2009

s0rr0w, Great Rash, Justnewone, Veseloff, hAhol, 3ABAPKA, и даже psywalker! :blink:

Благодарю Вас за участие в обсуждении проблемы!

Sign In

Настройка скрипта Light Box2

Question

Link to comment

Share on other sites

25 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information