Выложу коды, картинку и архив с галереей, может кто захочет посмотреть....
Спасибо!
Пример: галерея
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/JavaScript" src="js/jquery-1.4.2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
</head>
<body>
<div id="center">
<div id="center_wrapper">
<div class="container">
<div class="content">
<div id="thumbs" class="navigation">
<ul class="thumbs">
<li>
<a class='thumb' href='img/1.jpg'>
<img src='img/mini/1.jpg'/>
</a>
</li>
<li>
<a class='thumb' href='img/2.jpg'>
<img src='img/mini/2.jpg'/>
</a>
</li>
<li>
<a class='thumb' href='img/3.jpg'>
<img src='img/mini/3.jpg'/>
</a>
</li>
<li>
<a class='thumb' href='img/4.jpg'>
<img src='img/mini/4.jpg'/>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="large_images">
<div id="gallery" class="cont">
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
var onMouseOutOpacity = 1;
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
var gallery = $('#thumbs').galleriffic({
delay: 2500,
numThumbs: 100,
preloadAhead: 10,
enableTopPager: true,
enableBottomPager: true,
maxPagesToShow: 7,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: '‹ Previous Photo',
nextLinkText: 'Next Photo ›',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
enableHistory: false,
autoStart: false,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
this.fadeTo('fast', 1.0);
}
});
});
</script>
</body>
</html>
body {margin:0; background-color:#2c2c2c;}
p {
font:bold 14px Calibri;
color:#fbf7da;
}
html, body {height: 100%;}
a{
outline:none;
font:bold 14px Calibri;
color:#fbf7da;
}
a img{border:0;} /*для IE*/
/*Мини изображения*/
#center {
width:268px;
z-index:3;
height:100%;
position:absolute;
margin-left:407px;
background: rgb(0,0,0);
background: rgba(0,0,0,0.59);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=59);
zoom: 1;
border-right:1px solid #000;
min-height:885px;
}
#center_wrapper {
position: static;
padding:0 20px;
margin-left:20px;
margin-top:25px;
}
#center_wrapper img {margin-bottom:20px;}
#center_wrapper .container{position:relative; width:215px; float:left;}
#center_wrapper .content{clear:both;}
/*Блок с большими картинками*/
#large_images {
width:auto;
height:100%;
z-index:3;
margin-left:701px;
margin-right:25px;
min-height:800px;
}
#gallery {float:left;}
div.cont {
width: 45%;
}
div.cont a, div.navigation a {
text-decoration: none;
}
div.cont a:focus, div.cont a:hover, div.cont a:active {
text-decoration: none;
}
div.slideshow span.image-wrapper {
position: absolute;
margin-right:25px;
margin-top:220px;
}
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
text-decoration: none;
}
div.slideshow img {
width:100%;
-moz-transform:translateZ(3px);
}
ul.thumbs {
margin: 0;
padding: 0;
}
ul.thumbs li {
list-style: none;
}