このコードは Web のどこかで見つけました。正常に動作しますが、一度だけです。
別の時間に eventListener をトリガーすると、ズームしません。Zoombox は表示されますが、swf はありません。
ここにHTMLがあります
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="../scripts/prototype.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js"></script>
<script type="text/javascript" src="../scripts/fancyzoom.js"></script>
<script type="text/javascript">
document.onload = new FancyZoom('small');
</script>
</head>
<body>
<div><a href="#svo1" id="small"></a></div>
<div id="svo1">
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="680" height="600">
<param name="movie" value="../flash/mega-svo.swf" /><!--value="../images/possible pics/flash/svo4.swf"-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="11.0.0.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="../../external_files/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="../flash/mega-svo.swf" width="680" height="600">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="11.0.0.0" />
<param name="expressinstall" value="../../external_files/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>
これは、ダウンロードしたfancyzoom.jsです
Object.extend(String.prototype, {
// if a string doesn't end with str it appends it
ensureEndsWith: function(str) {
return this.endsWith(str) ? this : this + str;
},
// makes sure that string ends with px (for setting widths and heights)
px: function() {
return this.ensureEndsWith('px');
}
});
Object.extend(Number.prototype, {
// makes sure that number ends with px (for setting widths and heights)
px: function() {
return this.toString().px();
}
});
var Window = {
// returns correct dimensions for window, had issues with prototype's sometimes. this was ganked from apple.
size: function() {
var width = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);
var height = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);
var x = window.pageXOffset || (window.document.documentElement.scrollLeft || window.document.body.scrollLeft);
var y = window.pageYOffset || (window.document.documentElement.scrollTop || window.document.body.scrollTop);
return {'width':width, 'height':height, 'x':x, 'y':y}
}
}
var FancyZoomBox = {
directory : '../images/fancyzoom',
zooming : false,
setup : false,
init: function(directory) {
if (FancyZoomBox.setup) return;
FancyZoomBox.setup = true;
var ie = navigator.userAgent.match(/MSIE\s(\d)+/);
if (ie) {
var version = parseInt(ie[1]);
Prototype.Browser['IE' + version.toString()] = true;
Prototype.Browser.ltIE7 = (version < 7) ? true : false;
}
var html = '<div id="zoom" style="display:none;"> \
<table id="zoom_table" style="border-collapse:collapse; width:100%; height:100%;"> \
<tbody> \
<tr> \
<td class="tl" style="background:url(' + FancyZoomBox.directory + '/tl.png) 0 0 no-repeat; width:20px; height:20px; overflow:hidden;" /> \
<td class="tm" style="background:url(' + FancyZoomBox.directory + '/tm.png) 0 0 repeat-x; height:20px; overflow:hidden;" /> \
<td class="tr" style="background:url(' + FancyZoomBox.directory + '/tr.png) 100% 0 no-repeat; width:20px; height:20px; overflow:hidden;" /> \
</tr> \
<tr> \
<td class="ml" style="background:url(' + FancyZoomBox.directory + '/ml.png) 0 0 repeat-y; width:20px; overflow:hidden;" /> \
<td class="mm" style="background:#fff; vertical-align:top; padding:10px;"> \
<div id="zoom_content"> \
</div> \
</td> \
<td class="mr" style="background:url(' + FancyZoomBox.directory + '/mr.png) 100% 0 repeat-y; width:20px; overflow:hidden;" /> \
</tr> \
<tr> \
<td class="bl" style="background:url(' + FancyZoomBox.directory + '/bl.png) 0 100% no-repeat; width:20px; height:20px; overflow:hidden;" /> \
<td class="bm" style="background:url(' + FancyZoomBox.directory + '/bm.png) 0 100% repeat-x; height:20px; overflow:hidden;" /> \
<td class="br" style="background:url(' + FancyZoomBox.directory + '/br.png) 100% 100% no-repeat; width:20px; height:20px; overflow:hidden;" /> \
</tr> \
</tbody> \
</table> \
<a href="#" title="Close" id="zoom_close" style="position:absolute; top:0; left:0;"> \
<img src="' + FancyZoomBox.directory + '/closebox.png" alt="Close" style="border:none; margin:0; padding:0;" /> \
</a> \
</div>';
var body = $$('body').first();
body.insert(html);
FancyZoomBox.zoom = $('zoom');
FancyZoomBox.zoom_table = $('zoom_table');
FancyZoomBox.zoom_close = $('zoom_close');
FancyZoomBox.zoom_content = $('zoom_content');
FancyZoomBox.zoom_close.observe('click', FancyZoomBox.hide);
FancyZoomBox.middle_row = $A([$$('td.ml'), $$('td.mm'), $$('td.mr')]).flatten();
FancyZoomBox.cells = FancyZoomBox.zoom_table.select('td');
// hide zoom if click fired is not inside zoom
$$('html').first().observe('click', function(e) {
var click_in_zoom = e.findElement('#zoom'),
zoom_display = FancyZoomBox.zoom.getStyle('display');
if (zoom_display == 'block' && !click_in_zoom) {
FancyZoomBox.hide(e);
}
});
// esc to close zoom box
$(document).observe('keyup', function(e) {
var zoom_display = FancyZoomBox.zoom.getStyle('display');
if (e.keyCode == Event.KEY_ESC && zoom_display == 'block') {
FancyZoomBox.hide(e);
}
});
// just use gifs as ie6 and below suck
if (Prototype.Browser.ltIE7) {
FancyZoomBox.switchBackgroundImagesTo('gif');
}
},
show: function(e) {
e.stop();
if (FancyZoomBox.zooming) return;
FancyZoomBox.zooming = true;
var element = e.findElement('a');
var related_div = element.content_div;
var width = (element.zoom_width || related_div.getWidth()) + 60;
var height = (element.zoom_height || related_div.getHeight()) + 60;
var d = Window.size();
var yOffset = document.viewport.getScrollOffsets()[1];
// ensure that newTop is at least 0 so it doesn't hide close button
var newTop = Math.max((d.height/2) - (height/2) + yOffset, 0);
var newLeft = (d.width/2) - (width/2);
FancyZoomBox.curTop = e.pointerY();
FancyZoomBox.curLeft = e.pointerX();
FancyZoomBox.moveX = -(FancyZoomBox.curLeft - newLeft);
FancyZoomBox.moveY = -(FancyZoomBox.curTop - newTop);
FancyZoomBox.zoom.hide().setStyle({
position : 'absolute',
top : FancyZoomBox.curTop.px(),
left : FancyZoomBox.curLeft.px()
});
new Effect.Parallel([
new Effect.Appear(FancyZoomBox.zoom, {sync:true}),
new Effect.Move(FancyZoomBox.zoom, {x: FancyZoomBox.moveX, y: FancyZoomBox.moveY, sync: true}),
new Effect.Morph(FancyZoomBox.zoom, {
style: {
width: width.px(),
height: height.px()
},
sync: true,
beforeStart: function(effect) {
// middle row height must be set for IE otherwise it tries to be "logical" with the height
if (Prototype.Browser.IE) {
FancyZoomBox.middle_row.invoke('setStyle', {height:(height-40).px()});
}
FancyZoomBox.fixBackgroundsForIE();
},
afterFinish: function(effect) {
var related_div_childElements = related_div.childElements();
for(var i=0; i<related_div_childElements.length; i++)
Element.insert(FancyZoomBox.zoom_content,related_div_childElements[i]);
FancyZoomBox.unfixBackgroundsForIE();
FancyZoomBox.zoom_close.show();
FancyZoomBox.zooming = false;
}
})
], { duration: 0.5 });
},
hide: function(e) {
e.stop();
if (FancyZoomBox.zooming) return;
FancyZoomBox.zooming = true;
new Effect.Parallel([
new Effect.Move(FancyZoomBox.zoom, {x: FancyZoomBox.moveX*-1, y: FancyZoomBox.moveY*-1, sync: true}),
new Effect.Morph(FancyZoomBox.zoom, {
style: {
width: '1'.px(),
height: '1'.px()
},
sync : true,
beforeStart: function(effect) {
FancyZoomBox.fixBackgroundsForIE();
FancyZoomBox.zoom_content.innerHTML = '';
FancyZoomBox.zoom_close.hide();
},
afterFinish: function(effect) {
FancyZoomBox.unfixBackgroundsForIE();
FancyZoomBox.zooming = false;
}
}),
new Effect.Fade(FancyZoomBox.zoom, {sync:true})
], { duration: 0.5 });
},
// switches the backgrounds of the cells and the close image to png's or gif's
// fixes ie's issues with fading and appearing transparent png's with
// no background and ie6's craptacular handling of transparent png's
switchBackgroundImagesTo: function(to) {
FancyZoomBox.cells.each(function(td) {
var bg = td.getStyle('background-image').gsub(/\.(png|gif|none)\)$/, '.' + to + ')');
td.setStyle('background-image: ' + bg);
});
var close_img = FancyZoomBox.zoom_close.firstDescendant();
var new_img = close_img.readAttribute('src').gsub(/\.(png|gif|none)$/, '.' + to);
close_img.writeAttribute('src', new_img);
},
// prevents the thick black border that happens when appearing or fading png in IE
fixBackgroundsForIE: function() {
if (Prototype.Browser.IE7) { FancyZoomBox.switchBackgroundImagesTo('gif'); }
},
// swaps back to png's for prettier shadows
unfixBackgroundsForIE: function() {
if (Prototype.Browser.IE7) { FancyZoomBox.switchBackgroundImagesTo('png'); }
}
}
var FancyZoom = Class.create({
initialize: function(element) {
this.options = arguments.length > 1 ? arguments[1] : {};
FancyZoomBox.init();
this.element = $(element);
if (this.element) {
this.element.content_div = $(this.element.readAttribute('href').gsub(/^#/, ''));
this.element.content_div.hide();
this.element.zoom_width = this.options.width;
this.element.zoom_height = this.options.height;
this.element.observe('click', FancyZoomBox.show);
}
}
});
どうすればこれを修正できますか?