Карусель картинок с увеличением
Добавляет блок с прокруткой изображений, а при наведении курсора на превью картинки всплывает полномасштабное изображение.
Платформа: любая
Код:
Настройка
<div style="width: 310px;">
ширина контейнера картинок
можно добавить свои стили
<span id="prev" onmouseover="inc()" onmouseout="inc1()"><img src="http://s5.uploads.ru/ZTOm4.png" style="cursor:pointer" width="10" height="13" ></span>
картинка прокрутки назад
<div class="block-img">
<span id="d0"></span>
<span id="id0" class="expando" onmouseover = "d0.innerHTML = '<img src='+event.target.src+'>'" onmouseout="d0.innerHTML = ''"></span>
</div>
блоки, куда вставляются картинки из скрипта.
чем их больше - тем больше первоначальный прокручивающийся "ряд" картинок
можно добавить еще блоки или убрать лишние
<span id="next" onmouseover="dec()" onmouseout="dec1()"><img src="http://s8.uploads.ru/qua6s.png" style="cursor:pointer" width="10" height="13"></span>
картинка прокрутки вперед
var arr= [
'<a href="http://адрес" target=_blank title="альтернативный текст"><img src="http://sd.uploads.ru/NR82P.gif" class="expando" border="0" width= "30" height= "30"></a>',
'<a href="http://адрес" target=_blank title="альтернативный текст"><img src="http://sa.uploads.ru/xGaKU.gif" class="expando" border="0" width= "30" height= "30"></a>',
'<a href="http://адрес" target=_blank title="альтернативный текст"><img src="http://sa.uploads.ru/Dfz5y.jpg" class="expando" border="0" width= "30" height= "30"></a>',
'<a href="http://адрес" target=_blank title="альтернативный текст"><img src="http://s8.uploads.ru/SGRMO.gif" class="expando" border="0" width= "30" height= "30"></a>',
'<a href="http://адрес" target=_blank title="альтернативный текст"><img src="http://sf.uploads.ru/yiEgn.gif" class="expando" border="0" width= "30" height= "30"></a>',
'<a href="http://адрес" target=_blank title="альтернативный текст"><img src="http://sd.uploads.ru/NR82P.gif" class="expando" border="0" width= "30" height= "30"></a>',
'<a href="http://адрес" target=_blank title="альтернативный текст"><img src="http://sa.uploads.ru/xGaKU.gif" class="expando" border="0" width= "30" height= "30"></a>',
'<a href="http://адрес" target=_blank title="альтернативный текст"><img src="http://sa.uploads.ru/Dfz5y.jpg" class="expando" border="0" width= "30" height= "30"></a>',
'<a href="http://адрес" target=_blank title="альтернативный текст"><img src="http://s8.uploads.ru/SGRMO.gif" class="expando" border="0" width= "30" height= "30"></a>',
'<a href="http://адрес" target=_blank title="альтернативный текст"><img src="http://sf.uploads.ru/yiEgn.gif" class="expando" border="0" width= "30" height= "30"></a>',
'<a href="http://адрес" target=_blank title="альтернативный текст"><img src="http://sd.uploads.ru/NR82P.gif" class="expando" border="0" width= "30" height= "30"></a>',
'<a href="http://адрес" target=_blank title="альтернативный текст"><img src="http://sa.uploads.ru/xGaKU.gif" class="expando" border="0" width= "30" height= "30"></a>',
'<a href="http://адрес" target=_blank title="альтернативный текст"><img src="http://sa.uploads.ru/Dfz5y.jpg" class="expando" border="0" width= "30" height= "30"></a>',]
Жирным - html код картинки.
На примере картинка также обравлена в ссылку, но можно оставить ее не кликабельной, убрав ссылки и оставив только код картинки:
<img src="http://sd.uploads.ru/NR82P.gif" class="expando" border="0" width= "30" height= "30">
Синим - ширина и высота превью
timeoutdec=setTimeout(dec , 120)
Скорость прокрутки галереи вправо
timeoutinc=setTimeout(inc , 120)
Скорость прокрутки галереи влево
В конце идет стиль.
Можно добавить своих наворотов.
