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

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

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

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

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

...И Т. Д.


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

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

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


Если вы хотите изменить цифры , ,

подставьте другие картинки в блоке :

Код:

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';

Код:

<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>

Код:

<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>


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

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

Код:

var counts = 3

для 5-ти лучших картинок:

Код:

var counts = 5

и т.д