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

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

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Единый форум поддержки » Архив » Карусельный скрипт: Объединеный Инфо-Блок и Мини-Фотогаллерея


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

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

41

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

0

42

Deff
Просто колонки как-то зафиксировать..
http://xmages.net/storage/10/1/0/5/2/up … 168e6e.jpg

0

43

сентябрь написал(а):

Просто колонки как-то зафиксировать..http://xmages.net/storage/10/1/0/5/2/up … 168e6e.jpg

Набейте все 4 колонки - я поправлю

0

44

Deff

0

45

сентябрь Гм - на форуме - я имею ввиду - код я так увижу (пока там ток три > 

Отредактировано Deff (Вт, 7 Июн 2011 00:01:26)

0

46

Deff
Ну там и четыре набито. Последние колонки: акции, полезные ссылки.

0

47

Код:
	<center><!--============== Fotogallere/Information block =========== -->

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

 /*========  Экранная Таблица =========*/
#Tab_01 {
  position:relative;
  z-index:4;/**/
  border-collapse:collapse;
  border:#999395 0px 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 0px solid!important;*/
  text-align:center;
}
#Ekr td{
  height:169px!important;
}
#title {
  height:20px!important;
  /*border:#000 0px solid!important;*/
}
#title div{
  display: none;
  /*margin-bottom:1%;*/
  position:relative;
  /*border:red 0px 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 0px 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:;
  border:#AFA7AA 0px solid!important;
}

#prevnext,#prevnext td{
  background:;
  border:#999395 0px 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;
}   

.ScrolBlock { 
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
overflow-x: hidden;
overflow-y: auto;
padding-bottom: 0px;
padding-left: 6px;
padding-right: 6px;
padding-top: 0px;
width: 100%;
 }
</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;">ветер перемен</div>
<!-- &&&"Заголовок Экран 2-->
<div id="title_2" style="">ветер перемен<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="25%" border="0" cellspacing="0" cellpadding=0">
         <tbody>
	   <tr id="Ekr"><!-- &&&"Экран-Контент -->


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

<div  class="Num1"  style="display: block;"><!--1Конт 1 -->
<div class="ScrolBlock" style="width:220px!important;padding-left:30px; height:140px;">

<center><b>О ПРОЕКТЕ</b></center>
<br>Добро пожаловать на форумную ролевую игру "". Я не буду пересказывать здесь весь сюжет ролевой, думаю, навигация в этом Вам поможет. Хочу лишь сказать, что я хотел создать атмосферу одновременно волшебства, страха и некой странности. Надеюсь, Вы оцените. Для гостей есть специальная тема, куда вы можете задавать все интересующие вас вопросы, а также занимать или придерживать роли. Вам, когда придете, я подарю счастье, честное слово! Навеки ваш Швейцар. </br>
</div>
<!--//End//1Конт 1 --></div>

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

<div  class="Num2" style="display: block;"><!--1Конт 2 -->
<div class="ScrolBlock" style="width:180px!important;padding-left:30px; height:140px;">
<center><b>НОВОСТИ</b></center>
<br> Дорогие участники, прошу Вас обратить на второй выпущенный квест. Так же, хочется напомнить о первом, который все еще не закончен. Ну, ведь это же так просто поддаться порыву вдохновения. Прошу! </br>
</div>
<!--//End//1Конт 2 --></div>

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

<div  class="Num3" style="display: block;"><!--1Конт 3 -->
<div align=center class="ScrolBlock" style="width:100px!important;padding-left:30px; height:140px;">
<b>АКЦИИ</b>
<br/>
<b><a href="ССЫЛКА">act0</a>
</br><a href="ССЫЛКА">act1</a><br><a href="ССЫЛКА">act2</a><br><a href="ССЫЛКА">act3</a></b>
</div>
<!--//End//1Конт 3 --></div>

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

<div class="Num4" style="display: block;"><!--1Конт 4 -->
<div align=center class="ScrolBlock" style="width:100px!important;padding-left:30px; height:140px;">
<b>ПОЛЕЗНЫЕ ССЫЛКИ</b>
</br><a href="ССЫЛКА">гостевая</a><br><a href="ССЫЛКА">акции</a><br><a href="ССЫЛКА">занятые внешности</a></b>
</div>
<!--//End//1Конт 4 --></div>

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


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


<div  class="Num1"  style=""><!--1Конт 1 -->
<img rel="lightbox" src="http://xmages.net/storage/10/1/0/f/b/upload/0947001c.jpg" width="160" />
игрок

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

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

<div  class="Num2" style=""><!--1Конт 2 -->
<img rel="lightbox" src="http://xmages.net/storage/10/1/0/f/b/upload/0947001c.jpg" width="160" />
конкурс

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

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

<div  class="Num3" style=""><!--1Конт 3 -->
<img  rel="lightbox" src="http://xmages.net/storage/10/1/0/f/b/upload/0947001c.jpg" width="160" />
квест

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

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

<div class="Num4" style=""><!--1Конт 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://xmages.net/storage/10/1/0/9/d/upload/c29e3190.png"  /></span>
	      </td>
	      <td  id="nexttd" width="50%"  height="23" align="left" colspan=4>
<span class=""><img id="next" src="http://xmages.net/storage/10/1/0/a/1/upload/561ad42a.png"/></span>
	      </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://xmages.net/storage/10/1/0/7/4/upload/fbdcce07.png '
document.getElementById("next").src='http://xmages.net/storage/10/1/0/9/3/upload/86c535bb.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://xmages.net/storage/10/1/0/a/1/upload/62f9fb08.png'
document.getElementById("prev").src='http://xmages.net/storage/10/1/0/b/d/upload/f5355cac.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://xmages.net/storage/10/1/0/a/1/upload/62f9fb08.png'
document.getElementById("prev").src='http://xmages.net/storage/10/1/0/7/4/upload/fbdcce07.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 =========== --></center>

Отредактировано Deff (Вт, 7 Июн 2011 15:02:38)

+1

48

Deff
Спасибо, теперь все хорошо ))
И еще вопрос: можно ли менять размер картинок (у меня во втором экране)? то есть, чтобы они были не в соотношение ширина*длина, а длина меньше ширины. Где менять эти значения? Просто без них картинка растягивалась в длину.

0

49

сентябрь написал(а):

были не в соотношение ширина*длина, а длина меньше ширины

не понял вопрос - нарисуйте скрин с поправками - в превью или где ? ( вроде ограничены максимальные размеры - а не пропорции, Поставьте ту картинку - что желаете - потом на живом примере спросите

Отредактировано Deff (Вт, 7 Июн 2011 15:14:07)

0

50

Deff
Нет, простите, пока все работает.
Мм..где-то видела, что этот самый скролл-блок сделан под фон. То есть будь то коричные цвета на форуме, то и полоса прокрутки коричневая и не выпуклая. Можно это как-то сделать в этом скрипте? Если нужен скрин-пример, могу показать.

0

51

сентябрь написал(а):

Мм..где-то видела, что этот самый скролл-блок сделан под фон. То есть будь то коричные цвета на форуме, то и полоса прокрутки коричневая и не выпуклая. Можно это как-то сделать в этом скрипте? Если нужен скрин-пример, могу показать.

<div  class="Num1"  style="display: block;"><!--1Конт 1 -->
<div class="ScrolBlock" style="scrollbar-face-color: #A58C6D; scrollbar-highlight-color: #AF9E84; scrollbar-shadow-color: #B19F88;scrollbar-3dlight-color: #C9BCA2;scrollbar-arrow-color: #F2F0C4; scrollbar-track-color: #C9BCA2; scrollbar-darkshadow-color: #6C5840; width:220px!important;padding-left:30px; height:140px;">

Пробуйте сделать добавку синим в каждый "ScrolBlock"

0

52

Deff
стало так:
http://wind.rusff.ru/

0

53

попутный ветер  :glasses: Я не сказал отдельно - а
в уже проставленные теги к Вашему коду просто добавить синее!
А не выдумывать собственные элементы и разрывать тег надвое

<style="width:220px!important;padding-left:30px; height:140px;">

- такого тега в природе(HTML) не существует

Чо трудно найти соотвествующие строки с class="ScrolBlock" style="
и добавить -(*спецом же дал достаточно длинный код
добавить - значит вставить в тоже место после style=" ...
бывший код ранее просто будет идти в след за текущим

Отредактировано Deff (Чт, 9 Июн 2011 12:56:06)

0

54

а можно допустим сделать одну картинку в небольшой таблице чтоб она так же сменивалась на такие же размеры как и предыдущая?

0

55

janyst ничо не понял - приведите пару скриншотов - одно окно и второе

0

56

Deff
Добавила, но не окрасилось.
все правильно вроде
<div class="ScrolBlock" style="scrollbar-face-color: #A58C6D; scrollbar-highlight-color: #AF9E84; scrollbar-shadow-color: #B19F88;scrollbar-3dlight-color: #C9BCA2;scrollbar-arrow-color: #F2F0C4; scrollbar-track-color: #C9BCA2; scrollbar-darkshadow-color: #6C5840;
width:220px!important;padding-left:30px; height:140px;">

0

57

попутный ветер Красицо везде, кроме мозиллы > http://savepic.org/1812001.png
для мозиллы нун делать специальный крипт - этим занимацо не буду - тема оч долгая .. можно пробовать искать в инете - над этой задачей многие бились - удовлетворительных удобных для пользователя результатов -не видел

0

58

Deff
у меня гугл хром, но не красится..

0

59

попутный ветер http://www.javaportal.ru/htmlandcss/scrollbar.html
ИЕ и Опера (*в принципе 50% -60% аудитории

Отредактировано Deff (Чт, 9 Июн 2011 13:36:22)

0

60

Deff
ну ничего, спасибо большое *))

0


Вы здесь » Единый форум поддержки » Архив » Карусельный скрипт: Объединеный Инфо-Блок и Мини-Фотогаллерея