Слайдер и блок с сюжетом

автор ZoD1aK Май 13th 2012, 23:39

Выложую слайдер и блок который стоял возле него на shippuuden.biz
Слайдер и блок с сюжетом Ddud-d10

Устанавливаем таблицу стилей CSS:
Панель администратора - Оформление - Цвета - Каскадная таблица стилей CSS

Код:: #r_sujet {width:734px;height:137px;padding:20px 4px;background:url(http://i46.servimg.com/u/f46/15/16/58/01/bg-log14.jpg) repeat; overlay:hidden;border: 1px solid #181818; overflow: auto;} .box_skitter{position:relative;width:326px;height:179px;background:#000;overflow:hidden;} .box_skitter ul {display:none;} .box_skitter .image {overflow:hidden;} .box_skitter .image img {display:none;} .box_skitter .box_clone {position:absolute;top:0;left:0;width:100px;overflow:hidden;display:none;z-index:20;} .box_skitter .box_clone img {position:absolute;top:0;left:0;z-index:20;} .box_skitter .prev_button {position:absolute;top:60%;left:15px;z-index: 999;width:22px;height:22px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url('http://i47.servimg.com/u/f47/15/87/05/58/prev10.png') no-repeat left top;} .box_skitter .next_button {position:absolute;top:60%;right:15px;z-index: 999;width:22px;height:22px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url('http://i47.servimg.com/u/f47/15/87/05/58/next10.png') no-repeat left top;} .box_skitter .info_slide {position:absolute;top:15px;left:15px;z-index: 999;background:#000;color:#fff;font:bold 11px arial;padding:5px 0 5px 5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;opacity:0.75;} .box_skitter .image_number {background:#333;float:left;padding:2px 10px;margin:0 5px 0 0;cursor:pointer;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;} .box_skitter .image_number_select {background:#cc0000;float:left;padding:2px 10px;margin:0 5px 0 0;} .box_skitter .info_slide_thumb {-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;overflow:hidden;height:45px;top:auto;bottom:-5px;left:-5px;padding:5px;opacity:1.0;} .box_skitter .info_slide_thumb .image_number {overflow:hidden;width:70px;height:40px;position:relative;} .box_skitter .info_slide_thumb .image_number img {position:absolute;top:-50px;left:-50px} .box_skitter .box_scroll_thumbs {padding:0 10px;} .box_skitter .box_scroll_thumbs .scroll_thumbs {position:absolute;bottom:60px;left:50px;background:#ccc;background:-moz-linear-gradient(-90deg, #555, #fff);background:-webkit-gradient(linear, left top, left bottom, from(#555), to(#fff));width:200px;height:10px;overflow:hidden;text-indent:-9999em;z-index: 999;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;cursor:pointer;border:1px solid #333;} .box_skitter .label_skitter {z-index: 999;position:absolute;bottom:0px;left:0px;display:none;} .loading {position:absolute; top:50%; right:50%; z-index: 999; margin:-16px -16px;color:#fff;text-indent:-9999em;overflow:hidden;background:url('http://i47.servimg.com/u/f47/15/87/05/58/ajax-l10.gif') no-repeat left top;width:32px;height:32px;} .box_skitter_large {width:326px;height:179px;} .box_skitter_small {width:200px;height:200px;}

Устанавливаем сам слайдер и сюжет:
Панель администратора - Оформление - Общая информация - Приветствие на главной странице

Код:: <script type="text/javascript" src="http://thiagosf.net/projects/jquery/skitter/js/jquery.skitter.min.js"></script> <script type="text/javascript" src="http://thiagosf.net/projects/jquery/skitter/js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="http://thiagosf.net/projects/jquery/skitter/js/jquery.animate-colors-min.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery('.box_skitter_large').skitter({animation: "" , hideTools: true}); }); </script> <table style="position:relative;margin:-14px 0 -14px -9px;height:180px;"><tr><td><div class="border_box"><div class="box_skitter box_skitter_large"> <ul><li><a href="#blind"><img src="http://i47.servimg.com/u/f47/15/87/05/58/nddndd10.png" class="blind" /></a></li> <li><a href="#blindHeight"><img src="http://i47.servimg.com/u/f47/15/87/05/58/ddddu10.png" class="blindHeight" /></a></li> <li><a href="#blindWidth"><img src="http://i47.servimg.com/u/f47/15/87/05/58/ddddnd10.png" class="blindWidth" /></a></li> <li><a href="#directionTop"><img src="http://i47.servimg.com/u/f47/15/87/05/58/111.png" class="cube" /></a></li> <li><a href="#fadeFour"><img src="http://i47.servimg.com/u/f47/15/87/05/58/dddnd10.png" class="fadeFour" /></a></li> <li><a href="#directionRight"><img src="http://i47.servimg.com/u/f47/15/87/05/58/ddnnnd10.png" class="directionRight" /></a></li> <li><a href="#blindWidth"><img src="http://i47.servimg.com/u/f47/15/87/05/58/nddd-d10.png" /></a></li> </ul></div></div></td><td style="padding-left:1px;"> <div id="r_sujet"><div style="font-size:18px; font-family: Century Gothic, sans-serif;text-shadow:0px -1px 0px #000;margin:0 0 8px;"><font color="red">С</font>южет ролевой</div> <p align="justify"> Наш сюжет ролевой начинается с того что шиноби начали строить свой собственный мир, который очень быстро развивался. И через время этот мир поделился на части (распался на деревни). Так как очень много было сильных шиноби и каждый хотел стать во главе деревни. Из-за этого целый мир шиноби распался на 5-ть сильнейших деревень, в которых во главе стоял свой лидер.</p> <p align="justify"> С такими оборотами ролевая начала набирать темпы своего развития и в какой-то момент когда не кто не ожидал Отокаге из своей деревней напал на Кумо и в недолгой битве уничтожил её. (оставил только сами руины). Этот факт разозлил всех Каге и началось приготовления к первой войне. В некоторый момент Хокаге попросил собраться всех каге чтоб обговорить что же делать с Ото. С этого момента мы продолжим играть и узнаем с некоторым временем что же решили каге и чем окончится эта вражда, и что будет в дальнейшем с Кумо.</p> </div></td></tr></table>