Карусельный скрипт: Объединеный Инфо-Блок и Мини-Фотогаллерея

Страница: 1 2 3 »

Сообщений 1 страница 20 из 60

Поделиться1Вт, 28 Дек 2010 18:04:25

Автор: rps
Стремясь к новому...
Зарегистрирован: Вс, 12 Окт 2008
Сообщений: 22652
Уважение: +4738
Позитив: +3431
Пол: Мужской
Предупреждения: ‡ 1. 2. 3. ... 10!
Последний визит:
Вс, 14 Мар 2021 21:42:57

По просьбе Deff...

Поделиться2Вт, 28 Дек 2010 18:04:52

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51422
Уважение: +15369
Позитив: +11881
Последний визит:
Вчера 22:34:51

Объединение Инфо-Блока и Мини-Фотогаллереи с карусельным скриптом

rps (*Спасибо

Действующая модель тут > http://hostjs-mybb2011.narod.ru/Sennnehund.htm
Прим. Картинки кликабельны начиная со второго окна горизонтальной прокрутки.( можно сделать и с первого

Основные трудности которые нужно было преодолеть - это реализация терпимой прокрутки информационно-новостных и имиджевых блоков при нефиксированном по ширине форуме

Собственно заполняемых окон в Администрирование -Настройка два:

В самый верх HTML верх идет вот этот код:

<link rel="stylesheet" href="http://hostjs-mybb2011.narod.ru/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://hostjs-mybb2011.narod.ru/js/prototype.js"></script>
<script type="text/javascript" src="http://hostjs-mybb2011.narod.ru/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="http://hostjs-mybb2011.narod.ru/js/lightbox.js"></script>

Который обеспечивает поддержку слайд-шоу lightbox

Далее минимальный рабочий код вставляемый в Объявление для двух экранов для горизонтальной прокрутки (размножаются до желаемого количества) и 4-х экранов(по 4-ре блока инфы в каждом) кнопок(размножаются для желаемого числа кнопок

Код:

<!--============== Fotogallere/Information block =========== -->

<style>
/*#announcement_1 .span{visibility: hidden;}*/
</style>
<style>

 /*========  Экранная Таблица =========*/
#Tab_01 {
  position:relative;
  z-index:4;/**/
  border-collapse:collapse;
  border:#999395 2px solid!important;
  width:98%!important;
  height:269px;
   /*border-color:#000; */
  background-image: url(); /*http://s46.radikal.ru/i112/1011/36/d7ce20ebe0a6.jpg*/
  background-position:no-repeat;
}
#Tab_Ekr {
  width:98%!important;
  /*border:red 1px solid!important;*/
}
#Tab_Ekr td {
  border-collapse:collapse!important;
  /*border:red 1px solid!important;*/
  text-align:center;
}
#Ekr td{
  height:169px!important;
}
#title {
  height:20px!important;
  /*border:#000 1px solid!important;*/
}
#title div{
  display: none;
  /*margin-bottom:1%;*/
  position:relative;
  /*border:red 1px solid!important;*/
  max-width:98%;
  font-weight:bold!important;
  font-size:14px!important;

  text-align:center;
  text-align:center;
  vertical-align:center;
}
#Ekr div.Num1,#Ekr div.Num2,#Ekr div.Num3,#Ekr div.Num4{
  width:90%;
  height:167px!important;
  padding:2px;
  margin: 5px 7%;
  display: none;

  border:#7E4A4E 2px solid!important;/**/
  text-align:left;
}

#Ekr img{
  /*max-width:200px!important;*/
   max-height:150px!important;
  display:inline;
  float:left;
  padding:3px 4px 3px 0;
  text-align:right;
}

#vmeny,#vmeny td{
  background:#D6D0D1;
  border:#AFA7AA 1px solid!important;
}

#prevnext,#prevnext td{
  background:#B2AAAA;
  border:#999395 2px groove!important;/**/
 
  padding:0 65px;
}

/* Ограничение максимального размера превью */
/**/
#lightbox,#imageDataContainer,#hoverNav,#outerImageContainer{
  max-width:900px!important;
   max-height:680px!important;
}
#lightboxImage {
  max-width:880px!important;
   max-height:694px!important;
}   

</style>


<!-- ==========УКРАШАТЕЛЬСТВА============= -->

<style type="text/css"> /* Стиль первой буквы после тега <p> */
#Ekr p:first-letter,#Ekr .lipsum:first-letter,#Ekr ul li:first-child:first-letter {
    font-family: "Times New Roman", Times, serif!important; /* Гарнитура шрифта первой буквы */
    font-size: 200% !important; /* Размер шрифта первого символа */
    color: #A31B2E!important; /* Красный цвет текста */
}

#Ekr ul li a{color:#5D4B4B!important;
}
#Ekr ul li a:hover{color:#0555D3!important;
}
</style>

<center><table id="Tab_01" border="2" cellspacing="0" cellpadding="0">
         <tbody>
	   <tr>
<!--======&&& Экраные ТАБЛИЦЫ ======= -->
	      <td  width="100%" valign="bottom" height="199" colspan="8" style="height:199px!important;">

<div id="title"  alt="Блок экранных Заголовков" style="padding:0px;">
<!--======&&& Блок экранных Заголовков =================================== -->

<!-- &&&"Заголовок Экран 1-->
<div id="title_1" style="display: block;">Заголовок 1</div>
<!-- &&&"Заголовок Экран 2-->
<div id="title_2" style="">Заголовок 2<span style=font-weight:normal;font-size:11px;">(маленькая фотогаллерея)</span></div>
<!--&&&//КОНЕЦ Экранных Заголовков-->

<!--========== &&&"Заголовки для Кнопок ==========-->
<!-- &&&"Заголовок Кнопка 1 Администрация -->
<div id="title_301" style=""><span style="text-shadow: #64625F 2px 2px 6px;color:#931829">Администрация</span></div>
<!-- &&&"Заголовок Кнопка 2 Правила Форума -->
<div id="title_302" style=""><span style="text-shadow: #64625F 2px 2px 6px;color:#931829">Правила Форума</span></div>
<!-- &&&"Заголовок Кнопка 3 Новости КПЦ -->
<div id="title_303" style=""><span style="text-shadow: #64625F 2px 2px 6px;color:#931829">Новости КПЦ</span></div>
<!-- &&&"Заголовок Кнопка 4 Полезные ссылки -->
<div id="title_304" style=";"><span style="text-shadow: #64625F 2px 2px 6px;color:#931829">Полезные ссылки</span></div>

<!--&&&//End Блок Экранных Заголовков--></div>

<table id="Tab_Ekr" align="center" width="100%" border="0" cellspacing="0" cellpadding=0">
         <tbody>
	   <tr id="Ekr"><!-- &&&"Экран-Контент -->


<!-- &&&"Экран 1 --><td class="E1">

<div  class="Num1"  style="display: block;"><!--1Конт 1 -->
<img rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
1Экран Конт 1

<!--//End//1Конт 1 --></div>

	      </td>
	      <td class="E1">

<div  class="Num2" style="display: block;"><!--1Конт 2 -->
<img rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
1Экран Конт 2

<!--//End//1Конт 2 --></div>

	      </td>
	      <td class="E1">

<div  class="Num3" style="display: block;"><!--1Конт 3 -->
<img  rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
1Экран Конт 3

<!--//End//1Конт 3 --></div>

	      </td>
	      <td class="E1">

<div class="Num4" style="display: block;"><!--1Конт 4 -->
<img  rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
1Экран Конт 4

<!--//End//1Конт 4 --></div>

</td><!-- &&&"/End/Экран 1 -->


<!-- &&&"Экран 2 --><td class="E2">


<div  class="Num1"  style=""><!--1Конт 1 -->
<img rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
2Экран Конт 1

