Я написал код, включающий jquery для отображения fancybox при нажатии на миниатюру, и функцию prepend для добавления тега для отображения тега лупы в верхней части эскиза изображения (вверху слоя).Что было странно, что когда веб-страница отображается в IE, миниатюры кажутся «не кликабельными» (не показывающими курсор в виде руки и не обеспечивающими функциональность ссылок), поэтому они не могут отображать или запускать сценарий fancybox при визуализации.Другой браузер, такой как Firefox, Chrome прекрасно работает с этими тремя вещами, работающими одновременно.
Вот фрагмент кода в формате 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.Спасибо.