Skip to content
This repository
Browse code

Initial commit of old style fancy zoom.

  • Loading branch information...
commit 0429465db8d82eb71c19230a14ef32c463e453c4 0 parents
John Nunemaker authored
1  .gitignore
... ... @@ -0,0 +1 @@
  1 +.DS_Store
BIN  images/closebox.png
BIN  images/shadow_round_small.png
38 index.html
... ... @@ -0,0 +1,38 @@
  1 +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2 + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3 +
  4 +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5 +<head>
  6 + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  7 + <title>Fancy Zoom Examples</title>
  8 + <script type="text/javascript" src="js/prototype.js"></script>
  9 + <script type="text/javascript" src="js/scriptaculous.js"></script>
  10 + <script type="text/javascript" src="js/fancyzoom.js"></script>
  11 +
  12 + <script type="text/javascript" charset="utf-8">
  13 + $(document).observe('dom:loaded', function() {
  14 + $$('a.fancy').each(function(el) { new FancyZoom(el); });
  15 + });
  16 + </script>
  17 +
  18 + <style type="text/css" media="screen">
  19 + div.zoom {position:absolute; top:50%; left:50%; width:760px; height:413px; margin:-380px 0 0 -207px;}
  20 + div.description {float:left; display:inline; margin:33px 20px 0 33px; width:195px;}
  21 + div.description h3 {margin:0 0 10px; padding:0;}
  22 + div.description p {margin:0 0 20px;}
  23 + div.movie {margin:33px 0 0 0;}
  24 + a.zoom_close {position:absolute; top:2px; left:2px;}
  25 + div#hello p {margin:40px;}
  26 + </style>
  27 +</head>
  28 +<body>
  29 +
  30 + <a href="#hello" class="fancy">Click me to zoom</a>
  31 +
  32 +
  33 + <div id="hello">
  34 + <p>Hello World!</p>
  35 + </div>
  36 +
  37 +</body>
  38 +</html>
