Форум программистов, компьютерный форум, киберфорум
Наши страницы

JavaScript

Войти
Регистрация
Восстановить пароль
 
qwertyyyyyw
2 / 2 / 1
Регистрация: 29.01.2015
Сообщений: 343
#1

Реализация системы пагинации как в ВК - JavaScript

20.04.2015, 19:33. Просмотров 335. Ответов 6
Метки нет (Все метки)

Не подскажите, как реализовать систему пагинации примерно как в ВК. То есть при путешествии по фото в верху страницы указывается год, который я просматриваю, и при пролистывании он меняется.
0
Миниатюры
Реализация системы пагинации как в ВК  
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
20.04.2015, 19:33
Здравствуйте! Я подобрал для вас темы с ответами на вопрос Реализация системы пагинации как в ВК (JavaScript):

Как сохранить местоположение пагинации? - jQuery
На странице есть скрипт который отправляет форму гостевой книги и выводит сообщения без перезагрузки <script> function...

Как добавить счётчик слайдов к дефолтной пагинации? - jQuery
В работе использую bxslider . Возможно ли добавить счетчик к его дефолтной пагинации, как на скрине, что бы не пришлось искать...

Ищу плагин пагинации - jQuery
Всем доброго времени суток. Делаем сайт для одной компании и для этого сайта необходимо организовать навигацию Во-первых, блочная...

Подправить отображение ссылок пагинации на jquery (слайдшоу) - jQuery
http://1.helpdelphi.ru/11/indexx.html внизу есть круглишки как их поднять выше чтобы они отображались на самой картинке, ни как не могу...

Плагин DataTables, куда пропадают строки при пагинации? - jQuery
Отличный плагин, но вот есть проблема с ним, не нахожу оф. доков для того что бы узнать куда пропадают строки при пагинации. Значит...

Как правильно настроить роутер для модуля пагинации в Kohana? - PHP
Доброго времени суток! Установил модуль пагинации для Коханы. Вроде бы ровно. Но не могу нормально настроить роуты. Вот все...

6
arcmag
259 / 255 / 115
Регистрация: 27.06.2014
Сообщений: 665
20.04.2015, 19:45 #2
Ну как я понимаю фотографии лежат на базе данных, и там они просто группируются по дате - году и выводятся в том блоке который соответствует дате создания этой фотографии.

Тут я думаю без ПХП никак...
0
qwertyyyyyw
2 / 2 / 1
Регистрация: 29.01.2015
Сообщений: 343
20.04.2015, 19:56  [ТС] #3
Цитата Сообщение от arcmag Посмотреть сообщение
Ну как я понимаю фотографии лежат на базе данных, и там они просто группируются по дате - году и выводятся в том блоке который соответствует дате создания этой фотографии.

