Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.

Скрипт для виджета "Top 5" прокручивающихся картинок  Fdf10
С нашей помощью вы можете создать форум,
похожий на этот!

Скрипт для виджета "Top 5" прокручивающихся картинок

Перейти вниз

Скрипт для виджета "Top 5" прокручивающихся картинок  Empty Скрипт для виджета "Top 5" прокручивающихся картинок

Сообщение автор Luz в Вт 22 Июн - 12:56

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

Картинки прокручиваются по принципу слайд-шоу, вы можете перейти к любому номеру,щелкнув по цифре 1, 2 или 3, а нажав на картинку, показываемую в виджете, вы переходите по нужной ссылке к нужной странице (например, к странице с изображением в оригинальном размере).

Вот несколько разных идей использования подобного скрипта:

  • Лучшие работы фото-конкурса

  • Самые активные пользователи этой недели (на месте превью - аватары, а под ссылками - профили самых активных пользователей)

  • Интервью с командой нашего форума (на месте превью будут фотографии или аватары ваших админов и модераторов, а под ссылками - страницы с анкетами или биографиями)

  • 5 самых любимых сайтов наших пользователей

  • Лучшие альбомы этого месяца по результатам опроса


...И Т. Д.


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

В этих кодах вы должны будете поставить ваши данные в трех блоках :

1) На место Адрес превью 1, Адрес превью 2 и т.д. поставьте URL картинок, показываемых в виджете (в нашем случае – это маленьки превью стилей Hitskin)
2) На место URL1, URL2 и т.д. поставьте URL страниц, которые открываются при нажатии на превью в виджете (в нашем случае – это страницы Hitskin с информацией о стиле)
3) На место Текст для превью 1, Текст для превью 2 и т.д. поставьте тексты, соответствующие каждой картинке


Если вы хотите изменить цифры Скрипт для виджета "Top 5" прокручивающихся картинок  Index_10, Скрипт для виджета "Top 5" прокручивающихся картинок  Index_11, Скрипт для виджета "Top 5" прокручивающихся картинок  Index_12

подставьте другие картинки в блоке :
Код:
smallImg[0] = 'http://i60.servimg.com/u/f60/12/10/25/45/index_10.gif';
smallImg[1] = 'http://i60.servimg.com/u/f60/12/10/25/45/index_11.gif';
smallImg[2] = 'http://i60.servimg.com/u/f60/12/10/25/45/index_12.gif';
smallImg[3] = 'http://i63.servimg.com/u/f63/11/73/76/86/index_10.gif';
smallImg[4] = 'http://i63.servimg.com/u/f63/11/73/76/86/index_11.gif';


Код для 5 скринов :

