Script Reflection..non funzia

**ANTAGONIA** · 23-01-2008, 14:53

Buon pomeriggio, ho scaricato da un sito il reflection.js..ma non capisco perchè non funziona!!

codice:

var Reflection = {

	add: function(img, options){
		img = $(img);
		if (img.getTag() != 'img') return;
		options = {arguments: [img, options]};
		if (window.ie) options.delay = 50;
		img.preload = new Image();
		img.preload.onload = Reflection.reflect.create(options);
		img.preload.src = img.src;
	},

	remove: function(img){
		img = $(img);
		if (img.preload) img.preload.onload = null;
		if ((img.getTag() == 'img') && (img.className == 'reflected')){
			img.className = img.parentNode.className;
			img.style.cssText = img.backupStyle;
			img.parentNode.replaceWith(img);
		}
	},

	reflect: function(img, options){
		options = $extend({
			height: 0.33,
			opacity: 0.5
		}, options || {});

		Reflection.remove(img);
		var canvas, canvasHeight = Math.floor(img.height*options.height);

		if (window.ie){
			canvas = new Element('img', {'src': img.src, 'styles': {
				'width': img.width,
				'marginBottom': -img.height+canvasHeight,
				'filter': 'flipv progid:DXImageTransform.Microsoft.Alpha(opacity='+(options.opacity*100)+', style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy='+(options.height*100)+')'
			}});
		} else {
			canvas = new Element('canvas', {'styles': {'width': img.width, 'height': canvasHeight}});
			if (!canvas.getContext) return;
		}

		var div = new Element('div').injectAfter(img).adopt(img, canvas);
		div.className = img.className;
		div.style.cssText = img.backupStyle = img.style.cssText;
		div.removeClass('reflect').setStyles({'width': img.width, 'height': canvasHeight+img.height});
		img.style.cssText = 'vertical-align: bottom';
		img.className = 'reflected';
		if (window.ie) return;

		var context = canvas.setProperties({'width': img.width, 'height': canvasHeight}).getContext('2d');
		context.save();
		context.translate(0, img.height-1);
		context.scale(1, -1);
		context.drawImage(img, 0, 0, img.width, img.height);
		context.restore();
		context.globalCompositeOperation = 'destination-out';
		var gradient = context.createLinearGradient(0, 0, 0, canvasHeight);
		gradient.addColorStop(0, 'rgba(255, 255, 255, '+(1-options.opacity)+')');
		gradient.addColorStop(1, 'rgba(255, 255, 255, 1.0)');
		context.fillStyle = gradient;
		context.rect(0, 0, img.width, canvasHeight);
		context.fill();
	},

	addFromClass: function(){
		$each(document.getElementsByTagName('img'), function(img){
			if ($(img).hasClass('reflect')) Reflection.add(img);
		});
	}
};

Element.extend({
	addReflection: function(options) { Reflection.add(this, options); return this; },
	removeReflection: function(options) { Reflection.remove(this, options); return this; }
});

Window.addEvent("domready", Reflection.addFromClass);

Nella pagina.htm dove ho l'immagine che dovrebbe avere il riflesso

codice:

<script type="text/javascript" src="js/reflection.js"></script>
[img]img/36.jpg[/img]

potete aiutarmi gentilmente?grazie mille....

**Xinod** · 23-01-2008, 15:00

richiami lo script esterno nell' head?

**ANTAGONIA** · 23-01-2008, 15:03

faccio cosi:

codice:

<html>
<head>
<script type="text/javascript" src="js/reflection.js"></script>
</head>
<body>
[img]img/36.jpg[/img]
</body>
</html>

**Xinod** · 23-01-2008, 15:27

perdona l' altra domanda banale, ma mootools lo richiami?

**Xinod** · 23-01-2008, 15:31

poi, lo script opera su immagini che hanno una determinata classe css
class="reflect"
e lo fai operare in questo modo perche' richiami al domready il metodo .addFromClass

**ANTAGONIA** · 23-01-2008, 16:11

quindi, ricapitolando, solo il reflection.js da solo non funziona, ho bisogno, del mootools.js e del relativo css?

E dove li prendo?
Grazie mille...

**ANTAGONIA** · 23-01-2008, 16:39

ok risolto...ho girato un po per internet ed ho trovato la soluzione...

ho scaricato il file che mi mancava, quello che mi hai detto mootools ed ho fatto cosi:

codice:

<head>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/reflection.js"></script>
</head>
<body>
[img]img/35.png[/img]
</body>

grazie mille....alla prox

**Xinod** · 23-01-2008, 16:49

Originariamente inviato da ANTAGONIA
quindi, ricapitolando, solo il reflection.js da solo non funziona, ho bisogno, del mootools.js e del relativo css?

E dove li prendo?
Grazie mille...

e' obbligatorio mootools per quella versione dello script,
ma ci sono script per riflettere le immagini che non usano alcuna libreria, tipo
http://www.netzgesta.de/reflex/

le librerie e i framework non si aggiungono per sistemare un effetto,
si scelgono, dopo un' attenta analisi, perche' si vuole basare sugli strumenti specifici che mette a disposizione lo scripting di un intero sito

**ANTAGONIA** · 23-01-2008, 16:52

aspè aspè aspè, piccolo problema, in pratica come carico i due .js, le immagini si allineano in verticale.
Ho provato a modificare questa porzione di script,

codice:

var div = new Element('div').injectAfter(img).adopt(img, canvas);
		div.className = img.className;
		div.style.cssText = img.backupStyle = img.style.cssText;
		div.removeClass('reflect').setStyles({'width': img.width, 'height': canvasHeight+img.height});
		/*img.style.cssText = 'vertical-align: bottom';*/
                         /*********************/
                         /*PORZIONE MODIFICATA*/
                          img.style.cssText = 'Horizontal-align: bottom';
		img.className = 'reflected';
		if (window.ie) return;

ma non ritornano allineate una accanto all'altra.

Come faccio?

grazie ancora...

**Xinod** · 23-01-2008, 17:07

lascia perdere le modifiche sul codice a quel livello che non e' ancora roba per te

le immagini vengono anche floatate via css, assegnando ad esse anche altre classi oltre a "reflect", come "left" nel demo di questa pagina che e' il caso tu studi prima di proseguire,
dal momento che hai deciso di usare questo effetto e mootools

ciao

Discussione: Script Reflection..non funzia

Strumenti discussione

Ricerca discussione

Visualizza

Script Reflection..non funzia

Permessi di invio