Jump to content
  • 0

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

Angela

Asked by Angela,

 Share

Question

Angela Explorer

Angela

Posted
Posted (edited)

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

Хотелось бы настроить прозрачность темного фона между изображением галереи и сайтом. Знаю, что нужно изменить значение... функции? аргумента? 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 by s0rr0w
Link to comment
Share on other sites

25 answers to this question

Recommended Posts

  • 0
s0rr0w Explorer

s0rr0w

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

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

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

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

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

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

Link to comment
Share on other sites
  • 0
Angela Explorer

Angela

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

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

sOrrOw, Sorry :)

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

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

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

Link to comment
Share on other sites
  • 0
Angela Explorer

Angela

Posted
  • Author
Posted
Через 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 с ним не работает... (в мозилле и в опере) а цвет фона меняется... И фон В общем то не сплошной черный а немного прозрачный, значит где то значение все таки есть :(

Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

Posted
Posted (edited)

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

UPD:

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

UPD2:

CTRL+F ???

Edited by Great Rash
Link to comment
Share on other sites
  • 0
Angela Explorer

Angela

Posted
  • Author
Posted (edited)

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 by Angela
Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

Posted
Posted

Вот это:

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

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

Link to comment
Share on other sites
  • 0
Angela Explorer

Angela

Posted
  • Author
Posted
Вот это:

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'
}

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

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

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

Link to comment
Share on other sites
  • 0
Angela Explorer

Angela

Posted
  • Author
Posted (edited)
Я не виноват, что скрипт писал идиот.

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

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

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

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

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

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

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

Edited by Angela
Link to comment
Share on other sites
  • 0
s0rr0w Explorer

s0rr0w

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

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

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

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

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

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

Link to comment
Share on other sites
  • 0
3ABAPKA Explorer

3ABAPKA

Posted
Posted (edited)

Возможно 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 by 3ABAPKA
Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

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

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

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

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

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

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

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

Edited by psywalker
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept