Мобильная
версия

Смена изображений

Дата: Категория: JavaScript

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

Скриншот во время работы галереи

А так как в то время я как и любой начинающий программист любил костыли и велосипеды было решено писать самому.
Что же и этого всего вышло?

Начнем с конфигурации всей этой галереи

change_img={
    x:7,
    y:10,
    sort:4,
    delay:{
        st:5000,
        animate:1000,
        cadr:50
    },
    div_id:'slider_photo'
}

Тут все достаточно просто и понятно: 

  • x - количество квадратов по горизонтали
  • y - количество квадратов по вертикали 
  • sort - тип сортировки (о нем позже) 
  • delay - настройки анимации 
  • div_id - ИД дива с изображениями

Как все это будет происходить?

Наш большой div будет заполняться маленькими div в количестве (x*y) у которых мы зададим позиционированный background-image
И уже применяя эффекты к этим маленьким квадратикам (затухание, сползание) мы будем создавать большое и достаточно красивое изменение всей картинки

Первым делом узнаем ширину и высоту наших будущих маленьких divов

r=$('#'+change_img.div_id+' img');
change_img_x=(r[0].height/change_img.x+'').replace(/(.*)\.(.*)/,"$1")-1+1;
change_img_y=(r[0].width/change_img.y+'').replace(/(.*)\.(.*)/,"$1")-1+1;

Теперь заполняем наш главный div маленькими, предварительно указав все необходимые стили.
(я решил избавиться от файла css чтобы скрипт был маленьким и простым в установке)

function create_div_img(){
    var x = 0;
    for(var i = 0; i < change_img.x ; i++) {
        for (var k = 0; k < change_img.y; k++) {
            var d = document.createElement('DIV');
            $(d).css({
                'position': 'absolute',
                'top': change_img_x * i + 'px',
                'left': change_img_y * k + 'px',
                'opacity': 0,
                'z-index': 10,
                'background': 'url("' + src_i[x] + '")',
                'backgroun-position': '-' + (change_img_y * k) + 'px-' + (change_img_x * i) + 'px'
            });
            d.className = 'img_change_s_0';
            document.getElementById('img_change_' + x).appendChild(d);
        }
    }
}
Здесь у нас 2 цикла для создания квадратов с абсолютным позиционированием (top, left), и с заданием background и его позицию

А теперь и сама функция которая создает плавное всплывание всех частей в определенной последовательности.

function div_animate(){
    s=0;
    setTimeout(ferter, change_img.delay.cadr);
    function ferter(){
        if(s >= change_img.x * change_img.y){
            return;
        }
        $(referrer[arr_chagr[s++]]).animate({
            opacity: 1,
            width: change_img_y,
            height: change_img_x
        }, change_img.delay.animate);
        setTimeout(ferter, change_img.delay.cadr);
    }
}

В этой функции по setTimeout запускаем появление очередного квадратика.
От setInterval я отказался по причине того, что большинство бразуеров плохо с ним работают если сворачивать / разворачивать окно, в следствии чего начинает сбиваться вся анимация.

Если вы внимательно смотрели код, то наверняка заметили массив arr_charg который нигде не был объявлен и описан.
Этот массив отвечает за сортировку квадратиков (в нем указан порядок их появления)

В начале, в конфиге, мы указывали тип сортировки (1-5)