<!--//End//1Конт 1 --></div>

	      </td>
	      <td class="E2">

<div  class="Num2" style=""><!--1Конт 2 -->
<img rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
2Экран Конт 2

<!--//End//1Конт 2 --></div>

	      </td>
	      <td class="E2">

<div  class="Num3" style=""><!--1Конт 3 -->
<img  rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
2Экран Конт 3

<!--//End//1Конт 3 --></div>

	      </td>
	      <td class="E2">

<div class="Num4" style=""><!--1Конт 4 -->
<img  rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
2Экран Конт 4
<!--//End//1Конт 4 --></div>

</td><!-- &&&"/End/Экран 2 -->


<!-- +++++++++++++++++++++++++ ТУТ МОЖНО ДОБАВИТЬ ОЧЕРЕДНОЙ ЭКРАН === -->



<!-- &&&"//End/Контент  Экранов -->
<!-- ======= "Экраны для встроенных Кнопок ====== -->

<!-- &&&"Экран Администрация Кнопка 1--><td class="E301">

<div  class="Num1"  style=""><!--1Конт 1 -->
<img rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Контент1 Кнопки 1 

<!--//End//1Конт 1 --></div>

	      </td>
	      <td class="E301">

<div  class="Num2" style=""><!--1Конт 2 -->
<img rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Контент2 Кнопки 1 


<!--//End//1Конт 2 --></div>

	      </td>
	      <td class="E301">

<div  class="Num3" style=""><!--1Конт 3 -->
<img  rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Контент3 Кнопки 1 


<!--//End//1Конт 3 --></div>

	      </td>
	      <td class="E301">

<div class="Num4" style=""><!--1Конт 4 -->
<img  rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Контент4 Кнопки 1


<!--//End//1Конт 4 --></div>

</td><!-- &&&"/End/"Экран Администрация 1 -->



<!-- &&&"Экран Правила Кнопка 2--><td class="E302">

<div  class="Num1"  style=""><!--2Конт 1 -->
<img rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Контент1 Кнопки 2

<!--//End//2Конт 1 --></div>

	      </td>
	      <td class="E302">

<div  class="Num2" style=""><!--2Конт 2 -->
<img rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Контент2 Кнопки 2

<!--//End//2Конт 2 --></div>

	      </td>
	      <td class="E302">

<div  class="Num3" style=""><!--2Конт 3 -->
<img  rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Контент3 Кнопки 2

<!--//End//2Конт 3 --></div>

	      </td>
	      <td class="E302">

<div class="Num4" style=""><!--2Конт 4 -->
<img  rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Контент4 Кнопки 2

<!--//End//1Конт 4 --></div>

</td><!-- &&&"/End/Экран Правила -->

<!-- &&&"Экран Новости КПЦ Кнопка 3--><td class="E303">

<div  class="Num1"  style=""><!--3Конт 1 -->
<img rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Контент1 Кнопки 3

<!--//End//1Конт 1 --></div>

	      </td>
	      <td class="E303">

<div  class="Num2" style=""><!--3Конт 2 -->
<img rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Контент2 Кнопки 3 

<!--//End//2Конт 2 --></div>

	      </td>
	      <td class="E303">

<div  class="Num3" style=""><!--3Конт 3 -->
<img  rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Контент3 Кнопки 3

<!--//End//3Конт 3 --></div>

	      </td>
	      <td class="E303">

<div class="Num4" style=""><!--3Конт 4 -->
<img  rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Контент4 Кнопки 3

<!--//End//3Конт 4 --></div>

</td><!-- &&&"/End/Экран Новости КПЦ -->

<!-- &&&"Экран Полезные Ссылки Кнопка 4--><td class="E304">

<div  class="Num1"  style=""><!--4Конт 1 -->
<img rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Контент1 Кнопки 4

<!--//End//4Конт 1 --></div>

	      </td>
	      <td class="E304">

<div  class="Num2" style=""><!--4Конт 2 -->
<img rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Контент2 Кнопки 4

<!--//End//4Конт 2 --></div>

	      </td>
	      <td class="E304">

<div  class="Num3" style=""><!--4Конт 3 -->
<img  rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Контент3 Кнопки 4

<!--//End//4Конт 3 --></div>

	      </td>
	      <td class="E304">

<div class="Num4" style=""><!--4Конт 4 -->
<img  rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Контент4 Кнопки 4


<!--//End//4Конт 4 --></div>

</td><!-- &&&"/End/Экран Полезные Ссылки -->


<!-- &&&"//End/Контент  Кнопок--></tr>
         </tbody>
	</table>

	      </td>
	   </tr>
	   <tr id="prevnext">
	      <td  id="prevtd" width="50%" height="23" valign="center" align="right" colspan="4">
<span  class=""><img id="prev" src="http://savepic.org/1002704.png"  /></span>
	      </td>
	      <td  id="nexttd" width="50%"  height="23" align="left" colspan=4>
<span class=""><img id="next" src="http://savepic.org/986320.png"/></span>
	      </td>
	   </tr>
	   <tr id="vmeny"><!-- ========== МЕНЮ  КНОПОК ============== -->
	      <td  width="100%" align="center" height="25" colspan=8>
<img class="butCont" id="301" src='http://savepic.org/1024209.png'  onMouseOver="this.src='http://savepic.org/1016017.png'" onMouseOut="this.src='http://savepic.org/1024209.png'" border="0" alt="Администрация" border="0"/>

<img class="butCont" id="302" src='http://savepic.org/987345.png'  onMouseOver="this.src='http://savepic.org/993489.png'" onMouseOut="this.src='http://savepic.org/987345.png'" border="0" alt="Правила Форума" border="0"/>

<img class="butCont" id="303" src='http://savepic.org/1040592.png'  onMouseOver="this.src='http://savepic.org/1047760.png'" onMouseOut="this.src='http://savepic.org/1040592.png'" border="0" alt="Новости КПЦ" border="0"/>

<img class="butCont" id="304" src='http://savepic.org/1032400.png'  onMouseOver="this.src='http://savepic.org/1039568.png'" onMouseOut="this.src='http://savepic.org/1032400.png'" border="0" alt="Полезные ссылки" border="0"/>
	      </td>
	   </tr>
         </tbody>
	</table></center>


<!-- &&& Карусельный Скрипт -->
<script type="text/javascript">

jQuery(document).ready(function(){
var N_max=2 //  N_max - максимальное число показываемых экранов
var LH=80 
var L=480 // время свертывания - развертывания
var i=1 

jQuery('#nexttd').click(function () { // Кнопка: Следующий;
document.getElementById("prev").src='http://savepic.org/1002704.png'
document.getElementById("next").src='http://savepic.org/994515.png'
   jQuery("#title_"+i).hide();

s2 = "tr.#Ekr td.E"+i+">div.Num"
if (i>=300) i=0;
i++
if (i>N_max) i=1;
   jQuery("#title_"+i).fadeIn(L);
s = "tr.#Ekr td.E"+i+">div.Num"
 
 jQuery(s2+"4").hide();
 jQuery(s2+"3").hide();
 jQuery(s2+"2").hide();
 jQuery(s2+"1").hide(); 
 jQuery(s+"1").fadeIn(L);
 jQuery(s+"2").fadeIn(L);
 jQuery(s+"3").fadeIn(L);
 jQuery(s+"4").fadeIn(L);
});

jQuery('#prevtd').click(function () {    // Кнопка: Предыдущий;  
document.getElementById("next").src='http://savepic.org/986320.png'
document.getElementById("prev").src='http://savepic.org/998608.png'
 jQuery("#title_"+i).hide();

s2 = "tr.#Ekr td.E"+i+">div.Num"
i--
if (i>=300) i = 1
if (i<=0) i=N_max;
 jQuery("#title_"+i).fadeIn(L);
s = "tr.#Ekr td.E"+i+">div.Num"

 jQuery(s2+"1").hide();
 jQuery(s2+"2").hide();
 jQuery(s2+"3").hide();
 jQuery(s2+"4").hide();
 jQuery(s+"4").fadeIn(L);
 jQuery(s+"3").fadeIn(L);
 jQuery(s+"2").fadeIn(L);
 jQuery(s+"1").fadeIn(L);
});

jQuery('tr.#vmeny td>.butCont').click(function () {  // Кнопки: Администрация; Правила; Новости; Навигация;
document.getElementById("next").src='http://savepic.org/986320.png'
document.getElementById("prev").src='http://savepic.org/1002704.png'
  jQuery("#title_"+i).hide();

s2 = "tr.#Ekr td.E"+i+">div.Num"
  i = jQuery(this).attr("id")
 jQuery("#title_"+i).fadeIn(L);
s = "tr.#Ekr td.E"+i+">div.Num"

  
 jQuery(s2+"1").hide();
 jQuery(s2+"2").hide();
 jQuery(s2+"3").hide();
 jQuery(s2+"4").hide();
 jQuery(s+"4").fadeIn(L);
 jQuery(s+"3").fadeIn(L);
 jQuery(s+"2").fadeIn(L);
 jQuery(s+"1").fadeIn(L);
});

});
</script>
<!--============== End//Fotogallere/Info block =========== -->