Код:
<style type="text/css">
.picshow { z-index:444; position:relative; background-color:#ffffff; width: 100%; height: 135px}
.picshow_main { position: relative; width: 180px; height: 135px}
.picshow_main .imgbig { filter: progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward); width: 180px; height: 135px}
.picshow_change {position: absolute; text-align: left; bottom: 0px; height: 30px; right: 0px; left: 50px;}
.picshow_change img {width:15px; height: 15px}
.picshow_change a { border: 1px solid; display: block; float: left; margin-right: 5px;  -display: inline}
a.axx { border-color: #555}
a.axx:hover {border-color: #000}
a.axx img { filter: alpha(opacity=40); opacity: 0.4; -moz-opacity: 0.4}
a.axx:hover img {filter: alpha(opacity=100); opacity: 1.0; -moz-opacity: 1.0}
a.bxx { border-color: #000}
a.bxx:hover {border-color: #000}
img{
border:0px}
</style>
<script language=javascript>
 var counts = 5;
 img1 = new Image();
 img1.src = 'Адрес превью 1';
 img2 = new Image();
 img2.src = 'Адрес превью 2';
 img3 = new Image();
 img3.src = 'Адрес превью 3';
 img4 = new Image();
 img4.src = 'Адрес превью 4';
 img5 = new Image();
 img5.src = 'Адрес превью 5';
 
var smallImg = new Array();
smallImg[0] = 'http://i60.servimg.com/u/f60/12/10/25/45/index_10.gif';
smallImg[1] = 'http://i60.servimg.com/u/f60/12/10/25/45/index_11.gif';
smallImg[2] = 'http://i60.servimg.com/u/f60/12/10/25/45/index_12.gif';
smallImg[3] = 'http://i63.servimg.com/u/f63/11/73/76/86/index_10.gif';
smallImg[4] = 'http://i63.servimg.com/u/f63/11/73/76/86/index_11.gif';
 
url1 = 'URL1';
url2 = 'URL2';
url3 = 'URL3';
url4 = 'URL4';
url5 = 'URL5';

alt1 = new Image();
alt1.alt = 'Текст для превью 1';
alt2 = new Image();
alt2.alt = 'Текст для превью 2';
alt3 = new Image();
alt3.alt = 'Текст для превью 3';
alt4 = new Image();
alt4.alt = 'Текст для превью 4';
alt5 = new Image();
alt5.alt = 'Текст для превью 5';
var nn = 1;
var key = 0;
function change_img() {
  if (key == 0) {
  key = 1;
  } else if (document.all) {
  document.getElementById("pic").filters[0].Apply();
  document.getElementById("pic").filters[0].Play(duration = 2);
  }
  eval('document.getElementById("pic").src=img' + nn + '.src');
  eval('document.getElementById("url_theme").href=url' + nn);
  eval('document.getElementById("pic").alt=alt' + nn + '.alt');
  if (nn == 1) {
  document.getElementById("url_theme").target = "_blank";
  document.getElementById("url_theme").style.cursor = "pointer";
  } else {
  document.getElementById("url_theme").target = "_blank"
  document.getElementById("url_theme").style.cursor = "pointer"
  }
 
  for ( var i = 1; i <= counts; i++) {
  document.getElementById("xxjdjj" + i).className = 'axx';
  }
  document.getElementById("xxjdjj" + nn).className = 'bxx';
  nn++;
  if (nn > counts) {
  nn = 1;
  }
  tt = setTimeout('change_img()', 7000);
 }
 function changeimg(n) {
  nn = n;
  window.clearInterval(tt);
  change_img();
 }
 function ImageShow() {
  document.write('<div class="picshow_main">');
  document.write('<div><a id="url_theme"><img id="pic" class="imgbig" /></a></div>');
  document.write('<div class="picshow_change">');
  for ( var i = 0; i < counts; i++) {
  document.write('<a href="javascript:changeimg(' + (i + 1)
    + ');" id="xxjdjj' + (i + 1)
    + '" class="axx" target="_self"><img src="' + smallImg[i]
    + '"></a>');
  }
  document.write('</div></div>');
  change_img();
 }
</script>
<script language="javascript" type="text/javascript">
 ImageShow();
</script>

Код для 3-х скринов:

Код:
<style type="text/css">
.picshow { z-index:444; position:relative; background-color:#ffffff; width: 100%; height: 135px}
.picshow_main { position: relative; width: 180px; height: 135px}
.picshow_main .imgbig { filter: progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward); width: 180px; height: 135px}
.picshow_change {position: absolute; text-align: left; bottom: 0px; height: 30px; right: 0px; left: 100px;}
.picshow_change img {width:15px; height: 15px}
.picshow_change a { border: 1px solid; display: block; float: left; margin-right: 5px;  -display: inline}
a.axx { border-color: #555}
a.axx:hover {border-color: #000}
a.axx img { filter: alpha(opacity=40); opacity: 0.4; -moz-opacity: 0.4}
a.axx:hover img {filter: alpha(opacity=100); opacity: 1.0; -moz-opacity: 1.0}
a.bxx { border-color: #000}
a.bxx:hover {border-color: #000}
img{
border:0px}
</style>
<SCRIPT language=javascript>
 var counts = 3;
 img1 = new Image();
 img1.src = 'Адрес превью 1';
 img2 = new Image();
 img2.src = 'Адрес превью 2';
 img3 = new Image();
 img3.src = 'Адрес превью 3';
 
 var smallImg = new Array();
 smallImg[0] = 'http://i60.servimg.com/u/f60/12/10/25/45/index_10.gif';
 smallImg[1] = 'http://i60.servimg.com/u/f60/12/10/25/45/index_11.gif';
 smallImg[2] = 'http://i60.servimg.com/u/f60/12/10/25/45/index_12.gif';
 
 url1 = 'URL1';
 url2 = 'URL2';
 url3 = 'URL3';

 alt1 = new Image();
 alt1.alt = 'Текст для превью 1';
 alt2 = new Image();
 alt2.alt = 'Текст для превью 2';
 alt3 = new Image();
 alt3.alt = 'Текст для превью 3';
 var nn = 1;
 var key = 0;
 function change_img() {
  if (key == 0) {
  key = 1;
  } else if (document.all) {
  document.getElementById("pic").filters[0].Apply();
  document.getElementById("pic").filters[0].Play(duration = 2);
  }
  eval('document.getElementById("pic").src=img' + nn + '.src');
  eval('document.getElementById("url_theme").href=url' + nn);
  eval('document.getElementById("pic").alt=alt' + nn + '.alt');
  if (nn == 1) {
  document.getElementById("url_theme").target = "_blank";
  document.getElementById("url_theme").style.cursor = "pointer";
  } else {
  document.getElementById("url_theme").target = "_blank"
  document.getElementById("url_theme").style.cursor = "pointer"
  }
 
  for ( var i = 1; i <= counts; i++) {
  document.getElementById("xxjdjj" + i).className = 'axx';
  }
  document.getElementById("xxjdjj" + nn).className = 'bxx';
  nn++;
  if (nn > counts) {
  nn = 1;
  }
  tt = setTimeout('change_img()', 7000);
 }
 function changeimg(n) {
  nn = n;
  window.clearInterval(tt);
  change_img();
 }
 function ImageShow() {
  document.write('<div class="picshow_main">');
  document.write('<div><a id="url_theme"><img id="pic" class="imgbig" /></a></div>');
  document.write('<div class="picshow_change">');
  for ( var i = 0; i < counts; i++) {
  document.write('<a href="javascript:changeimg(' + (i + 1)
    + ');" id="xxjdjj' + (i + 1)
    + '" class="axx" target="_self"><img src="' + smallImg[i]
    + '"></a>');
  }
  document.write('</div></div>');
  change_img();
 }
</SCRIPT>
<SCRIPT language="javascript" type="text/javascript">
 ImageShow();
</SCRIPT>

Скрипт для виджета "Top 5" прокручивающихся картинок  Info_213 Обратите внимание : чтобы изменить количество показываемых картинок, надо не только задать нужное количество превью, URL и текстов в 3 блоках, на которые мы указали выше, но также подставить нужное число для переменной var counts :

для 3-х лучших картинок:
Код:
var counts = 3


для 5-ти лучших картинок:
Код:
var counts = 5
и т.д


Последний раз редактировалось: Luz (Пт 22 Июл - 12:58), всего редактировалось 2 раз(а)
Luz
Luz
Администратор
Администратор

Женщина
Сообщения : 16174
Возраст : 45
Регистрация : 2005-03-01
Благодарности : 2452

Без предупреждений

http://help.forum2x2.ru

Вернуться к началу Перейти вниз

Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения