1
サムネイルをクリックしたときにfancyboxを表示するコードを記述しています。画像サムネイル（最上部）の上に拡大鏡タグを表示するタグを追加します。 WebページがIEでレンダリングされるとき、サムネイルが "unclickable"（手のカーソルを表示したりリンク機能を提供していない）のように見えるので、レンダリングでfancyboxスクリプトを表示したり実行したりすることができないというのは奇妙でした。 Firefox、Chromeなどの他のブラウザは、これらの3つの機能を同時に実行することで完璧に動作します。ここでJQuery FancyBox、Prepend関数と<a href>タグはIE 7と8では動作しません。（他のブラウザは正常に機能します）
は、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" xml:lang="en" lang="en">
<head>
<title>Private Functions /title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico"/>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" media="screen,projection" href="css/ui.totop.css" />
<link rel="stylesheet" href="colorbox.css" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/Proxima_Nova_Rg_400-Proxima_Nova_Rg_700-Proxima_Nova_Rg_italic_400-Proxima_Nova_Rg_italic_700.font.js"></script>
<script type="text/javascript" src="js/BernhardMod_BT_400-BernhardMod_BT_700-BernhardMod_BT_italic_700.font.js"></script>
<script type="text/javascript" src="js/Liberation_Serif_400-Liberation_Serif_700-Liberation_Serif_italic_400-Liberation_Serif_italic_700.font.js"></script>
<script type="text/javascript" src="js/Gotham_Book_325-Gotham_Medium_350-Gotham_Book_italic_325-Gotham_Medium_italic_350.font.js"></script>
<script type="text/javascript" src="js/Gotham_Light_300-Gotham_Bold_400-Gotham_Light_italic_300-Gotham_Bold_italic_400.font.js"></script>
<script type="text/javascript" src="js/Gotham_Thin_250-Gotham_Bold_400-Gotham_Thin_italic_250-Gotham_Bold_italic_400.font.js"></script>
<script type="text/javascript" src="source/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css" media="screen" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" media="screen,projection" href="css/ie7.css" />
<![endif]-->
<script src="colorbox/jquery.colorbox.js" type="text/javascript"></script>
<!-- easing plugin (optional) -->
<script src="js/easing.js" type="text/javascript"></script>
<!-- UItoTop plugin -->
<script src="js/jquery.ui.totop.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('#controls .left, #controls .right, #footer .wrap', { fontFamily: 'Proxima Nova Rg' });
Cufon.replace('#nav2 li, #nav2 li a, .sidebar .menu ul li', { fontFamily: 'Gotham Book' });
Cufon.replace('#nav2 li a.selected', { fontFamily: 'Gotham Medium' });
Cufon.replace('.content h2', { fontFamily: 'Gotham Thin' });
Cufon.replace('.content p', { fontFamily: 'Liberation Serif' });
jQuery(function(){
/*
var defaults = {
containerID: 'moccaUItoTop', // fading element id
containerHoverClass: 'moccaUIhover', // fading element hover class
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$("<span></span").prependTo('.thumbnails a');
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<script type="text/javascript">
$(document).ready(function() {
/*
Simple image gallery. Uses default settings
*/
$(".thumbnails a").fancybox();
});
</script>
</head>
<body>
<div class="content">
<div class="banner"><img src="images/history-banner.jpg" alt="History of 333 Collins Street Melbourne" title="Melbourne's Most Exclusive Address - History"/></div>
<h2>Fusce nisi 333 Collins for your private function</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lacinia dolor orci. Nulla tempus faucibus velit quis euismod. Mauris nec tellus sapien. Nullam bibendum, augue sed eleifend fermentum, neque orci pulvinar nunc, quis laoreet enim arcu ac ipsum.</p>
<p>Sed sit amet lorem ipsum, ac ornare tortor. Donec non mauris consectetur nulla convallis venenatis. Morbi facilisis molestie nisi, et scelerisque arcu pulvinar sit amet. In vehicula eros in nisl dictum iaculis.</p>
<div class="thumbnails">
<a href="gallery/private-functions/private-function-2.jpg" title="Private Function 1"><img src="images/private-function-1.jpg" width="220" height="122" alt="Private Function 1"/></a>
<a href="gallery/private-functions/private-function-1.jpg" title="Private Function 2"><img src="images/private-function-2.jpg" width="220" height="122" alt="Private Function 2"/></a>
<a href="gallery/private-functions/private-function-3.jpg" title="Private Function 3"><img src="images/private-function-3.jpg" width="220" height="122" alt="Private Function 3" class="norightmargin"/></a>
</div>
</div>
</body>
</html>
とCSSの作品：
/** -----CONTENT --------------------*/
.content { padding-bottom: 3em; float:right; width:703px; height: auto; margin-right: 76px; }
.banner{height:180px; width: 700px; margin-bottom:47px;}
.content h1{margin-bottom:28px; font-size:25pt;color: #000000;}
.content h2{margin-bottom:28px; font-size:25pt;color: #000000;}
.content p{margin-bottom:36px; font-size:13pt; line-height: 25pt;}
.content p cufon{ margin-bottom:7px;}
.content .thumbnails img{
border:none; margin-right:15px; margin-bottom:20px;z-index:-10;
}
.content .thumbnails img.norightmargin{
margin-right: 0px;
}
.content .thumbnails a span{
width:220px; position: absolute;
height: 122px;
}
.content .thumbnails a span:hover{
background: url(images/rollover-magnifier.png) no-repeat;
}
としてもクリック可能であることを画像のサムネイルを有効にするには、任意の推奨整流ソリューションがある場合、私は感謝しますfancyboxを使用してポップアップ表示します。ありがとう。
応答JFKのおかげで、大変感謝しています！ – marty