Пояснения:

Один экран галлереи состоит их блока заголовка и экранного контента четырех блоков текста - картинок
Для добавки очередного Экрана необходимо выполнить три пункта, плюс примечания на счёт контента .

1. добавить код в конец блока экранных заголовков

<div id="title_3" style="">Заголовок 3</div>

Красным цифра очередного экрана, Синим - Ваше название заголовка Прим. Заголовок желательно в одну строк(строка достаточно длинная -места хватает, в двухстрочном случае табличка будет прыгать - измениться высота заголовка

Первые две красные цифры обязательны, идущие по порядку следования заголовков( в контексте самого заголовка - цифра не обязательна, использовалась для визуальной настройки

2. Добавить сам контент экрана, - добавляем такой код перед строкой с коментарием

Добавляем:

<td class="E3">
<div class="Num1" style="">
<img src="http://savepic.org/989425.jpg" width="160" />
3Экран Конт 1
</div>

</td><td class="E3">
<div class="Num2" style="">
<img src="http://savepic.org/989425.jpg" width="160" />
3Экран Конт 2
</div>

</td><td class="E3">
<div class="Num3" style="">
<img src="http://savepic.org/989425.jpg" width="160" />
3Экран Конт 3
</div>

</td><td class="E3">
<div class="Num4" style="">
<img src="http://savepic.org/989425.jpg" width="160" />
3Экран Конт 4
</div>
</td>

Выделенный синим - Ваш собственный контент( примечания о котором будут позднее

Красным, те цифры, которые обязательно нужно сменить при добавке очередного экрана( соответствуют номеру экрана в порядке следования и соответствуют цифре в заголовке (кто сказал что будет просто
3. Найти в скрипте код:

<script type="text/javascript">
jQuery(document).ready(function(){
var N_max=3 // N_max - максимальное число показываемых экранов

И поменять цифру максимального количества экранов с учетом добавленного (очевидно будет такая же, что и в двух предыдущих случаях
Данный пример приведен для добавки экрана 3

Примечания по контенту:
1. Поскольку табличка сделана для безразмерного форума надо учитывать, что ширина одного из блоков инфы на экранах с малым разрешением ограничена(при примерной полной ширине табличке на этом экране 870пиксел ширина каждого из четырех блоков экранного контента примерно равна 200px, на этом же уровне и ставим ширину картинок

т.е картинки ставим кодом:

<img rel="lightbox" src="Ваша ссылка на картинку" width="200" />

Замечу, если у Вас экран в нормальном состоянии менее 870 пиксел, возможно цифру 200 придеться уменьшить

2. Код для установки картинок в блок информации(в один или во все четыре) для эффектов lightbox по клику на картинку имеет следующий вид

<center><a href="Ссылка на картинку" title="Ваше пояснение к картинке" rel="lightbox"><img src="Ссылка на картинку"/></a></center>

Для не оч. больших картинок для ускорения загрузки(чтобы скрипту lightbox не надо было повторно обращаться к хостингу картинок, - возможно дублирование одной и той же Ссылки в превью(ссылка после src=) и в ссылке на большой рисунок, идентичной ссылкой на полноразмерный рисунок(Для не оч. больших картинок, к примеру: до 300 -450пиксел); В принципе, - картинки в превью должны автоужиматься, - если этого нет: cтавьте ширину картинки превью принудительно, согласно предыдущего пункта.

По Горизонтальной прокрутке - вроде всё

Кнопки Дополнительной Информации
Стандартный вид кода одной кнопки (*расположенной в

<img class="butCont" id="301" src='Ссылка на картинку нормальном состоянии' onMouseOver="this.src='Ссылка на картинку при наведении курсором'" onMouseOut="this.src='Ссылка на картинку нормальном состоянии'" border="0" alt="Ваше Описание кнопки" border="0"/>

Номера кнопок нумеруются начиная с 301 и заканчивая кнопкой с Вашим номером. Количество дополнительных кнопок неограничено, главное не забывайте ставить тег <br/>(или несколько тегов подряд для большей раздвижки) после очередной строки с кнопками, (не перегружайте кнопками одну строку(переводите тегом/тегами <br/> на следущую, учитывайте минимальную ширину форума при наименьшем разрешении Экрана монитора, если форум "резиновый" )
Контент кнопки устанавливается после коммента

И имеет такой вид(практически аналогичен Экранному контенту)

<td class="E301">
<div class="Num1" style="">
<img src="http://savepic.org/989425.jpg" width="160" />
Aдм Конт 1
</div>

</td><td class="E301">
<div class="Num2" style="">
<img src="http://savepic.org/989425.jpg" width="160" />
Aдм Конт 2
</div>

</td><td class="E301">
<div class="Num3" style="">
<img src="http://savepic.org/989425.jpg" width="160" />
Aдм Конт 3
</div>

</td><td class="E301">
<div class="Num4" style="">
<img src="http://savepic.org/989425.jpg" width="160" />
Aдм Конт 4
</div>
</td>

Красным - цифра соответствующая цифре кнопки, Синим - Ваш контент; - Зеленым Ваши пояснения к кнопке

Заголовки для Экранов контента Дополнительных Кнопок
Вписываются после комментария:

И имеют Вид:

<div id="title_301" style="">Администрация</div>

Цифра, опять же в соответсвии с цифрой кнопки, указаной в атрибуте id
------------------------------------------------------------------------------------------------
Поменять фоновый цвет ячеек таблицы под кнопками можно найдя в начале таблицы строки

#vmeny,#vmeny td{
background:#D6D0D1;
border:#AFA7AA 1px solid!important;
}

#prevnext,#prevnext td{
background:#B2AAAA;
border:#999395 2px groove!important;/**/

padding:0 65px;
}

Пояснения пока все, будут вопросы - дополним

Ниже дан полный код таблички текущей действующей модели(* указанной в начале сообщения : (*Дан собственно для образца заполнения разным контентом, - по существу различий нет, кроме излишка комментариев и размещения кнопок доп. меню.
Примечание: данный код имеет фиксированное количество кнопок, поскольку кнопки зафиксированы каждая в своей ячейке(можно дополнять добавкой ячеек таблицы:

Код:

<!--============== Fotogallere/Information block =========== -->

<style>
/*#announcement_1 .span{visibility: hidden;}*/
</style>
<style>

 /*========  Экранная Таблица =========*/
#Tab_01 {
  position:relative;
  z-index:4;/**/
  border-collapse:collapse;
  border:#999395 2px solid!important;
  width:98%!important;
  height:269px;
   /*border-color:#000; */
  background-image: url(); /*http://s46.radikal.ru/i112/1011/36/d7ce20ebe0a6.jpg*/
  background-position:no-repeat;
}
#Tab_Ekr {
  width:98%!important;
  /*border:red 1px solid!important;*/
}
#Tab_Ekr td {
  border-collapse:collapse!important;
  /*border:red 1px solid!important;*/
  text-align:center;
}
#Ekr td{
  height:169px!important;
}
#title {
  height:20px!important;
  /*border:#000 1px solid!important;*/
}
#title div{
  display: none;
  /*margin-bottom:1%;*/
  position:relative;
  /*border:red 1px solid!important;*/
  max-width:98%;
  font-weight:bold!important;
  font-size:14px!important;

  text-align:center;
  text-align:center;
  vertical-align:center;
}
#Ekr div.Num1,#Ekr div.Num2,#Ekr div.Num3,#Ekr div.Num4{
  width:90%;
  height:167px!important;
  padding:2px;
  margin: 5px 7%;
  display: none;

  border:#7E4A4E 2px solid!important;/**/
  text-align:left;
}

#Ekr img{
  /*max-width:200px!important;*/
   max-height:150px!important;
  display:inline;
  float:left;
  padding:3px 4px 3px 0;
  text-align:right;
}

#vmeny,#vmeny td{
  background:#D6D0D1;
  border:#AFA7AA 1px solid!important;
}

#prevnext,#prevnext td{
  background:#B2AAAA;
  border:#999395 2px groove!important;/**/
 
  padding:0 65px;
}

/* Ограничение максимального размера превью */
/**/
#lightbox,#imageDataContainer,#hoverNav,#outerImageContainer{
  max-width:900px!important;
   max-height:680px!important;
}
#lightboxImage {
  max-width:880px!important;
   max-height:694px!important;
}   

</style>


<!-- ==========УКРАШАТЕЛЬСТВА============= -->

<style type="text/css"> /* Стиль первой буквы после тега <p> */
#Ekr p:first-letter,#Ekr .lipsum:first-letter,#Ekr ul li:first-child:first-letter {
    font-family: "Times New Roman", Times, serif!important; /* Гарнитура шрифта первой буквы */
    font-size: 200% !important; /* Размер шрифта первого символа */
    color: #A31B2E!important; /* Красный цвет текста */
}

