из-за Mootols не стал работать плагин FancyBox...
вот код:
[code]<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5</title>
<link rel="stylesheet" href="html5.css">
<!-- Add jQuery library -->
<script type="text/javascript" src="lib/jquery-1.10.1.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen" />
<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<!-- Add Thumbnail helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script language="javascript" type="text/javascript" src="script/mootools-1.2.1-core.js"></script>
<script language="javascript" type="text/javascript" src="script/mootools-1.2-more.js"></script>
<script language="javascript" type="text/javascript" src="script/slideitmoo-1.1.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
/*
* Simple image gallery. Uses default settings
*/
$('.sertificatess').fancybox();
/*
* Different effects
*/
// Change title type, overlay closing speed
$(".fancybox-effects-a").fancybox({
helpers: {
title : {
type : 'outside'
},
overlay : {
speedOut : 0
}
}
});
// Disable opening and closing animations, change title type
$(".fancybox-effects-b").fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
title : {
type : 'over'
}
}
});
// Set custom style, close if clicked, change title type and overlay color
$(".fancybox-effects-c").fancybox({
wrapCSS : 'fancybox-custom',
closeClick : true,
openEffect : 'none',
helpers : {
title : {
type : 'inside'
},
overlay : {
css : {
'background' : 'rgba(238,238,238,0.85)'
}
}
}
});
$('.sertificatess').fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : {
type : 'inside'
},
buttons : {}
},
afterLoad : function() {
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
}
});
/*
* Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
*/
$('.sertificates').fancybox({
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
arrows : false,
nextClick : true,
helpers : {
thumbs : {
width : 128,
height : 85
}
}
});
});
});
window.addEvents({
'domready': function(){
/* thumbnails example , div containers */
new SlideItMoo({
overallContainer: 'SlideItMoo_outer',
elementScrolled: 'SlideItMoo_inner',
thumbsContainer: 'SlideItMoo_items',
itemsVisible:3,
itemsSelector: '.SlideItMoo_element',
itemWidth: 158,
showControls:1});
},
'load': function(){
/* banner rotator example */
new SlideItMoo({overallContainer: 'SlideItMoo_banners_outer',
elementScrolled: 'SlideItMoo_banners_inner',
thumbsContainer: 'SlideItMoo_banners_items',
itemsVisible:1,
itemsSelector: '.banner',
showControls:0,
autoSlide: 3000,
transition: Fx.Transitions.Bounce.easeOut,
duration: 1800,
direction:-1});
/* info rotator example */
new SlideItMoo({overallContainer: 'SlideItMoo_info_outer',
elementScrolled: 'SlideItMoo_info_inner',
thumbsContainer: 'SlideItMoo_info_items',
itemsVisible:1,
itemsSelector: '.info_item',
itemWidth:557,
showControls:0,
autoSlide: 5000,
transition: Fx.Transitions.Sine.easeIn,
duration: 1800,
direction:1});
}
});
</script>
</head>
<body>
<header>
<h1>Шапка сайта</h1>
<form method="get" action="http://www.google.com/search" />
<input type="text" name="q" size="15" maxlength="255" value="" placeholder="Поиск" />
<input type="submit" value="Ищем" />
<input type="hidden" value="#" name="sitesearch" />
</form>
<h2>Subtitle</h2>
<h4>HTML5 Рулит!</h4>
</header>
<div id="container">
<nav>
<h3>Меню</h3>
<a href="">Ссылка 1</a>
<a href="">Ссылка 2</a>
<a href="">Ссылка 3</a>
</nav>
<section>
<article>
<header>
<h1>Шапка первого Article </h1>
</header>
<p>Раздел section можно разбить
|