| |
|
|
| | Сколько в нете не искал галерей, всё какое-то накрученное с кучей бесполезностей.. :)
Написал для себя такое вот.
Просьба осмотреть код и тыкнуть на ошибки если таковые есть, больше интересует оптимизация:)
Собственно вопрос больше к PAT'у :)
Заранее спасибо..
<style type="text/css">
#gallery{
margin-bottom:3px;
color:#62718e;
font-weight:bold;
}
#gallery img{
padding:5px;
border:1px solid #9ca2ae;
}
/*---*/
#gallery_preview{
}
#gallery_preview img,
#gallery_preview img.active,
#gallery_preview img.active:hover{
padding:2px;
border:1px solid #8b94a6;
margin:0px 3px 3px 0px;
cursor:default;
background:none;
}
#gallery_preview img:hover,
#gallery_preview img.hover{
background:#b0b5bf;
border-color:#62718e;
cursor:pointer;
cursor:hand;
}
#gallery_preview img.active{
opacity:0.5;
filter:alpha(opacity=50);
}
</style>
|
<div id="gallery"></div>
<div id="gallery_preview"></div>
|
var _gallery_img = ['1.jpg', '2.jpg', '1515.jpg'];
var _gallery_cat = {'img' : '/img/flats/', 'pre' : '/img/flats/p/'};
var _gallery_containers = {'img' : 'gallery', 'pre' : 'gallery_preview'};
//function isold(){return typeof window.external=='object' && typeof document.all=='object' ? true : false}
var _gallery_cfg = {
'isold' : isold(),
'motion_steps' : 1,
'motion_time' : 30,
'opp' : 0
};
var _gallery_obj = new Array();
var _gallery_imgs = new Array();
var _gallery_imgx = new Array(); _gallery_imgx[0] = new Array(); _gallery_imgx[1] = new Array();
var _gallery_size = [0, 0];
for(var i = 0, len = _gallery_img.length; i < len; i++) {
_gallery_imgx[0][i] = new Image();
_gallery_imgx[0][i].src = _gallery_cat['img'] + _gallery_img[i];
if(_gallery_size[0] < _gallery_imgx[0][i].width) _gallery_size[0] = _gallery_imgx[0][i].width;
if(_gallery_size[1] < _gallery_imgx[0][i].height) _gallery_size[1] = _gallery_imgx[0][i].height;
_gallery_imgx[1][i] = new Image();
_gallery_imgx[1][i].src = _gallery_cat['pre'] + _gallery_img[i];
_gallery_imgx[1][i].name = "_gallery_" + i;
_gallery_imgx[1][i].onclick = function(){showGallery(this)};
if(_gallery_cfg['isold']){
_gallery_imgx[1][i].onmouseover = function() {if(this.className == '') this.className = 'hover'}
_gallery_imgx[1][i].onmouseout = function() {this.className = this.className.replace('hover', '')}
}
}
function startGallery() {
if(_gallery_imgx[0].length && qq(_gallery_containers['img']) && qq(_gallery_containers['pre'])){
_gallery_obj[0] = qq(_gallery_containers['img']);
_gallery_obj[0].style.width = _gallery_size[0] + 15 + 'px';
_gallery_obj[0].style.height = _gallery_size[1] + 15 + 'px';
_gallery_obj[1] = qq(_gallery_containers['pre']);
for(var i = 0, len = _gallery_imgx[1].length; i < len; i++) {
_gallery_obj[1].appendChild(_gallery_imgx[1][i]);
}
_gallery_obj[0].appendChild(_gallery_imgs[0] = new Image());
showGallery(_gallery_imgs[1] = _gallery_imgx[1][0]);
}
}
function showGallery(img) {
var new_src = _gallery_imgx[0][img.name.replace('_gallery_', '')].src;
if(new_src != _gallery_imgs[0].src){
_gallery_imgs[0].src = new_src;
_gallery_imgs[1].className = '';
_gallery_imgs[1] = img;
img.className = 'active';
clearTimeout(_gallery_cfg['to']);
_gallery_cfg['opp'] = 0;
motionGallery();
}
}
function motionGallery() {
_gallery_cfg['opp'] += _gallery_cfg['motion_steps'];
with(_gallery_imgs[0].style) {
if(_gallery_cfg['isold']) filter = 'alpha(opacity=' + _gallery_cfg['opp'] * 10 + ')';
else opacity = _gallery_cfg['opp'] / 10;
if(_gallery_cfg['opp'] < 10) _gallery_cfg['to'] = setTimeout(motionGallery, _gallery_cfg['motion_time']);
}
}
startGallery();
|
| |
| |
|