#Ekr ul li a{color:#5D4B4B!important;
}
#Ekr ul li a:hover{color:#0555D3!important;
}
</style>

<center><table id="Tab_01" border="2" cellspacing="0" cellpadding="0">
         <tbody>
	   <tr>
<!--======&&& Экраные ТАБЛИЦЫ ======= -->
	      <td  width="100%" valign="bottom" height="199" colspan="8" style="height:199px!important;">

<div id="title"  alt="Блок экранных Заголовков" style="padding:0px;">
<!--======&&& Блок экранных Заголовков =================================== -->

<!-- &&&"Заголовок Экран 1-->
<div id="title_1" style="display: block;">Заголовок 1</div>
<!-- &&&"Заголовок Экран 2-->
<div id="title_2" style="">Заголовок 2<span style=font-weight:normal;font-size:11px;">(маленькая фотогаллерея)</span></div>
<!-- &&&"Заголовок Экран 3-->
<div id="title_3" style="">Заголовок 3</div>
<!-- &&&"Заголовок Экран 4-->
<div id="title_4" style="">Заголовок 4</div>
<!-- &&&"Заголовок Экран 5-->
<div id="title_5" style=";">Заголовок 5</div>

<!--&&&//КОНЕЦ Экранных Заголовков-->

<!--========== &&&"Заголовки для Кнопок ==========-->
<!-- &&&"Заголовок Кнопка 1 Администрация -->
<div id="title_301" style=""><span style="text-shadow: #64625F 2px 2px 6px;color:#931829">Администрация</span></div>
<!-- &&&"Заголовок Кнопка 2 Правила Форума -->
<div id="title_302" style=""><span style="text-shadow: #64625F 2px 2px 6px;color:#931829">Правила Форума</span></div>
<!-- &&&"Заголовок Кнопка 3 Новости КПЦ -->
<div id="title_303" style=""><span style="text-shadow: #64625F 2px 2px 6px;color:#931829">Новости КПЦ</span></div>
<!-- &&&"Заголовок Кнопка 4 Полезные ссылки -->
<div id="title_304" style=";"><span style="text-shadow: #64625F 2px 2px 6px;color:#931829">Полезные ссылки</span></div>

<!--&&&//End Блок Экранных Заголовков--></div>

<table id="Tab_Ekr" align="center" width="100%" border="0" cellspacing="0" cellpadding=0">
         <tbody>
	   <tr id="Ekr"><!-- &&&"Экран-Контент -->

<!-- &&&"Экран 1 --><td class="E1">

<div  class="Num1"  style="display: block;"><!--1Конт 1 -->
<img rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />1Конт 1 sdasdadadadas 1Конт 1 sdasdadadadas 1Конт 1 dasdadadadas 

<!--//End//1Конт 1 --></div>

	      </td>
	      <td class="E1">

<div  class="Num2" style="display: block;"><!--1Конт 2 -->
<img rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
1Конт 2 sdasdadadadas 
1Конт 1 sdasdadadadas 
1Конт 1 sdasdadadadas 

<!--//End//1Конт 2 --></div>

	      </td>
	      <td class="E1">

<div  class="Num3" style="display: block;"><!--1Конт 3 -->
<img  rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
1Конт 3 sdasdadadadas 
1Конт 1 sdasdadadadas 
1Конт 1 sdasdadadadas 

<!--//End//1Конт 3 --></div>

	      </td>
	      <td class="E1">

<div class="Num4" style="display: block;"><!--1Конт 4 -->
<img  rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />1Конт 4 sdasdadadadas 
1Конт 1 sdasdadadadas 
1Конт 1 sdasdadadadas 

<!--//End//1Конт 4 --></div>

</td><!-- &&&"/End/Экран 1 -->


<!-- &&&"Экран 2 --><td class="E2">

<div  class="Num1" style=""><!--2Конт 1 -->
<center><a  href="http://savepic.org/1040624.jpg" title="Ночной Залив" rel="lightbox" ><img src="http://savepic.org/1031234.jpg"/></a></center>2Конт 1
Ночной Залив


<!--//End//2Конт 1 --></div>

	      </td>
	      <td class="E2">

<div class="Num2"style=""><!--2Конт 2 -->
<center><a href="http://savepic.org/1034480.jpg"  title="Долина Сардыв Нарья" rel="lightbox"><img src="http://savepic.org/1017927.jpg"/></a></center>
2Конт2 Долина Сардыв Нарья

<!--//End//2Конт 2 --></div>

	      </td>
	      <td class="E2">

<div class="Num3" style=""><!--2Конт 3 -->
<center><a href="http://savepic.org/1039600.jpg"  title="Закат на Реке" rel="lightbox"><img src="http://savepic.org/1033304.jpg"/></a></center>
2Конт3  Закат на Реке

<!--//End//2Конт 3 --></div>

	      </td>
	      <td class="E2">

<div  class="Num4" style=""><!--2Конт 4 -->
<center><a href="http://savepic.org/1025264.jpg"  title="Cиняя Энергия" rel="lightbox"><img src="http://savepic.org/984155.jpg"/></a></center>
2Конт4 "Cиняя Энергия"
<!--//End//2Конт 4 --></div>

</td><!-- &&&"/End/Экран 2 -->


<!-- &&&"Экран 3 --><td class="E3">