function get_array_change(x){
    var reff = new Array();
    for(var i=0;i<x;i++){
        reff[i]=i;
    }
    switch(change_img.sort){
        default:
        case 0: return reff;break;
        case 1: return reff.reverse();break;
        case 2: return array_x();break;
        case 3: return array_x().reverse();break;
        case 4: return array_casc();break;
        case 5: return array_casc().reverse();break;
    }
    function array_x(){
        var arr=new Array();
        var es=0;
        for(var i=0;i<change_img.y;i++)
            for(var k=0;k<change_img.x;k++){
                arr[es++]=reff[i+k*change_img.y];
            }
        return arr;
    }
    function array_casc(){
        var arr=new Array();
        var sr=change_img.y-change_img.x;
        var es=0;
        var rem_x=-1;
        var fer_y=0;
        var rif=-1;
        for(var i=0;i<change_img.x;i++){
            rif++;
            var gren=0;
            rem_x+=rif+1;
            fer_y=rif;
            var keyt=rem_x;miss=0;
            for(var k=0;k<change_img.y;k++){
                if(k){
                    keyt+=fer_y;
                }
                if(fer_y<change_img.x&&!gren){
                    fer_y++;
                } else {
                    miss++
                }
                if(miss>=sr&&k){
                    fer_y--;
                    gren=1;
                }
                arr[keyt] = reff[es++];
            }
        }
        return arr;
    }
}

Эта функция получает массив элементов и сортирует его в соответствии с типом сортировки.

Первые 2 case самые простые - просто массив (всплывание по горизонтали из левого верхнего угла) и развернутый массив (всплывание из правого нижнего угла)

Горизонтальное всплывание начиная с левого верхнего угла

case 3 и 4 почти тоже самое, но всплывание идет по вертикали (функция array_x)

Вертикальное всплывание начиная с правого нижнего угла

И последняя сортировка - это сортировка каскадом.
Она работает только если количество столбцов больше количества строк.

Появление каскадом

Еще кое что по поводу сортировки каскадом — Проблема также заключалась в том, что вначале картинка открывается достаточно быстро, но когда подходит к середине начинает медленнее и медленнее. Ну в принципе правильно — для того чтобы отобразить первую диагональ требуется 1 квадрат, 2 — 2. На диагональ в центре уходит максимальное количество квадратов — 7, что соответственно в 7 раз дольше чем 1 диагональ, в 3.5 раз дольше 2, и.т.д. 
Пришлось стандартную функцию div_animate заменить на

function div_animate(){
    var s=0;
    if(change_img.sort == 4 || change_img.sort == 5){
        change_img.delay.cadr = regular;
        del_rem = change_img.x * change_img.y / 2;
    }
    setTimeout(ferter, change_img.delay.cadr);
    function ferter(){
        if(s >= change_img.x * change_img.y){
            return;
        }
        $(referrer[arr_chagr[s++]]).animate({
            opacity: 1,
            width: change_img_y,
            height: change_img_x
        },change_img.delay.animate);
        if(change_img.sort == 4 || change_img.sort == 5){
            if(s < del_rem){
                setTimeout(ferter,change_img.delay.cadr-=change_img.delay.cadr/25);
            } else{
                setTimeout(ferter,change_img.delay.cadr+=change_img.delay.cadr/25);
            }
        } else{
            setTimeout(ferter,change_img.delay.cadr);
        }
    }
}

Суть такова — до до тех пор пока скрипт не прошел половину квадратиков интервал между открытием их увеличивается на стандартный интервал / 25 (change_img.delay.cadr/25) а после увеличивается на такое же количество мс. В следствии чего почти не заметна разница в скорости между началом и серединой показа изображения

Вот и все.

html код для встраивания на сайт

<div id = "slider_photo">
    <img src = "/template/img/1.jpg" />
    <img src = "/template/img/2.jpg" />
    <img src = "/template/img/3.jpg"/>
</div>

Красивая смена картинок, которую легко встроить в любой сайт а также легко настроить под себя готова. работает даже в IE.

Весь исходный js код можно скачать тут - http://pastebin.com/bPgRJLyc

Посмотреть живой пример - здесь

Теги: #JavaScript, #jQuery, #Галерея, #костыли и велосипеды

Ваша оценка:

Рейтинг: 9.5 (Оценок: 3)

Комментарий:

Copyright © DOC_tr 2015-2017 г. Все права защищены
Яндекс.Метрика
Перейти к мобильной версии