Карусель картинок с увеличением
Добавляет блок с прокруткой изображений, а при наведении курсора на превью картинки всплывает полномасштабное изображение.
https://forumupload.ru/uploads/0007/e3/f7/6822/961012.jpg

Платформа: любая

Код:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Настройка

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

Скорость прокрутки галереи влево

В конце идет стиль.
Можно добавить своих наворотов.

Подпись автора

ForumD.ru очень нужны подписчики и социальных сетях и на YouTube!

https://forumstatic.ru/files/0007/e3/f7/42799.png   https://forumstatic.ru/files/0007/e3/f7/10336.png   https://forumstatic.ru/files/0007/e3/f7/85578.png

С увеличением количество подписчиков, нам откроются новые возможности и функционал.
Если хочешь поддержать наш проект - просто подпишись! :)