<div class="Num1" style=""><!--3Конт 1 -->
<center><a href="http://savepic.org/1025145.jpg"  title="Berner sennenhund" rel="lightbox"><img src="http://savepic.org/1040505.jpg"/></a></center>
3Конт1  Berner sennenhund

<!--//End//3Конт 1 --></div>

	      </td>
	      <td class="E3">

<div class="Num2" style=""><!--3Конт 2 -->
<center><a href="http://savepic.org/1010800.png"  title="bernese-sennenhund-puppies" rel="lightbox"><img src="http://savepic.org/1020016.jpg"/></a></center>
3Конт2  bernese-sennenhund-puppies


<!--//End//3Конт 2 --></div>

	      </td>
	      <td class="E3">

<div class="Num3" style=""><!--3Конт 3 -->
<center><a href="http://savepic.org/1021050.jpg"  title="Entlebucher-Sennenhund" rel="lightbox"><img src="http://savepic.org/1028220.jpg"/></a></center>
3Конт3  Entlebucher-Sennenhund

<!--//End//3Конт 3 --></div>

	      </td>
	      <td class="E3">

<div class="Num4" style=""><!--3Конт 4 -->
<center><a href="http://savepic.org/1004666.jpg"  title="Appenzeller_sennenhund" rel="lightbox"><img src="http://savepic.org/984186.jpg"/></a></center>
3Конт4 Appenzeller_sennenhund

<!--//End//3Конт 4 --></div>

</td><!-- &&&"/End/Экран 3 -->


<!-- &&&"Экран 4 --><td class="E4">

<div class="Num1" style=""><!--4Конт 1 -->
<center><a href="http://savepic.org/992372.jpg"  title="Appenzeller_sennenhund" rel="lightbox"><img src="http://savepic.org/992372.jpg" width="200"/></a></center>
4Конт1 Appenzeller_sennenhund


<!--//End//4Конт 1 --></div>
	      </td>
	      <td class="E4">

<div class="Num2" style=""><!--4Конт 2 -->
<center><a href="http://savepic.org/1000564.jpg"  title="Appenzeller_sennenhund" rel="lightbox"><img src="http://savepic.org/1000564.jpg" width="200"/></a></center>
4Конт2 Appenzeller_sennenhund


<!--//End//4Конт 2 --></div>

	      </td>
	      <td class="E4">

<div class="Num3" style=""><!--4Конт 3 -->
<center><a href="http://savepic.org/1002613.jpg"  title="Appenzeller_sennenhund" rel="lightbox"><img src="http://savepic.org/1002613.jpg" width="200"/></a></center>
4Конт3 Appenzeller_sennenhund

<!--//End//4Конт 3 --></div>

	      </td>
	      <td class="E4">	   

<div class="Num4" style=""><!--4Конт 4 -->
<center><a href="http://savepic.org/1023092.jpg"  title="Appenzeller_sennenhund" rel="lightbox"><img src="http://savepic.org/1023092.jpg"  width="200"/></a></center>
4Конт4 Appenzeller_sennenhund

<!--//End//4Конт 4 --></div>

</td><!-- &&&"/End/Экран 4 -->


<!-- &&&"Экран 5 --><td class="E5">
<style>
	.ScrolBlock {
  width:100%;
  /*color:#FF99CC;*/
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0px 6px 0px 6px;
  margin: 0px 0px 0px 0px;
}
</style>      
<div  class="Num1" style=""><!--5Конт 1 -->
<b>5Конт 1</b><br/><br/>
<div class="ScrolBlock" style="height:140px;">
<center><b>Синяя<br/>энергия - синий цвет.</b></center>
<center><a href="http://savepic.org/1025264.jpg"  title="Cиняя Энергия" rel="lightbox"><img src="http://savepic.org/984155.jpg"/></a></center>
Чакра Аджна. Частота колебаний чакры соответствует темно-синему цвету.
Лучше всего делать настройку в назначенное время. Тогда самый сильный поток энергии. Но, если у вас не получается, вы можете поработать сами в тот же день, в любое время. В течение дня наработанное всеми участниками поле сохраняется.
Еще фотографии
Увеличить

</div>
<!--//End//5Конт 1 --></div>

	      </td>
	      <td class="E5">

<div align="right" class="Num2" style=""><!--5Конт 2 -->
<b>5Конт 2</b><br/><br/>
<div  width=100% class="ScrolBlock" style="width:180px!important;padding-left:30px; height:140px;">


<p style="color:#4CA5CE!important;"><b>П а р т н ё р ы:</b></p>

<center>

<br><a href=http://tlkthebeginning.mybb.ru/ target=blank><img src=http://i053.radikal.ru/1002/17/f286424508b7.gif alt="Король Лев. Начало"></a><a href="http://roadtoeternitywolf.mybb.ru/" target="_blank"><img src="http://i28.tinypic.com/24q08cx.png"title="Eternia"border="0" width="88" height="31"></a><a target="_blank" href="http://newlewking.mybb.ru"><img src="http://s40.radikal.ru/i088/0911/e1/944702664ee1.jpg" ></a><a href="http://just.4bb.ru/" target=_blank><img src="http://i065.radikal.ru/1010/06/946f87be9ef1.gif" border="0" title="Alaska Legends" width=81 height=31></a><a target="_blank" href="http://dogfunny.rolka.su/"><img src="http://savepic.net/49661.gif" ></a><a href="http://kotvoitel.rolevaya.ru/" mce_href="" target=_blank><img src="http://s61.radikal.ru/i173/1006/58/0601c8341cb3.gif" mce_src="http://forumupload.ru/uploads/000b/a4/a7/33956-1.gif" border="0" alt="КВ + ФУРРИ! Два в одном! Мы ждем тебя..."> 
</a><a target="_blank" href="http://www.jatko.spybb.ru"><img src="http://s57.radikal.ru/i157/1011/50/bba30ebf2b27.png" title="The Lion King. New Story"></a><br> 

</center>
</div>
<!--//End//5Конт 2 --></div>

	      </td>
	      <td class="E5">

<div class="Num3" style=""><!--5Конт 3 -->
<b>5Конт 3</b><br/><br/>
<div class="ScrolBlock" style="width:180px!important;padding-left:30px; height:140px;">

<!-- Новости и информация == Погода и Дата -->

<p>Н о в о с т и:</p><br>

Наконец-то сменился дизайн. За него отдельное спасибо его создателям. Надеемся, что такая цветовая гамма вам понравится.) 
<br>Чистка закончилась.<center> Поздравляю!</center>

<br>  За удаленный аккаунты,- администрация форума ответственности не несет, если не обнаружили свой профиль в списке пользователей, - не бунтуйте, - предупреждали!<br>
<br>
<p>Игра вновь восстановлена во всех локациях.</p>
<br>
<br>

<p>П о г о д а:</p>

Ночь; конец осени 
<br>Выпал первый снег, создав неповторимое ощущение легкости вокруг и спрятал под собой всю эту невыносимую осеннюю слякоть. Реки и озера  покрылись тонкой ледяной "корочкой"
<br>Температура воздуха -5.
<br>

<!--ХХ Конец Заполнения пункта -->
</div>

<!--//End//5Конт 3 --></div>

	      </td>
	      <td class="E5">

<div class="Num4" style=""><!--5Конт 4 -->
<b>5Конт 4</b><br/><br/>
<div id="Useful_references" class="ScrolBlock" style="width:180px!important;padding-left:30px; height:140px;">
<style>
#Useful_references a{
    color: #2164C9!important;/* DD6900*/
}
#Useful_references a:hover{
    color: #B42000!important/*3E74FC*/;
    text-shadow:#00EAE8 0px 0px 0px;
}
</style>

<i><p style="line-height:120%;">

<!-- Навигация == Начало Заполнения пункта -->


<a href="http://lesrealnost.rolka.su/viewtopic.php?id=7">•°• Правила №1 •°• </a><br>