128 js/fancyzoom.js
... ... @@ -0,0 +1,128 @@
  1 +var FancyZoom = Class.create({
  2 + initialize: function(element) {
  3 + this.element = $(element);
  4 + this.zoom = $(this.element.readAttribute('href').gsub(/^#/, ''));
  5 + this.zooming = false;
  6 + this.bg = 'url(images/shadow_round_small.png) no-repeat';
  7 + if (this.element && this.zoom) {
  8 + this.zoom.addClassName('zoom');
  9 + this.zoom.setStyle({
  10 + position : 'absolute',
  11 + margin : '0',
  12 + padding : '0'
  13 + });
  14 + this.zoomWidth = this.zoom.getWidth();
  15 + this.zoomHeight = this.zoom.getHeight();
  16 + this.zoom.hide();
  17 + this.addCloseButton();
  18 + this.element.observe('click', this.zoomIn.bindAsEventListener(this));
  19 + }
  20 + },
  21 +
  22 + addCloseButton: function() {
  23 + var a = new Element('a', {href:'#'});
  24 + var img = new Element('img', {src:'images/closebox.png', alt:'Close'});
  25 + a.appendChild(img);
  26 + this.zoom.appendChild(a);
  27 + this.zoomLink = $(a);
  28 + this.zoomLink.observe('click', this.zoomOut.bindAsEventListener(this)).addClassName('zoom_close');
  29 + $(img).setStyle('border:none');
  30 + },
  31 +
  32 + windowSize: function() {
  33 + var width = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);
  34 + var height = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);
  35 + var x = window.pageXOffset || (window.document.documentElement.scrollLeft || window.document.body.scrollLeft);
  36 + var y = window.pageYOffset || (window.document.documentElement.scrollTop || window.document.body.scrollTop);
  37 + return {'width':width, 'height':height, 'x':x, 'y':y}
  38 + },
  39 +
  40 +
  41 + zoomIn: function(e) {
  42 + e.stop();
  43 + if (this.zooming) return;
  44 + this.zooming = true;
  45 + var self = this;
  46 + var d = this.windowSize();
  47 + var yOffset = document.viewport.getScrollOffsets()[1];
  48 + var newTop = (d.height/2) - (this.zoomHeight/2) + yOffset;
  49 + var newLeft = (d.width/2) - (this.zoomWidth/2);
  50 + this.curOffset = this.element.cumulativeOffset();
  51 + this.curTop = e ? e.pointerY() : this.curOffset.top + 50;
  52 + this.curLeft = e ? e.pointerX() : this.curOffset.left - 40;
  53 + this.moveX = -(this.curLeft - newLeft);
  54 + this.moveY = -(this.curTop - newTop);
  55 + $$('div.zoom').invoke('hide');
  56 + this.zoom.setStyle({
  57 + position : 'absolute',
  58 + top : this.curTop+'px',
  59 + left : this.curLeft+'px',
  60 + background : this.bg
  61 + });
  62 +
  63 + new Effect.Parallel([
  64 + new Effect.Appear(this.zoom, {sync:true}),
  65 + new Effect.Move(this.zoom, {x: this.moveX, y: this.moveY, sync: true}),
  66 + new Effect.Scale(this.zoom, 100, {
  67 + scaleFrom : 0,
  68 + scaleContent : false,
  69 + sync : true,
  70 + beforeStart: function(effect) {
  71 + $(effect.element).setStyle({
  72 + width: self.zoomWidth+'px',
  73 + height: self.zoomHeight+'px'
  74 + });
  75 + self.addBgColorIfIE();
  76 + self.zoom.select('div').invoke('hide');
  77 + },
  78 + afterFinish: function(effect) {
  79 + self.removeBgColorIfIE();
  80 + self.zoom.select('div').invoke('show');
  81 + self.zoom.select('a.zoom_close').invoke('hide');
  82 + self.zoomLink.show();
  83 + self.zoom.setStyle({
  84 + width:self.zoomWidth,
  85 + height:self.zoomHeight,
  86 + background:self.bg
  87 + })
  88 + self.zooming = false;
  89 + }
  90 + })
  91 + ], { duration: 0.3 });
  92 + },
  93 +
  94 + zoomOut: function(e) {
  95 + e.stop();
  96 + if (this.zooming) return;
  97 + this.zooming = true;
  98 + var self = this;
  99 + new Effect.Parallel([
  100 + new Effect.Move(this.zoom, {x: this.moveX*-1, y: this.moveY*-1, sync: true}),
  101 + new Effect.Scale(this.zoom, 0, {
  102 + scaleFrom : 100,
  103 + scaleContent : false,
  104 + sync : true,
  105 + beforeStart: function(effect) {
  106 + self.addBgColorIfIE();
  107 + self.zoomLink.hide();
  108 + self.zoom.select('div').invoke('hide');
  109 + },
  110 + afterFinish: function(effect) {
  111 + self.removeBgColorIfIE();
  112 + self.zoom.select('div').invoke('show');
  113 + self.zooming = false;
  114 + }
  115 + }),
  116 + new Effect.Fade(this.zoom, {sync:true})
  117 + ], { duration: 0.5 });
  118 + },
  119 +
  120 + // prevents the thick black border that happens when appearing or fading png in IE
  121 + addBgColorIfIE: function() {
  122 + if (Prototype.Browser.IE) this.zoom.setStyle({ background: '#fff ' + this.bg });
  123 + },
  124 +
  125 + removeBgColorIfIE: function() {
  126 + if (Prototype.Browser.IE) this.zoom.setStyle({ background: this.bg });
  127 + }
  128 +});
4,221 js/prototype.js
4,221 additions, 0 deletions not shown
3,433 js/scriptaculous.js
3,433 additions, 0 deletions not shown

0 comments on commit 0429465

Please sign in to comment.
Something went wrong with that request. Please try again.