Сегодня мы хотим рассказать про наш скрипт, который позволяет « пролистывать » картинку внутри другой картинки.
Есть и другой подход, кроме скрипта. Реализация «пролистывания» картинки возможна с помощью обычного CSS — прокрутка большего блока внутри меньшего. Но есть неприятное в такой реализации.
Пример ситуации, когда использование такого подхода неудобно: пользователь заходит на страницу и, возможно, он хочет быстро просмотреть её от начала до конца. Если, в процессе прокрутки страницы, курсор мыши попадает на «монитор» с изображением, картинка в «мониторе» приходит в движение и пользователю приходится пролистывать её целиком, чтобы продолжить просматривать страницу.
Исходя из этой особенности, мы решили отказаться от этого подхода.
И в результате родился скрипт.
Начнем с верстки.
<div class="WorkImgs Interactive">
<div class="monitor">
<a id="prev" data-block="0" class="arrow left-arrow" href="#"> </a>
<a id="next" data-block="0" class="arrow right-arrow" href="#"> </a>
<div id="monitorcontein" class="monitorcontein">
<div class="maket" data-height="1719" id="inmonitor_0"></div>
<div class="maket" data-height="2108" id="inmonitor_1"></div>
</div>
</div>
</div>
Теперь добавим css.
.Interactive:before {
background: url("potyani.png") no-repeat;
content: "";
display: block;
height: 70px;
width: 245px;
}
.WorkImgs {
text-align: center;
width: 1206px;
}
.monitorcontein {
margin: 35px auto 0;
width: 865px;
}
.monitor {
height: 720px;
background-size: auto;
margin-top: 0.5em;
background: url("monitor_bg.png") no-repeat center;
background-size: auto auto;
padding: 1px;
}
#inmonitor_0 {
background: url('portfolio_avaio-media_01.jpg') no-repeat scroll 0 0 / cover transparent;
cursor: all-scroll;
margin: 0 auto;
width: 100;
height: 493px;
position: relative;
display: block;
}
#inmonitor_1 {
background: url('portfolio_avaio-media_02.jpg') no-repeat scroll 0 0 / cover transparent;
cursor: all-scroll;
margin: 0 auto;
width: 100%;
height: 493px;
position: relative;
display: none;
}
.arrow.left-arrow {
background: url("navigation_prew.png") no-repeat scroll center, rgba(255,255,255,.3);
float: left;
display: block;
position: relative;
z-index: 100;
width: 21px;
height: 43px;
top: 15.5em;
}
.arrow.right-arrow {
background: url("navigation_next.png") no-repeat scroll center, rgba(255,255,255,.3);
float: right;
display: block;
position: relative;
z-index: 100;
width: 21px;
height: 43px;
top: 15.5em;
}
И подключим скрипты.
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="portfolio_scroll.js" type="text/javascript"></script>
<script src="portfolios.js" type="text/javascript"></script>
Теперь об особенностях.
Данные css свойства адекватно работают при минимальной ширине .WorkImgs 986px. Если разрешение меньше, необходимо немного изменить css.
.monitor — это класс с картинкой монитора, внутри которой происходит прокрутка
#inmonitor_0, #inmonitor_1 - это картинки, которые прокручиваем (перетаскиваем) с помощью мыши. Этих картинок может быть сколько угодно. Если одна, то стрелки по бокам пропадают. Если более, то стрелки выполняют «карусель». Очень важным является свойство «data-height». В это свойство необходимо записать высоту картинки в пикселях, при ширине 866px . Это свойство можно подобрать экспериментальным способом или открыть картинку в графическом редакторе, сделать ресайз изображения, с сохранением пропорций, до ширины 866px.
Вот, аверное, и всё. Будем рады, если кому-то пригодиться.