<a href="http://lesrealnost.rolka.su/viewtopic.php?id=12#p15">•°• Правила №2 •°• </a><br>

<a href="http://lesrealnost.rolka.su/viewtopic.php?id=9#p12">•°• Права и обязанности (помощь) •°• </a><br>

<a href="http://lesrealnost.rolka.su/viewforum.php?id=3">•°• Анкеты •°• </a><br>

<a href="http://lesrealnost.rolka.su/viewtopic.php?id=6">•°• Животные леса •°• </a><br>

<a href="http://lesrealnost.rolka.su/viewtopic.php?id=8">•°• Карта •°•</a><br>

<a href="http://lesrealnost.rolka.su/viewforum.php?id=5">•°• Сюжеты и квесты •°• </a><br>

<a href="http://lesrealnost.rolka.su/viewforum.php?id=15">•°• Флуд и игры •°• </a><br>

<a href="http://lesrealnost.rolka.su/viewforum.php?id=14">•°• Творчество •°• </a><br>

<a href="http://lesrealnost.rolka.su/viewforum.php?id=12">•°• Реклама •°• </a><br>

<!--ХХ Конец Заполнения пункта -->
</i></p>
</div>

<!--//End//5Конт 4 --></div>

</td><!-- &&&"/End/Экран 5 -->

<!-- +++++++++++++++++++++++++ ТУТ МОЖНО ДОБАВИТЬ ОЧЕРЕДНОЙ ЭКРАН === -->



<!-- &&&"//End/Контент  Экранов -->
<!-- ======= "Экраны для встроенных Кнопок ====== -->

<!-- &&&"Экран Администрация Кнопка 1--><td class="E301">

<div  class="Num1"  style=""><!--1Конт 1 -->
<img rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Админ Конт1 sdasdadadadas
1Конт 1 sdasdadadadas 1Конт 

<!--//End//1Конт 1 --></div>

	      </td>
	      <td class="E301">

<div  class="Num2" style=""><!--1Конт 2 -->
<img rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Админ Конт2 sdasdadadadas 
1Конт 1 sdasdadadadas 


<!--//End//1Конт 2 --></div>

	      </td>
	      <td class="E301">

<div  class="Num3" style=""><!--1Конт 3 -->
<img  rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Админ Конт3 sdasdadadadas 
1Конт 1 sdasdadadadas 


<!--//End//1Конт 3 --></div>

	      </td>
	      <td class="E301">

<div class="Num4" style=""><!--1Конт 4 -->
<img  rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Админ Конт4 sdasdadadadas 
1Конт 4 sdasdadadadas 


<!--//End//1Конт 4 --></div>

</td><!-- &&&"/End/"Экран Администрация 1 -->



<!-- &&&"Экран Правила Кнопка 2--><td class="E302">

<div  class="Num1"  style=""><!--2Конт 1 -->
<img rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Rules Конт1 sdasdadadadas
1Конт 1 sdasdadadadas
 1Конт 1 Scbutton2

<!--//End//2Конт 1 --></div>

	      </td>
	      <td class="E302">

<div  class="Num2" style=""><!--2Конт 2 -->
<img rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Rules Конт2 sdasdadadadas 
1Конт 1 sdasdadadadas 
Scbutton2

<!--//End//2Конт 2 --></div>

	      </td>
	      <td class="E302">

<div  class="Num3" style=""><!--2Конт 3 -->
<img  rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Rules Конт3 sdasdadadadas 
1Конт 1 sdasdadadadas 
Scbutton2

<!--//End//2Конт 3 --></div>

	      </td>
	      <td class="E302">

<div class="Num4" style=""><!--2Конт 4 -->
<img  rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
1Конт 4 sdasdadadadas 
Rules Конт4 sdasdadadadas 
Scbutton2

<!--//End//1Конт 4 --></div>

</td><!-- &&&"/End/Экран Правила -->

<!-- &&&"Экран Новости КПЦ Кнопка 3--><td class="E303">

<div  class="Num1"  style=""><!--3Конт 1 -->
<img rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
News Конт1 sdasdadadadas
 1Конт 1 sdasdadadadas
 1Конт 1 Scbutton2

<!--//End//1Конт 1 --></div>

	      </td>
	      <td class="E303">

<div  class="Num2" style=""><!--3Конт 2 -->
<img rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
News Конт2 sdasdadadadas 
1Конт 1 sdasdadadadas 
1Конт 1 sdasdadadadas 

<!--//End//2Конт 2 --></div>

	      </td>
	      <td class="E303">

<div  class="Num3" style=""><!--3Конт 3 -->
<img  rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
News Конт3 sdasdadadadas 
1Конт 1 sdasdadadadas 
1Конт 1 sdasdadadadas 

<!--//End//3Конт 3 --></div>

	      </td>
	      <td class="E303">

<div class="Num4" style=""><!--3Конт 4 -->
<img  rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />1Конт 4 sdasdadadadas 
News Конт4 sdasdadadadas 
1Конт 1 sdasdadadadas 

<!--//End//3Конт 4 --></div>

</td><!-- &&&"/End/Экран Новости КПЦ -->

<!-- &&&"Экран Полезные Ссылки Кнопка 4--><td class="E304">

<div  class="Num1"  style=""><!--4Конт 1 -->
<img rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Navig Конт1 sdasdadadadas
1Конт 1 sdasdadadadas
1Конт 1 dasdadadadas 

<!--//End//4Конт 1 --></div>

	      </td>
	      <td class="E304">

<div  class="Num2" style=""><!--4Конт 2 -->
<img rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Navig Конт2 sdasdadadadas 
1Конт 1 sdasdadadadas 
1Конт 1 sdasdadadadas 

<!--//End//4Конт 2 --></div>

	      </td>
	      <td class="E304">

<div  class="Num3" style=""><!--4Конт 3 -->
<img  rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Navig Конт3 sdasdadadadas 
1Конт 1 sdasdadadadas 
1Конт 1 sdasdadadadas 

<!--//End//4Конт 3 --></div>

	      </td>
	      <td class="E304">

<div class="Num4" style=""><!--4Конт 4 -->
<img  rel="lightbox" src="http://savepic.org/989425.jpg" width="160" />
Navig Конт4 sdasdadadadas 
1Конт 1 sdasdadadadas 
1Конт 1 sdasdadadadas

<!--//End//4Конт 4 --></div>

</td><!-- &&&"/End/Экран Полезные Ссылки -->


<!-- &&&"//End/Контент  Кнопок--></tr>
         </tbody>
	</table>

	      </td>
	   </tr>
	   <tr id="prevnext">
	      <td  id="prevtd" width="50%" height="23" valign="center" align="right" colspan="4">
<span  class=""><img id="prev" src="http://savepic.org/1002704.png"  /></span>
	      </td>
	      <td  id="nexttd" width="50%"  height="23" align="left" colspan=4>
<span class=""><img id="next" src="http://savepic.org/986320.png"/></span>
	      </td>
	   </tr>
	   <tr id="vmeny"><!-- ========== ДОПОЛНИТЕЛЬНЫЕ КНОПКИ МЕНЮ ============== -->
	      <td  width="25%" align="center" height="25" colspan=2>
<img class="butCont" id="301" src='http://savepic.org/1024209.png'  onMouseOver="this.src='http://savepic.org/1016017.png'" onMouseOut="this.src='http://savepic.org/1024209.png'" border="0" alt="Администрация" border="0"/>
	      </td>
	      <td width="25%" align="center" colspan=2>
<img class="butCont" id="302" src='http://savepic.org/987345.png'  onMouseOver="this.src='http://savepic.org/993489.png'" onMouseOut="this.src='http://savepic.org/987345.png'" border="0" alt="Правила Форума" border="0"/>
	      </td>
	      <td width="25%" align="center" colspan=2>
