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

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

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

Правила форума

для обязательного прочтения!

Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.

Я админ, не могу зайти!
(забыл / потерял пароль)


Общий FAQ по управлению форумом

FAQ: реклама на форуме

Туториалы по разным функциям ваших форумов

Алфавитный указатель

Интересные решения для форумов

Наши видео-туториалы

Условия пользования сервисом

Ссылки на полезные ресурсы

RSS-каналы


Yahoo! 
MSN 
AOL 
Netvibes 
Bloglines 


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

Перейти вниз

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

Сообщение автор Luz в Июнь 22nd 2010, 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 (Июль 22nd 2011, 12:58), всего редактировалось 2 раз(а)


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

Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript


Luz
Luz
Администратор
Администратор

Женщина

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

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

https://help.forum2x2.ru

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

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


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