Тут я думаю без ПХП никак...
Нет, вопрос про клиент. Там я вниз страницы пролистну, и год сменится. как на JS подобное реализовать? А по поводу альбомов и php: я делал такую систему, там в принципе не сложно.
0
arcmag
259 / 255 / 115
Регистрация: 27.06.2014
Сообщений: 665
20.04.2015, 20:48 #4
Лучший ответ Сообщение было отмечено автором темы, экспертом или модератором как ответ
Что то на вроде этого?
PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My blablabla</title>
<style>
*{margin:0px; padding:0px; box-sizing:border-box; -moz-box-sizing:border-box;}
body{background:#FF9;}
.block{
    width:900px;
    border:solid 1px #CCCCCC;
    margin:10px auto;
    text-align:center;
    padding-top:40px;
    position:relative;
}
.block .year{
    display:inline-block;
    border:solid 3px #CCCCCC;
    background:#999;
    padding:4px 10px;
    position:absolute;
    color:#FFF;
    top:5px;
    left:40px;
    right:40px;
}
.block .year::after{
    content: ''; 
    position: absolute; 
    top:-2px;
    right: -34px; 
    border: 16px solid transparent; 
    border-left: 15px solid #CCCCCC; 
}
.block .year::before{
    content: ''; 
    position: absolute; 
    top:-2px;
    left: -34px; 
    border: 16px solid transparent; 
    border-right: 15px solid #CCCCCC; 
}
.block .fix{position:fixed;}
.block .photo{
    display:inline-block;
    border:solid 3px #CCCCCC;
    margin:5px;
    width:200px;
    height:200px;
    background:rgba(0,0,0,.3);
    transition:all .3s;
}
.block .photo:hover{
    box-shadow:0px 0px 5px black;
    background:rgba(0,0,0,.1);
}
</style>
<script>
window.addEventListener("load",function(){
    var myPhotoBlocks = document.getElementsByClassName("block");
    for(var i=0; i<myPhotoBlocks.length; i++){ // просто накидываю блоков фоток....
        for(var j=0; j<30; j++){
            var myPhoto = document.createElement("div");
            myPhoto.classList.add("photo");
            myPhoto.innerHTML = "my photo";
            myPhotoBlocks[i].appendChild(myPhoto);
        }
    }
    var myYearBlocks = document.getElementsByClassName("year");
    document.addEventListener("scroll",function(){
        var index;
        for(var i=0; i<myYearBlocks.length; i++){
            var s = window.pageYOffset;
            if(myYearBlocks[i].parentNode.offsetTop<=s) index = i;  
            myYearBlocks[i].classList.remove("fix");
        }
        myYearBlocks[index].classList.add("fix");
    });
});
</script>
</head>
<body>
<div class="block">
    <div class="year">2000</div>
</div>
<div class="block">
    <div class="year">2001</div>
</div>
<div class="block">
    <div class="year">2002</div>
</div>
<div class="block">
    <div class="year">2003</div>
</div>
</body>
</html>
1
qwertyyyyyw
2 / 2 / 1
Регистрация: 29.01.2015
Сообщений: 343
20.04.2015, 21:24  [ТС] #5
Спасибо, Я примерно понял, что вешаем обработчик на событие scroll, но не могли бы вы объяснить смысл этих строк:

Javascript
1
2
3
4
5
6
7
8
9
document.addEventListener("scroll",function(){
        var index;
        for(var i=0; i<myYearBlocks.length; i++){
            var s = window.pageYOffset;//координаты
            if(myYearBlocks[i].parentNode.offsetTop<=s) index = i;   //!!!!!этой
            myYearBlocks[i].classList.remove("fix");   //!!!!этой
        }
        myYearBlocks[index].classList.add("fix");   //!!!этой
    });
0
arcmag
259 / 255 / 115
Регистрация: 27.06.2014
Сообщений: 665
20.04.2015, 21:34 #6
Javascript
1
2
3
4
5
6
7
8
9
10
11
document.addEventListener("scroll",function(){
var index;
for(var i=0; i<myYearBlocks.length; i++){
var s = window.pageYOffset;//координаты
if(myYearBlocks[i].parentNode.offsetTop<=s) index = i; // если прокрутка страницы дошла до нового блока другого года
// запоминаем индекс этого блока
myYearBlocks[i].classList.remove("fix");
// удаляем класс fix со всех блоков года
}
myYearBlocks[index].classList.add("fix"); // добавляем класс fix только к тому блоку индекс которого сейчас у нас записан в переменной
});
1
qwertyyyyyw
2 / 2 / 1
Регистрация: 29.01.2015
Сообщений: 343
20.04.2015, 21:38  [ТС] #7
Цитата Сообщение от arcmag Посмотреть сообщение
Javascript
1
2
3
4
5
6
7
8
9
10
11
document.addEventListener("scroll",function(){
var index;
for(var i=0; i<myYearBlocks.length; i++){
var s = window.pageYOffset;//координаты
if(myYearBlocks[i].parentNode.offsetTop<=s) index = i; // если прокрутка страницы дошла до нового блока другого года
// запоминаем индекс этого блока
myYearBlocks[i].classList.remove("fix");
// удаляем класс fix со всех блоков года
}
myYearBlocks[index].classList.add("fix"); // добавляем класс fix только к тому блоку индекс которого сейчас у нас записан в переменной
});
Спасибо!
0
20.04.2015, 21:38
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
20.04.2015, 21:38
Привет! Вот еще темы с ответами:

Как прописать условие,чтоб не было лишних ссылок пагинации? - PHP
Сделал скрипт пагинации.Но не могу придумать как прописать так чтоб когда заканчивались записи в базе данных то больше ссылок на страниц...

Django 1.10. Как передать в context шаблона номер страницы пагинации при использовании Class Based Views ? - Python
Суть - с шаблона &quot;детальный вид&quot; хочу возвращаться на &quot;свою&quot;(с которой перешел на детальный вид) страницу &quot;список&quot;, а не на первую ...

Реализация системы дипломатии - Visual Basic
Суть вопроса такова: есть движок на VB6.0 надо в нем реализовать систему дипломатии. То есть, есть 3 гос-ва, если человек из гос-ва А...

Реализация системы прав - C# WCF
Здравствуйте! Есть набор методов в контракте. Мне нужно сделать так, чтобы одни методы были доступны всем, а другие методы только...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.