<img class="butCont" id="303" src='http://savepic.org/1040592.png'  onMouseOver="this.src='http://savepic.org/1047760.png'" onMouseOut="this.src='http://savepic.org/1040592.png'" border="0" alt="Новости КПЦ" border="0"/>
	      </td>
	      <td width="25%" align="center" colspan=2>
<img class="butCont" id="304" src='http://savepic.org/1032400.png'  onMouseOver="this.src='http://savepic.org/1039568.png'" onMouseOut="this.src='http://savepic.org/1032400.png'" border="0" alt="Полезные ссылки" border="0"/>
	      </td>
	   </tr>
         </tbody>
	</table></center>


<!-- &&& Карусельный Скрипт -->
<script type="text/javascript">

jQuery(document).ready(function(){
var N_max=5 //  N_max - максимальное число показываемых экранов
var LH=80 
var L=480 // время свертывания - развертывания
var i=1 

jQuery('#nexttd').click(function () { // Кнопка: Следующий;
document.getElementById("prev").src='http://savepic.org/1002704.png'
document.getElementById("next").src='http://savepic.org/994515.png'
   jQuery("#title_"+i).hide();

s2 = "tr.#Ekr td.E"+i+">div.Num"
if (i>=300) i=0;
i++
if (i>N_max) i=1;
   jQuery("#title_"+i).fadeIn(L);
s = "tr.#Ekr td.E"+i+">div.Num"
 
 jQuery(s2+"4").hide();
 jQuery(s2+"3").hide();
 jQuery(s2+"2").hide();
 jQuery(s2+"1").hide(); 
 jQuery(s+"1").fadeIn(L);
 jQuery(s+"2").fadeIn(L);
 jQuery(s+"3").fadeIn(L);
 jQuery(s+"4").fadeIn(L);
});

jQuery('#prevtd').click(function () {    // Кнопка: Предыдущий;  
document.getElementById("next").src='http://savepic.org/986320.png'
document.getElementById("prev").src='http://savepic.org/998608.png'
 jQuery("#title_"+i).hide();

s2 = "tr.#Ekr td.E"+i+">div.Num"
i--
if (i>=300) i = 1
if (i<=0) i=N_max;
 jQuery("#title_"+i).fadeIn(L);
s = "tr.#Ekr td.E"+i+">div.Num"

 jQuery(s2+"1").hide();
 jQuery(s2+"2").hide();
 jQuery(s2+"3").hide();
 jQuery(s2+"4").hide();
 jQuery(s+"4").fadeIn(L);
 jQuery(s+"3").fadeIn(L);
 jQuery(s+"2").fadeIn(L);
 jQuery(s+"1").fadeIn(L);
});

jQuery('tr.#vmeny td>.butCont').click(function () {  // Кнопки: Администрация; Правила; Новости; Навигация;
document.getElementById("next").src='http://savepic.org/986320.png'
document.getElementById("prev").src='http://savepic.org/1002704.png'
  jQuery("#title_"+i).hide();

s2 = "tr.#Ekr td.E"+i+">div.Num"
  i = jQuery(this).attr("id")
 jQuery("#title_"+i).fadeIn(L);
s = "tr.#Ekr td.E"+i+">div.Num"

  
 jQuery(s2+"1").hide();
 jQuery(s2+"2").hide();
 jQuery(s2+"3").hide();
 jQuery(s2+"4").hide();
 jQuery(s+"4").fadeIn(L);
 jQuery(s+"3").fadeIn(L);
 jQuery(s+"2").fadeIn(L);
 jQuery(s+"1").fadeIn(L);
});

});
</script>
<!--============== End//Fotogallere/Info block =========== -->

В принципе скоро будет готова новая редакция более красивого скрипта jQuery, завершающего данную табличку под плавную прокрутки горизонтального контента(* добиваю сложности со свертыванием -развертыванием картинок при незафиксированной ширине форума, поскольку и процентные соотношения ( в сss кодах и в HTML директивах) при разной исходной ширине картинок - не работают

Отредактировано Deff (Ср, 29 Дек 2010 13:05:07)

Поделиться3Вт, 28 Дек 2010 18:23:36

Автор: Invisible Man
Заслуженный
Зарегистрирован: Пн, 5 Апр 2010
Сообщений: 914
Уважение: -3
Позитив: +73
Пол: Мужской
Последний визит:
Вс, 11 Дек 2011 07:08:34

Deff
Хочу

Поделиться4Ср, 29 Дек 2010 02:00:11

Автор: White Crow
Заслуженный
Зарегистрирован: Сб, 2 Окт 2010
Сообщений: 44
Уважение: +11
Позитив: +6
Последний визит:
Пт, 17 Июн 2011 02:11:19

М-м-м-м... Хорошая вещь очень. Только разбираться с ней, что-то мне подсказывает... Напряжно немного. Вернее, лень.

Поделиться5Ср, 29 Дек 2010 02:05:15

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51422
Уважение: +15369
Позитив: +11881
Последний визит:
Вчера 22:34:51

White Crow Ставьте готовый код и меняйте картинки( тексты думаю менять нет проблем

Пяти экранов для мини фотогаллереи (или информации) это 20 картинок или 20 инфо блоков - на первое время должно хватать, плюс 4 кнопки Информации по форуму 16 блоков инфы
Картинки самих кнопок - меняются легко - у Вас уже должен быть подобный опыт

Отредактировано Deff (Ср, 29 Дек 2010 02:10:13)

Поделиться6Ср, 29 Дек 2010 07:11:39

Автор: Эльza
Заслуженный
Зарегистрирован: Вс, 6 Дек 2009
Сообщений: 60
Уважение: +2
Позитив: +11
Пол: Женский
Последний визит:
Вс, 27 Фев 2011 00:15:33

Вот это клево!!! :cool: :cool: :cool:
Очень красиво и функционально, просто СУПЕР!!
Надо разбираться.. и подумать что туда положить..
P.S. А скрипты .js и .css с народа никуда не уйдут??

Поделиться7Ср, 29 Дек 2010 11:11:56

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51422
Уважение: +15369
Позитив: +11881
Последний визит:
Вчера 22:34:51

Эльza В принципе, - мой Аккаунт,- 4 месяца работает пока без проблем

Отредактировано Deff (Ср, 29 Дек 2010 11:29:22)

Поделиться8Пн, 3 Янв 2011 17:07:36

Автор: Sennnehund
Заслуженный
Зарегистрирован: Чт, 18 Ноя 2010
Сообщений: 50
Уважение: 0
Позитив: +3
Последний визит:
Вт, 4 Янв 2011 23:46:25

Deff Спасибо!!! Результат налицо, думаю разберусь где и что менять, сделаю под себя!!
С п а с и б о !

Поделиться9Вс, 9 Янв 2011 21:06:02

Автор: c1De1oDe
Заслуженный
Зарегистрирован: Сб, 25 Дек 2010
Сообщений: 15
Уважение: 0
Позитив: 0
Пол: Мужской
Последний визит:
Пт, 11 Фев 2011 11:11:09

а можно просто фотогаллерею, поставить?

Поделиться10Вс, 9 Янв 2011 22:09:31

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51422
Уважение: +15369
Позитив: +11881
Последний визит:
Вчера 22:34:51

c1De1oDe Ну кнопки уберете нижние - они в коде помечены, в принципе на них можно просто особо ценные фотографии или портреты Авторов..

Напишите на нижних кнопках просто другие названия

Отредактировано Deff (Вс, 9 Янв 2011 22:10:53)

Поделиться11Ср, 9 Фев 2011 21:18:13

Автор: Awatar
Заслуженный
Зарегистрирован: Вс, 23 Авг 2009
Сообщений: 223
Уважение: +1
Позитив: +57
Последний визит:
Пн, 14 Июл 2014 15:21:30

Скрипт супер - все понятно, сложностей нет, огромное вам данки шон.

Но...

проблема с переименовыванием кнопок. *или я дурак*

они переименовались, но только вверху, над экранчиками. а внизу на главной (под экранами) остались прежними.

Поделиться12Ср, 9 Фев 2011 21:30:29

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51422
Уважение: +15369
Позитив: +11881
Последний визит:
Вчера 22:34:51

Awatar читайте внимательно раздел: >

Кнопки Дополнительной Информации
Стандартный вид кода одной кнопки (*расположенной в

Кнопки установлены картинками -(* заменяете ссылки в коде на свои - размеры картинки до и после наведения курсора -должны быть идентичные!
Пример кнопки "Новости КПЦ"(взятой из кода в примере):

<img class="butCont" id="303" src='http://savepic.org/1040592.png' onMouseOver="this.src='http://savepic.org/1047760.png'" onMouseOut="this.src='http://savepic.org/1040592.png'" border="0" alt="Новости КПЦ" border="0"/>

Отредактировано Deff (Ср, 9 Фев 2011 21:37:46)

Поделиться13Ср, 9 Фев 2011 21:43:22

Автор: Awatar
Заслуженный
Зарегистрирован: Вс, 23 Авг 2009
Сообщений: 223
Уважение: +1
Позитив: +57
Последний визит:
Пн, 14 Июл 2014 15:21:30

говорил же дурак((((

и подумал что картинка, но не поверил глазам)))) больно уж мастерски сделано))))))))))))))

