Библиотека

<script type="text/javascript" src="portfolio.js"></script>

html,body { margin:0; padding:0 }
body { font:normal 12px/16px Tahoma, Arial, Helvetica, sans-serif; color:#ededed; background:#393a38 }
a { color:#232522; text-decoration:underline }
a:hover { color:#232522; text-decoration:underline }
a:focus { outline:none; border:none }
a img { border:none }
p { margin:0 0 1em 0; padding:0 }
.spacer { height:0px; overflow:hidden; clear:both; display:block }

form { margin:0; padding:0 }
input { margin:0 }
.textInput { padding:3px; font:normal 12px/14px Tahoma, Arial, Helvetica, sans-serif; color:#393a38; background:#fff; border-top:#aaadb2 1px solid; border-right:#dbe0e6 1px solid; border-bottom:#e2e9ef 1px solid; border-left:#e3e3eb 1px solid }
.button { font:normal 13px/16px Tahoma, Arial, Helvetica, sans-serif; color:#393a38; padding:4px 10px; margin:0; cursor:pointer }
   
#wrapper { min-width:1000px; position:relative }

#header { height:59px; background:#393a38; border-bottom:#333432 1px solid; color:#ededed }
.headerInner { width:1000px; margin:0 auto; text-align:left; color:#969696; position:relative }
.pathBar { float:left; display:inline; margin:0 0 0 -16px; padding:20px 0 0 10px; width:900px; text-transform:uppercase; letter-spacing:1px; text-shadow:1px 1px 0 #000 }
.pathBar h1 { font:normal 12px/20px Tahoma, Arial, Helvetica, sans-serif; color:#969696; margin:0; padding:0; float:left; background:url(pathbar_sep.gif) right 4px no-repeat }
.pathBar h1 a { float:left; height:21px; background:url(pathbar.png) 0 21px no-repeat; padding:0 0 0 16px; color:#888; text-decoration:none }
.pathBar h1 a span { float:left; height:21px; padding:0 16px 0 0 }
.pathBar h1 a:hover { color:#cacaca; text-decoration:none; background-position:0 0 }
.pathBar h1 a:hover span { background:url(pathbar.png) top right no-repeat; }
.pathBar h1 strong { font-weight:normal; padding:0 16px; color:#ededed }
.pathBar h2 { font:normal 12px/20px Tahoma, Arial, Helvetica, sans-serif; color:#969696; margin:0 0 0 -5px; padding:0; float:left; display:inline; background:url(pathbar_sep.gif) right 4px no-repeat }
.pathBar h2 a { float:left; height:21px; background:url(pathbar.png) 0 21px no-repeat; padding:0 0 0 17px; color:#888; text-decoration:none }
.pathBar h2 a span { float:left; height:21px; padding:0 17px 0 0 }
.pathBar h2 a:hover { color:#cacaca; text-decoration:none; background-position:0 -21px }
.pathBar h2 a:hover span { background:url(pathbar.png) right -21px no-repeat; }
.pathBar h2 strong { padding:0 17px; font-weight:normal; color:#ededed }
.pathBar .pathBar-last { background:none }

#welcome { height:100%; text-align:center }
#welcome img { display:block; height:100%; margin:0 auto }
.page-index #content { background:#262626 }

#client-title { float:left; padding:0; width:230px; position:relative; overflow:hidden; height:21px; }
#client-title strong { display:block; height:21px; line-height:20px; font-weight:normal; padding:0 15px; color:#ededed; position:absolute; top:0; left:0; }

.progress { width:490px; position:absolute; top:28px; right:10px; z-index:10; }
#progress-bar { border-top:#272926 1px solid; border-right:#494a48 1px solid; border-bottom:#494a48 1px solid; border-left:#2c2e2b 1px solid; height:3px; overflow:hidden; background:#2d2f2c url(progress.gif) 0 0 repeat-x }
#progress-slider { position:absolute; top:-1px; left:0; width:70px; height:6px; font-size:1px; line-height:1px; overflow:visible !important; cursor:pointer; background:#808280 url(progress.gif) 0 -3px repeat-x; border-radius:1px; -webkit-border-radius:1px; -moz-border-radius:1px; box-shadow:0 1px 4px rgba(0,0,0,0.35); -webkit-box-shadow:0 1px 4px rgba(0,0,0,0.35); -moz-box-shadow:0 1px 4px rgba(0,0,0,0.35) }
#progress-label { color:#efefef; border-top:#989898 5px solid; background:#888; padding:2px 8px 7px 8px; text-transform:uppercase; position:absolute; top:20px; left:0; display:none; font-size:12px; line-height:16px; white-space:nowrap }

#clients { position:absolute; top:60px; left:50%; width:1000px; margin:0 0 0 -500px; z-index:11; display:none }
#clients ul { margin:0; padding:0; list-style:none }
#clients li { margin:0 1px 1px 0; padding:0; background:rgba(57,58,56,0.9); overflow:hidden; width:295px; height:105px; float:left; display:inline; text-shadow:1px 1px 0 #000; }
#clients li a { display:block; width:100%; height:105px; text-decoration:none; color:#cacaca; cursor:pointer }
#clients li a:hover { text-decoration:none; color:#ededed }
#clients li a .client-title { overflow:hidden; clear:both; zoom:1; margin:0 0 4px 0 }
#clients li a .client-title strong { float:left; padding:1px 9px 7px 9px; color:#cacaca; text-transform:uppercase; border-top:#535453 5px solid; background:#393a38; font-weight:normal; letter-spacing:1px }
#clients li a .client-info { padding:0 9px; font-size:12px; line-height:16px; color:#ededed; margin:0; display:none }
#clients li a:hover { background-color:#393a38; border-top:#535453 5px solid; height:100px }
#clients li a:hover .client-info { display:block; clear:both }
#clients li a:hover .client-title strong { border:none; background:none; color:#ededed }
#clients li a:hover .client-title a { color:#ededed }
#clients li a:hover .client-title a:hover { color:#ededed }

#clients li.client-active a { cursor:default; color:#ededed }
#clients li.client-active a .client-title strong { background:#888; border-color:#989898; color:#ededed }
#clients li.client-active a .client-info { display:block; clear:both }
#clients li.client-active a:hover { color:#ededed; background:none; border:none; height:147px }
#clients li.client-active a:hover .client-title strong { background:#888; color:#ededed; border-top:#989898 5px solid; }

#footer { height:59px; background:#393a38; color:#888; border-top:#4d4e4c 1px solid; text-align:center; text-shadow:1px 1px 0 #000 }
.footerInner { width:1000px; margin:0 auto; text-align:left; color:#969696; letter-spacing:1px }
.footerInner .address { float:left; margin:0; padding:20px 0 0 10px; white-space:nowrap }
.footerInner .address img { vertical-align:top; margin:3px 0 0 20px }
.footerInner .copy { float:right; margin:0; padding:20px 10px 0 0; white-space:nowrap }
.footerInner .slideShowToggler { float:right; display:inline; margin:18px 10px 0 0; cursor:pointer; position:relative; padding:0 30px 0 0 }
.footerInner .slideShowToggler .sst-wrapper { float:left; height:21px; line-height:21px; background:url(pathbar.png) 0 21px no-repeat; padding:0 0 0 15px; color:#888; text-decoration:none }
.footerInner .slideShowToggler .sst-wrapper span { float:left; height:21px; padding:0 15px 0 0 }
.footerInner .slideShowToggler:hover .sst-wrapper { color:#cacaca; text-decoration:none; background-position:0 -21px; }
.footerInner .slideShowToggler:hover .sst-wrapper span { background:url(pathbar.png) right -21px no-repeat; }
.footerInner .slideShowToggler i { display:block; width:24px; height:19px; overflow:hidden; background:url(slideshow.gif) 0 0 no-repeat; position:absolute; top:1px; right:0 }
.footerInner .slideShowToggler-active .sst-wrapper { color:#ededed }
.footerInner .slideShowToggler-active:hover .sst-wrapper { color:#ededed }
.footerInner .slideShowToggler-active i { background-position:0 -19px }
.footerInner .allProjectsLink { float:right; display:inline; margin:18px 10px 0 0; cursor:pointer; position:relative; padding:0 0 0 0; text-transform:uppercase }
.footerInner .allProjectsLink a { float:left; height:21px; line-height:21px; background:url(pathbar.png) 0 21px no-repeat; padding:0 0 0 15px; color:#969696; text-decoration:none }
.footerInner .allProjectsLink a span { float:left; height:21px; padding:0 15px 0 0 }
.footerInner .allProjectsLink:hover a { color:#cacaca; text-decoration:none; background-position:0 0; }
.footerInner .allProjectsLink:hover a span { background:url(pathbar.png) top right no-repeat; }

#pack { height:400px; width:100%; overflow:hidden; position:relative; }
#ribbon { height:100%; width:4000px; }
#ribbon h3 { display:none }

.item { height:100%; float:left; text-align:center; overflow:hidden; display:none; background:url(loader.gif) center center no-repeat; position:relative }

/* не трогать */
.item img { height:100%; margin:0 auto; display:block; }

.item-text { width:980px; margin:0 auto; text-align:left; padding:30px 0 0 0 }
.item-text h4 { font:normal 72px/72px Tahoma, Arial, Helvetica, sans-serif; margin:0 0 10px 0; padding:0 }
.item-text .item-fullInfo { width:500px; padding:130px 0 0 0 }

#prev { position:absolute; top:0; left:0; width:25%; height:100%; background:url(spacer.gif) 0 0 no-repeat; cursor:pointer; z-index:10 }
#prev b { display:none; position:absolute; top:50%; left:50%; width:100px; height:100px; overflow:hidden; margin:-50px 0 0 -50px }
#prev i { display:block; width:200px; height:100px; background:url(arrows.png) 0 0 no-repeat }
#prev:hover b { display:block }

#next { position:absolute; top:0; right:0; width:25%; height:100%; background:url(spacer.gif) 0 0 no-repeat; cursor:pointer; z-index:10; }
#next b { display:none; position:absolute; top:50%; left:50%; width:100px; height:100px; overflow:hidden; margin:-50px 0 0 -50px }
#next i { display:block; width:200px; height:100px; background:url(arrows.png) 0 0 no-repeat; margin:0 0 0 -100px }
#next:hover b { display:block }

#content { min-height:400px }

<body class="page-portfolio">
<div id="wrapper"><div id="header">

<div class="headerInner"><div class="pathBar">
<h1><a href="#"><span>Главная страница</span></a></h1>
<h2><a href="#"><span>Каталог</span></a></h2>
<div id="client-title"><strong></strong></div></div>

<div class="progress">
<div id="progress-bar"></div>
<div id="progress-slider"></div>
</div>

</div></div>

<div id="clients"></div><div id="pack">

<div id="prev"><b><i></i></b></div>
<div id="ribbon">

<script type="text/javascript">
var portfolio = [{
  "title":"LORANGE",
  "id":"lorangerestyle",
  "loaded":false,
  "active":false,
  "info":'Фирменный стиль.',
  "slides":[{

  "src":"page_58_Lorange3-01.jpg",
  "width":1240,
  "height":995
  }
,{
  "src":"page_973_Lorange3-02.jpg",
  "width":1240,
  "height":995
}
,{
  "src":"page_644_Lorange3-03.jpg",
  "width":1240,
  "height":995
}
,{
  "src":"page_698_Lorange3-04.jpg",
  "width":1240,
  "height":995
}
,{
  "src":"page_349_Lorange3-05.jpg",
  "width":1240,
  "height":995
}
,{
  "src":"page_294_Lorange3-06.jpg",
  "width":1240,
  "height":995
}
,{
  "src":"page_277_Lorange3-07.jpg",
  "width":1240,
  "height":995
}
,{
  "src":"page_689_Lorange3-08.jpg",
  "width":1240,
  "height":995
}
,{
  "src":"page_938_Lorange3-09.jpg",
  "width":1240,
  "height":995
}
,{
  "src":"page_267_Lorange3-10.jpg",
  "width":1240,
  "height":995
} ]
  }
,{
  "title":"DEMO2, например",
  "id":"lorange2013",
  "loaded":false,
  "active":false,
  "info":'Визуализация рекламной кампании.',
  "slides":[{

  "src":"page_36_Lorange04-01.jpg",
  "width":1326,
  "height":995
}
,{
  "src":"page_777_Lorange04-02.jpg",
  "width":1493,
  "height":995
}
,{
  "src":"page_973_Lorange04-03.jpg",
  "width":1240,
  "height":995
}
,{
  "src":"page_13_Lorange04-04.jpg",
  "width":1240,
  "height":995
}
,{
  "src":"page_222_Lorange04-05.jpg",
  "width":1240,
  "height":995
}
,{
  "src":"page_430_Lorange04-06.jpg",
  "width":1493,
  "height":995
}
,{
  "src":"page_997_Lorange04-07.jpg",
  "width":1240,
  "height":995
}
,{
  "src":"page_957_Lorange04-08.jpg",
  "width":1240,
  "height":995
}
,{
  "src":"page_597_Lorange04-09.jpg",
  "width":1238,
  "height":995
}
,{
  "src":"page_209_Lorange04-10.jpg",
  "width":1447,
  "height":995
}
,{
  "src":"page_888_Lorange04-11.jpg",
  "width":1238,
  "height":995
}
,{
  "src":"page_832_Lorange04-12.jpg",
  "width":1240,
  "height":995
}]
}];
</script>
</div>
<div id="next"><b><i></i></b></div>
</div>
<div id="footer">
  <div class="footerInner">
  <p class="address">описание</p>
  <p class="slideShowToggler" id="sst"><span class="sst-wrapper"><span>СЛАЙД-ШОУ</span></span><i></i></p>
  </div></div>
</div>
</body>