jQuery和CSS3定义的全屏图片展示效果SIDEWAYS –cool fullscreen image gallery with jQuery css3

作者:网络 来源:佚名 更新时间:2010-12-26 20:17:25 点击:

jQuery和CSS3定义的全屏图片展示效果SIDEWAYS –cool fullscreen image gallery with jQuery css3

?

A simple, yet elegant fullscreen image gallery created with the jQuery framework and some simple CSS.

hga021.comSIDEWAYS image gallery is made by implementation of some previous scripts/tutorials posted on this blog and some (minor) CSS3. It utilizes the jQuery UI (jQuery User Interface), jQuery Easing by George McGinley Smith and Brandon Aaron’s jquery mousewheel plugin.

The code

The css with some CSS3 rounded corners and few custom fonts

html,body{height:100%}
body {margin:0; padding:0; background:#333 url(sw_page_bg.png); font-family:Helvetica, Arial, sans-serif; font-size:16px;}
/* custom fonts */
@font-face {
 font-family: 'eurof55-webfont';
 src: url('fonts/eurof55-webfont.eot');
 src: local('?'), url('fonts/eurof55-webfont.woff') format('woff'), url('fonts/eurof55-webfont.ttf') format('truetype'), url('fonts/eurof55-webfont.svg#webfont8xigBfG2') format('svg');
}
@font-face {
 font-family: 'eurof35-webfont';
 src: url('fonts/eurof35-webfont.eot');
 src: local('?'), url('fonts/eurof35-webfont.woff') format('woff'), url('fonts/eurof35-webfont.ttf') format('truetype'), url('fonts/eurof35-webfont.svg#webfont8xigBfG2') format('svg');
}
@font-face {
 font-family: 'graublauweb-webfont';
 src: url('fonts/graublauweb-webfont.eot');
 src: local('?'), url('fonts/graublauweb-webfont.woff') format('woff'), url('fonts/graublauweb-webfont.ttf') format('truetype'), url('fonts/graublauweb-webfont.svg#webfont8xigBfG2') format('svg');
}
.clear{clear:both;}
#bg{position:fixed; left:585px; top:0; height:100%;}
#bgimg{display:none; cursor:pointer; -ms-interpolation-mode: bicubic;} /* special IE fix for resized images */
#preloader{position:absolute; z-index:2; width:140px; padding:20px; top:20px; left:50px; background:#000; color:#666; font-family:graublauweb-webfont, Helvetica, Arial, sans-serif; font-size:16px; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
#preloader img{margin-right:20px;}
#toolbar{width:125px; padding:4px 15px; margin:20px 15px; background:#262626 url(sw_btn_bg.png) repeat-x; -moz-border-radius:8px; -khtml-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; font-family:graublauweb-webfont, Helvetica, Arial, sans-serif; font-size:12px; color:#fff; cursor:pointer;}
#outer_container{position:relative; margin:0; width:700px; padding:0; z-index:2; background:url(empty.gif);} /* fucking IE needs a background value to understand hover area */
#customScrollBox{position:relative; background:url(sw_l_bg.png) repeat-y;}
#customScrollBox .container{position:relative; width:585px; top:0; float:left;}
#customScrollBox .content{clear:both;}
#customScrollBox .content h1{padding:5px; margin:10px; color:#fff; font-family:eurof55-webfont, Helvetica, Arial, sans-serif; font-size:48px;}
#customScrollBox .content h2{padding:5px; margin:10px 10px 0 10px; color:#fff; font-family:eurof35-webfont, Helvetica, Arial, sans-serif; font-size:24px;}
#customScrollBox .content p{padding:5px; margin:0 10px 10px 10px; color:#ddd; font-family:graublauweb-webfont, Helvetica, Arial, sans-serif; line-height:26px;}
.light{font-family:eurof35-webfont, Helvetica, Arial, sans-serif;}
.grey{color:#999;}
.lightgrey{color:#ddd;}
.s36{font-size:36px;}
.s24{font-size:24px;}
#customScrollBox a{position:relative; margin:0 0 1px 1px; display:block; float:left;}
#customScrollBox img{border:none;}
#customScrollBox a .selected{position:absolute; top:0; left:0; width:145px; height:91px; background:url(sw_thumb_selected.png) no-repeat; display:none;}
#arrow_indicator{position:absolute; cursor:pointer; width:50px; padding:10px; top:50%; margin-top:-25px; left:20px; background:url(sw_transparent_black_bg.png); -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; display:none;}
#nextimage_tip{position:fixed; z-index:1; padding:0 20px; line-height:40px; color:#fff; height:40px; top:50%; margin-top:-20px; right:20px; background:url(sw_transparent_black_bg.png); -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; display:none; font-family:graublauweb-webfont, Helvetica, Arial, sans-serif;}

?

The jQuery scripts and plugins inside head tag



?

The full javascript code is inserted in the end of the document, just before the closing body tag.


?

That’s about it.