Спасибо за пояснение

Поделиться14Сб, 12 Мар 2011 05:24:36

Автор: Andatr@
Заслуженный
Зарегистрирован: Ср, 16 Апр 2008
Сообщений: 153
Уважение: +8
Позитив: +23
Последний визит:
Пт, 17 Окт 2014 16:23:37

как можно переместить заголовки меню над галереей?
~~И убрать кнопки следующее, предыдущее~~

Поделиться15Сб, 12 Мар 2011 08:10:36

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51422
Уважение: +15369
Позитив: +11881
Последний визит:
Вчера 22:34:51

Andatr@ написал(а):

как можно переместить заголовки меню над галереей?

Нарисуйте скриншот ..как вы желаете... поскольку отводимая высота небольшая - это достаточно тяжело - (*проще просто - или не писать заголовок или поставить картинкой по высоте надписи

Andatr@ написал(а):

И убрать кнопки следующее, предыдущее

- Можно их поменять , если Они не используются - смысл карусели теряецо, проще в заказах таблиц заказать таблицу просто с кнопками выбора

Поделиться16Чт, 24 Мар 2011 13:23:29

Автор: Awatar
Заслуженный
Зарегистрирован: Вс, 23 Авг 2009
Сообщений: 223
Уважение: +1
Позитив: +57
Последний визит:
Пн, 14 Июл 2014 15:21:30

вопрос на засыпку.

еще раз обновил Лису и все наладилось. Глюк блин какой-то .Пост оставляю - может ни один я такой баран)))

Отредактировано Awatar (Чт, 24 Мар 2011 17:08:34)

Поделиться17Вс, 27 Мар 2011 21:34:29

Автор: Awatar
Заслуженный
Зарегистрирован: Вс, 23 Авг 2009
Сообщений: 223
Уважение: +1
Позитив: +57
Последний визит:
Пн, 14 Июл 2014 15:21:30

Это опять я. Не ждали, а я приперлось)))

Поставили карусель, изменили исходный в коде цвет на цвет нашего фона - то есть чтобы границ не было видно. Результат проверяло на своих компах человек 6. Во всех браузерах.

В Мазиле, Опере, ИЕ - все гуд.(2 скрин)
В Гугл Хроме - одна граница тупо не окрашивается.(1 скрин)

С этим можно что-то сделать, или это глюк браузера?

Отредактировано Awatar (Пн, 25 Апр 2011 02:51:19)

Поделиться18Пн, 28 Мар 2011 00:23:28

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51422
Уважение: +15369
Позитив: +11881
Последний визит:
Вчера 22:34:51

Awatar написал(а):

С этим можно что-то сделать, или это глюк браузера?

Короче эффект наблюдается в хроме (в других не отмечен...
наверно можно попытаться отключить бордюры у таблички -типо

#Tab_01,#Tab_01 tr,#Tab_01 td,
#Tab_Ekr,#Tab_Ekr tr,#Tab_Ekr td {
border:none 0 transparent!important;
}

и впихнуть его в самый низ стиля таблицы

Поделиться19Пн, 28 Мар 2011 00:42:58

Автор: Awatar
Заслуженный
Зарегистрирован: Вс, 23 Авг 2009
Сообщений: 223
Уважение: +1
Позитив: +57
Последний визит:
Пн, 14 Июл 2014 15:21:30

сорри дубль..завис комп

Отредактировано Awatar (Пн, 28 Мар 2011 00:57:33)

Поделиться20Пн, 28 Мар 2011 00:44:18

Автор: Awatar
Заслуженный
Зарегистрирован: Вс, 23 Авг 2009
Сообщений: 223
Уважение: +1
Позитив: +57
Последний визит:
Пн, 14 Июл 2014 15:21:30

Deff написал(а):

его в самый низ стиля таблицы

я правильно понял -

Код:

/* Ограничение максимального размера превью */
/**/
#lightbox,#imageDataContainer,#hoverNav,#outerImageContainer{
  max-width:900px!important;
   max-height:680px!important;
}
#lightboxImage {
  max-width:880px!important;
   max-height:694px!important;
}  

#Tab_01,#Tab_01 tr,#Tab_01 td,
#Tab_Ekr,#Tab_Ekr tr,#Tab_Ekr td {
border:none 0 transparent!important;
} 

</style>


<!-- ==========УКРАШАТЕЛЬСТВА============= -->

<style type="text/css"> /* Стиль первой буквы после тега <p> */

???? Потому что работает)))

В Хроме граница исчезла.

в других браузерах чисто. Кроме, Мазила версий 3.0.19 и 3.6.16. (скрин) появились другие границы.
В 4й версии порядок.

Отредактировано Awatar (Пн, 28 Мар 2011 00:44:43)

Страница: 1 2 3 »

Единый форум поддержки

Меню навигации

Пользовательские ссылки

Информация о пользователе

Карусельный скрипт: Объединеный Инфо-Блок и Мини-Фотогаллерея

Сообщений 1 страница 20 из 60

Поделиться1Вт, 28 Дек 2010 18:04:25

Поделиться2Вт, 28 Дек 2010 18:04:52

Поделиться3Вт, 28 Дек 2010 18:23:36

Поделиться4Ср, 29 Дек 2010 02:00:11

Поделиться5Ср, 29 Дек 2010 02:05:15

Поделиться6Ср, 29 Дек 2010 07:11:39

Поделиться7Ср, 29 Дек 2010 11:11:56

Поделиться8Пн, 3 Янв 2011 17:07:36

Поделиться9Вс, 9 Янв 2011 21:06:02

Поделиться10Вс, 9 Янв 2011 22:09:31

Поделиться11Ср, 9 Фев 2011 21:18:13

Поделиться12Ср, 9 Фев 2011 21:30:29

Поделиться13Ср, 9 Фев 2011 21:43:22

Поделиться14Сб, 12 Мар 2011 05:24:36

Поделиться15Сб, 12 Мар 2011 08:10:36

Поделиться16Чт, 24 Мар 2011 13:23:29

Поделиться17Вс, 27 Мар 2011 21:34:29

Поделиться18Пн, 28 Мар 2011 00:23:28

Поделиться19Пн, 28 Мар 2011 00:42:58

Поделиться20Пн, 28 Мар 2011 00:44:18