Адаптивная фотогалерея с адаптивной сеткой бустрапа
[Создано 11 июля 2015]
Результат http://galleryua.com/apadtiv-gallery/4-foto-name-gallery/index.php
http://galleryua.com/photo/dostopr_2-adaptiv-vkontakte.php?E=49.94722&N=...
http://galleryua.com/photo/dostopr_2-adaptiv-vkontakte.php?E=49.94722&N=...
http://galleryua.com/photo/dostopr_2-adaptiv-vkontakte-ALL.php?start=0&c...
http://hram-ua.com/apadtiv-gallery/3-foto-name/index-2.php
С вертикальными фото видим проблему:
Но теперь изменим скрипт
<script>
var $grid = $('.grid').imagesLoaded( function() {
// init Masonry after all images have loaded
$(".grid .grid-item img").each(function(){
if($(this).width()>$(this).height()){
$(this).css('height','100%');
}else{
$(this).css('width','100%');
}
console.log();
});
$grid.masonry({
columnWidth: '.grid-sizer',
//gutter: '.gutter-sizer',
itemSelector: '.grid-item',
percentPosition: true
});
});
</script>
на
<script>
var $grid = $('.grid').imagesLoaded( function() {
// init Masonry after all images have loaded
$(".grid .grid-item img").each(function(){
$(this).css('width','100%');
});
$grid.masonry({
columnWidth: '.grid-sizer',
//gutter: '.gutter-sizer',
itemSelector: '.grid-item',
percentPosition: true
});
});
$(document).ready(function() {
$(".grid-item").fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'inside'
},
thumbs : {
width : 50,
height : 50
}
}
});
});
</script>
Получаем такой вариант:
Можно не ограничивать по высоте.Для этого изменяем css:
.grid *{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
}
.grid{
display: block;
width: 90%;
max-width: 1024px;
margin: 0 auto;
}
.grid-item {
float: left;
overflow: hidden;
padding: 5px;
position: relative;
cursor: pointer;
}
.grid-item .lable{
position: absolute;
bottom: 0;
max-height: 30px;
width: 100%;
padding: 5px 5px 0 5px;
margin-left: -5px;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.grid-item .lable-container{
background-color: rgba(0,0,0,0.65);
padding: 5px;
color: #fff;
}
.grid-item:hover .lable{
max-height: 300px;
}
.grid-item .lable .lable-container>*{
margin-top: 0;
}
.gutter-sizer{
width: 16.66666667%;
}
.grid-item *{
max-width: 100%;
}
.grid-sizer,
.grid-item{ width: 16.66666667%; }
.grid-item.size1{width: 50%;}
.grid-item.size2{width: 16.66666667%;}
.grid-item.size3{width: 33.33333333%;}
@media (max-width: 992px) {
.grid-item.size1{width: 66.66666667%;}
.grid-item.size2{width: 33.33333333%;}
.grid-item.size3{width: 66.66666667%;}
}
@media (max-width: 768px) {
.grid-item.size1{width: 100%;}
.grid-item.size2{width: 50%;}
.grid-item.size3{width: 100%;}
}
Но все же это не самый лучший вариант:
.grid *{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
}
.grid{
display: block;
width: 90%;
max-width: 1024px;
margin: 0 auto;
}
.grid-item {
float: left;
overflow: hidden;
padding: 5px;
position: relative;
cursor: pointer;
}
.grid-item .lable{
position: absolute;
bottom: 0;
max-height: 30px;
width: 100%;
padding: 5px 5px 0 5px;
margin-left: -5px;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.grid-item .lable-container{
background-color: rgba(0,0,0,0.65);
padding: 5px;
color: #fff;
}
.grid-item:hover .lable{
max-height: 300px;
}
.grid-item .lable .lable-container>*{
margin-top: 0;
}
.gutter-sizer{
width: 16.66666667%;
}
.grid-item *{
max-width: 100%;
}
.grid-sizer,
.grid-item{ width: 16.66666667%; }
.grid-item.size1{width: 50%; height: 300px}
.grid-item.size2{width: 16.66666667%; height: 100px}
.grid-item.size3{width: 33.33333333%; height: 200px}
@media (max-width: 992px) {
.grid-item.size1{width: 66.66666667%; height: 320px}
.grid-item.size2{width: 33.33333333%; height: 160px}
.grid-item.size3{width: 66.66666667%; height: 320px}
}
@media (max-width: 768px) {
.grid-item.size1{width: 100%; height: 350px}
.grid-item.size2{width: 50%; height: 200px}
.grid-item.size3{width: 100%; height: 250px}
}
http://galleryua.com/photo/dostopr_2-adaptiv-vkontakte-ALL.php?start=0&c...
Добавляем в строку
Выравниваем ширину и высоту:
<script>
var $grid = $('.grid').imagesLoaded( function() {
// init Masonry after all images have loaded
$(".grid .grid-item img").each(function(){
var el_height = $(this).height();
var el_width = $(this).width();
var p_el_height = parseInt($(this).parents('.itm_inner').height());
var p_el_width = parseInt($(this).parents('.itm_inner').width());
if(el_height>el_width){
$(this).css('height','100%');
}else{
$(this).css('width','100%');
}
if(el_height>p_el_height){
$(this).css('marginTop','-'+((el_height-p_el_height)/2)+'px');
}
if(el_width>p_el_width){
console.log(el_width+'-'+p_el_width);
$(this).css('marginLeft','-'+((el_width-p_el_width)/2)+'px');
}
});
$grid.masonry({
columnWidth: '.grid-sizer',
//gutter: '.gutter-sizer',
itemSelector: '.grid-item',
percentPosition: true
});
});
$(document).ready(function() {
$(".grid-item").fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'inside'
},
thumbs : {
width : 50,
height : 50
}
}
});
});
</script>
Панорамные фото можно растянуть по высоте:
Для этого в файле /var/www/gallery/data/www/galleryua.com/photo/dostopr_2-adaptiv-vkontakte.php
Вставляем для <img>: style="width: 100%;min-height: 100%;"
http://galleryua.com/photo/dostopr_2-adaptiv-vkontakte-ALL.php?start=100...
http://galleryua.com/photo/dostopr_2-adaptiv-vkontakte-ALL-2.php?start=1...
Центрирование горизонтальных панорамных фото:
<script>
var $grid = $('.grid').imagesLoaded( function() {
// init Masonry after all images have loaded
$(".grid .grid-item img").each(function(){
var el_height = $(this).height();
var el_width = $(this).width();
if(el_height>el_width){
$(this).css('width','100%');
}
if(el_heightn_el_height){
$(this).css('marginTop','-'+((n_el_height-n_el_height)/2)+'px');
}
if(n_el_width>p_el_width){
//console.log(n_el_width+'-'+n_el_height+"---"+p_el_width+'-'+p_el_height);
$(this).css('marginLeft','-'+((n_el_width-p_el_width)/2)+'px');
}
});
$grid.masonry({
columnWidth: '.grid-sizer',
//gutter: '.gutter-sizer',
itemSelector: '.grid-item',
percentPosition: true
});
});
$(document).ready(function() {
$(".grid-item").fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'inside'
},
thumbs : {
width : 50,
height : 50
}
}
});
});
</script>
Полное центрирование:
Теперь заменяем css:
<link href="http://galleryua.com/apadtiv-gallery/6-foto-name-podgonka-zoom/css/custome.css" rel="stylesheet">
.grid-item img{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
этим параметром можете менять степень увеличения
Получаем небольшой зум и рамки уходят (как например белая рамка на фото).
[23:17:41] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: Прикольно вышло =)
Убираем блоки с битой картинкой:
<script>
$(document).ready(function(){
$('.grid-item img').bind('error', function() {
$(this).parents('.grid-item').remove();
});
});
var $grid = $('.grid').imagesLoaded( function() {
// init Masonry after all images have loaded
$(".grid .grid-item img").each(function(){
var el_height = $(this).height();
var el_width = $(this).width();
if(el_height>el_width){
$(this).css('width','100%');
}
if(el_heightp_el_height){
$(this).css('marginTop','-'+((n_el_height-p_el_height)/2)+'px');
}
if(n_el_width>p_el_width){
//console.log(n_el_width+'-'+n_el_height+"---"+p_el_width+'-'+p_el_height);
$(this).css('marginLeft','-'+((n_el_width-p_el_width)/2)+'px');
}
});
$grid.masonry({
columnWidth: '.grid-sizer',
//gutter: '.gutter-sizer',
itemSelector: '.grid-item',
percentPosition: true
});
});
$(document).ready(function() {
$(".grid-item").fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'inside'
},
thumbs : {
width : 50,
height : 50
}
}
});
});
</script>
[доработка 23 июля 2015]
Еще одна версия с другим слайдером:
http://galleryua.com/dvijok-my-tourizm/lib/photopanoramio-adaptive-VER-2...
3$ weblancer верстка Ильдар Гильфанов (Rabinzon) Ildar Gilfanov: hideBarsDelay : 0, если уберете эту строчку, то стрелочки будет пропадать как раньше.
ПЕРЕПИСКА с ФРИЛАНСЕРОМ (weblancer ВЕРСТКА Гора Сергей (DoctorSpirit)):
[11.07.2015 9:54:00] DoctorSpirit: Здравствуйте, andrush85-skype! Я хочу внести Вас в свой список контактов в Skype. http://www.weblancer.net/projects/698634.html
[11.07.2015 9:55:08] *** andrush85-skype відправив контактні дані weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info. ***
[11.07.2015 9:56:42] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: Здравствуйте
[11.07.2015 9:56:59] andrush85-skype: Сергей, здравствуйте!
[11.07.2015 9:58:03] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: скажите вы написали что размер картинок за ранее не известен а каким размером их выводить в таком случаи?
[11.07.2015 9:59:54] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: В вашем примере четко видно 3 типа размеров для отображения в них можно вписывать картинки любого размера
[11.07.2015 10:01:44] andrush85-skype: С обрезкой лишних полей? Или с полосками?
[11.07.2015 10:03:34] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: Вот к примеру вариант Делаем 3 заранее предусмотренных блоков по размеру(как в макете) в которые вписываем картинки по ширине а высоту оставляем динамически
[11.07.2015 10:08:36] andrush85-skype: Нужно смотреть как сделано в ВК http://vk.com/pouacom
[11.07.2015 10:09:04] andrush85-skype: https://yadi.sk/i/YgPwuvKvhoNn3
[11.07.2015 10:09:48] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: Вижу точно как я и сказал есть заранее предусмотренные размеры отображения
[11.07.2015 10:10:35] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: у них первая картинка всегда большая а остальные одного размера заполняют пустое пространство
[11.07.2015 10:40:55] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: Вот к примеру http://ion-studio.info/projGalery/
[11.07.2015 10:45:28] andrush85-skype: https://yadi.sk/i/7XbFJeN4hoPfn правильно я понял?
[11.07.2015 10:46:08] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: да это пример сетки которая будет использоваться
[11.07.2015 10:50:27] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: ?
[11.07.2015 10:51:58] andrush85-skype: Хорошо. Что означает сетка?
[11.07.2015 10:52:16] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: в ней будут размешаться картинки и она респонзив
[11.07.2015 10:52:21] andrush85-skype: И для чего используются?
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
[11.07.2015 10:52:47] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: первый для построения второй для проверки загружены ли картинки
[11.07.2015 10:53:24] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: чтобы не было такого что картинки еще не загрузились а сетка уже отобразилась
[11.07.2015 10:56:13] andrush85-skype: Хорошо, это какая-то стандартная методика?
[11.07.2015 10:56:41] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: В смысли стандартная?
[11.07.2015 10:57:23] andrush85-skype: Ну в смысле это ведь не Ваши библиотеки? Из открытого доступа?
[11.07.2015 10:57:43] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: конечно они бесплатны
[11.07.2015 10:59:44] andrush85-skype: ок
[11.07.2015 11:02:27] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: давайте за основу возьмем 4 стандартных расширения кав http://getbootstrap.com/css/#grid
И при них скажите какие размеры колонок предусмотреть
[11.07.2015 11:03:30] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: либо могу подключить бутстраповскую сетку на 12 колонок
[11.07.2015 11:04:48] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: Скажите когда вам это нужно готовое?
[11.07.2015 11:18:25] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: Смотрите я сейчас буду ехать в другой город в онлайне через час 4 буду! Если вас устраивает данная реализация я подготовлю окончательный вариант!
[11.07.2015 11:19:10] andrush85-skype: Сегодня сможете сделать?
[11.07.2015 11:19:50] andrush85-skype: Я не сильно понял текхнические детали, но если будет как в ВК и на моем макете,то устроит.
[11.07.2015 11:20:51] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: Ок я тогда сетку настрою уже с картинками чтобы вы наглядно видели и респонз тоже
[11.07.2015 11:22:13] andrush85-skype: ок
[11.07.2015 16:01:34] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: вы здесь?
[11.07.2015 16:01:44] andrush85-skype: да
[11.07.2015 16:02:04] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: http://ion-studio.info/projGalery/ Посмотрите
[11.07.2015 16:02:52] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: Я с делал стандартную сетку бутстрапа на 12 колонок
[11.07.2015 16:03:34] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: с ней ознакомиться можно http://getbootstrap.com/css/#grid-example-basic
[11.07.2015 16:04:38] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: это значит вы можете каждый элемент сделать каким вам удобней размером под 4 страндартных расширения
[11.07.2015 16:05:56] andrush85-skype: Но я врядли буду переделывать..
Вы можете сразу сделать как в моем примере?
Чтобы не было разных размеров https://yadi.sk/i/0ykb2P7UhobJx
[11.07.2015 16:08:57] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: да ок я как пример привел того что можно сделать другим размером любым
[11.07.2015 17:03:51] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: Посмотрите сейчас сделал как у вас в макете
[11.07.2015 17:11:59] andrush85-skype: ок, можете сузить https://yadi.sk/i/K4O6HZjUhodj6 ? чтобы пропорции оставалси как в макете на широком мониторе..
[11.07.2015 17:14:13] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: какая ширена макета? и это просто размер верхнего блока
[11.07.2015 17:15:16] andrush85-skype: Ширину я не знаю. Но пропорции сейчас разные. Возможно max-width 1200 можно поставить.
[11.07.2015 17:15:28] andrush85-skype: Согласны?
[11.07.2015 17:17:08] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: сделал для 1200 размер контента 1024px
[11.07.2015 17:18:28] andrush85-skype: Отлично, осталось названия вывести как в ВК, сможете на больших фото?
[11.07.2015 17:19:21] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: только полоску или чтобы она и выезжала?
[11.07.2015 17:19:55] andrush85-skype: Так как в ВК, чтобы красиво было.
[11.07.2015 17:38:49] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: посмотрите так?
[11.07.2015 17:46:05] andrush85-skype: Отлично! Осталось навесить какую-то листалку.
[11.07.2015 17:46:25] andrush85-skype: Что можно навесить аккуратненькое?
[11.07.2015 17:47:08] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: В каком смысли листалку?
[11.07.2015 17:48:08] andrush85-skype: Ну при клике на фото, чтобы оно увеличивалось..
[11.07.2015 17:48:29] *** andrush85-skype відправив galery.rar galery.rar ***
[11.07.2015 17:48:32] andrush85-skype: Может такую?
[11.07.2015 17:51:22] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: Можете ссылку на документацию дать
[11.07.2015 17:52:18] andrush85-skype: К сожалению у меня нет. Єто на локальном компе нашед. И какая-то она кривая и слишком сложная реализация. Причем много кнопок не рабочих. Может есть что-то попроще красивое?
[11.07.2015 17:52:46] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: ок что-то найду
[11.07.2015 19:26:30] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: Посмотрите так?
[11.07.2015 19:28:11] andrush85-skype: Ага, так очень хорошо, только можно сделать стрелочку вперед назад? Или это сложно?
[11.07.2015 19:28:25] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: сек
[11.07.2015 19:28:27] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: это парамрт
[11.07.2015 19:29:46] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: Добавил
[11.07.2015 19:42:38] andrush85-skype: Сейчас отлично!
[11.07.2015 19:42:45] andrush85-skype: Есть проблема только с вертикальными фото.
[11.07.2015 19:43:10] andrush85-skype: Смотрите, если я меняю фото на те, которые есть у меня в БД по порядку, то получаю такую картинку http://hram-ua.com/dostopr_2-adaptiv-vkontakte.php?E=49.94722&N=24.07417...
[11.07.2015 19:43:26] andrush85-skype: Нужно что-то придумат с вертикальными фото, чтобы небыло белых полосок.
[11.07.2015 19:44:11] andrush85-skype: Либо для вертикальных фото делать другое расположение?
[11.07.2015 19:45:14] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit)
ion-studio.info: if($(this).width()>$(this).height()){
$(this).css('width','115%');
}else{
$(this).css('height','115%');
}
измените на
if($(this).width()>$(this).height()){
$(this).css('height','100%');
}else{
$(this).css('width','100%');
}
[11.07.2015 19:46:31] andrush85-skype: Изменил
[11.07.2015 19:46:35] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: вижу
[11.07.2015 19:47:13] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit)
ion-studio.info: тогда предлагаю не фиксировать высоту
но будут появляться маленькие пробелы
[11.07.2015 19:47:37] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: вы когда выводите фото у вас никакого обработчика нет?
[11.07.2015 19:49:05] andrush85-skype: Обработчика, что Вы имеете в виду?
[11.07.2015 19:50:12] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: ну в смысли функция которая отдает картинку и через которую можно манипулировать соотношением сторон
[11.07.2015 19:51:08] andrush85-skype: Нет обработчика нет. Даже данных об соотношении сторон в БД нет.
[11.07.2015 19:51:27] andrush85-skype: Можно конечно построить и занети в БД
[11.07.2015 19:52:03] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: а если немного обрезать ваши фото?
[11.07.2015 19:52:15] andrush85-skype: Можно попробовать. А если просто растянуть по ширине? Что нужно сделать, чтобы проверить?
[11.07.2015 19:52:50] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: консолью javascript умеете пользоваться
[11.07.2015 19:53:25] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: ?
[11.07.2015 19:53:26] andrush85-skype: да
[11.07.2015 19:53:34] andrush85-skype: если скажете, что нужно сделать
[11.07.2015 19:53:35] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info:
$(".grid .grid-item img").each(function(){
$(this).css('width','auto');
$(this).css('height','auto');
$(this).css('minWidth','100%');
});
такое запустите
[11.07.2015 19:55:09] andrush85-skype: Ага, стало лучше
[11.07.2015 19:55:10] andrush85-skype: https://yadi.sk/i/a-44GTqEhojv4
[11.07.2015 19:55:22] andrush85-skype: Теперь еще нужно добиться, чтобі не налазило на текст сверху.
[11.07.2015 19:55:25] andrush85-skype: Можно?
[11.07.2015 19:55:30] andrush85-skype: (см. скрин)
[11.07.2015 19:58:46] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: так вы текст в grid не вставляйте
[11.07.2015 19:59:22] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: вне его
[11.07.2015 20:00:19] andrush85-skype: ок, сделал
[11.07.2015 20:00:40] andrush85-skype: И что нужно изменить в коде, чтобы было так, как я сделал в консоли?
[11.07.2015 20:01:07] andrush85-skype: И еще можно выровнять отображаемую часть фото по центру, а не верхний левый угол?
[11.07.2015 20:01:44] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: скопируйте скрипт заново
[11.07.2015 20:02:29 | Змінено в 20:02:38] andrush85-skype: Достаточно без css?
[11.07.2015 20:02:40] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: да
[11.07.2015 20:02:50] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: только js который на главной
[11.07.2015 20:02:58] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info:
<script>
var $grid = $('.grid').imagesLoaded( function() {
// init Masonry after all images have loaded
$(".grid .grid-item img").each(function(){
$(this).css('width','100%');
});
$grid.masonry({
columnWidth: '.grid-sizer',
//gutter: '.gutter-sizer',
itemSelector: '.grid-item',
percentPosition: true
});
});
$(document).ready(function() {
$(".grid-item").fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'inside'
},
thumbs : {
width : 50,
height : 50
}
}
});
});
</script>
[11.07.2015 20:07:44] andrush85-skype: Можно еще центрировать? https://yadi.sk/i/dAOhQt_ehokRU
[11.07.2015 20:07:50] andrush85-skype: Возможно так будет лучше
[11.07.2015 20:11:51] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: Давайте может не будет ограничивать их высоту так будет лучше
[11.07.2015 20:12:21] andrush85-skype: Это как будет? Можете скрин скинуть?
[11.07.2015 20:12:51] *** weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info відправив custome.css ***
[11.07.2015 20:13:04] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: этот css попробуйте использовать
[11.07.2015 20:15:17] andrush85-skype: А что Вы в css изменили?
[11.07.2015 20:15:45] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: убрал парамерт высоты
[11.07.2015 20:17:25] andrush85-skype: Так с маленькими фото лучше, но некрасиво смотряться большие фото https://yadi.sk/i/3QpM3lemhokjA
[11.07.2015 20:17:35] andrush85-skype: Они рвут весь макет.
[11.07.2015 20:18:00] andrush85-skype: Давайте вернем как было, но ценрируем фото. Можно так?
[11.07.2015 20:18:09] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: да
[11.07.2015 20:19:28] *** weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info відправив custome.css ***
[11.07.2015 20:19:35] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: старый css
[11.07.2015 20:20:43] andrush85-skype: это старый без центрирвания?
[11.07.2015 20:20:48] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: lf
[11.07.2015 20:20:49] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: да
[11.07.2015 20:21:01] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: мин скрипт сделаю
[11.07.2015 20:39:11] andrush85-skype: ок
[11.07.2015 20:39:25] andrush85-skype: и еще можно растянуть панорамные снимки по высоте?
[11.07.2015 20:39:25] andrush85-skype: https://yadi.sk/i/pC4Vk8k9homhd
[11.07.2015 20:40:44] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: это скрипт же поменяли сейчас делаю
[11.07.2015 20:41:04] andrush85-skype: ок
[11.07.2015 20:59:48] andrush85-skype: В остальном проблем не вижу, вот взял для других фото, где меньше вертикальных http://galleryua.com/photo/dostopr_2-adaptiv-vkontakte-ALL.php
[11.07.2015 21:24:03] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: Сделал
Теперь скрипт проверяет сочетание сторон выравнивает по большей стороне и центрирует изображение
[11.07.2015 21:24:25] andrush85-skype: ок, нужно скопировать скрипт?
[11.07.2015 21:24:35] andrush85-skype: внизу html?
[11.07.2015 21:25:07] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: да + css и добавил 1 блок в структуру чтобы было как выравнивать!
[11.07.2015 21:25:22] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info:
<script>
var $grid = $('.grid').imagesLoaded( function() {
// init Masonry after all images have loaded
$(".grid .grid-item img").each(function(){
var el_height = $(this).height();
var el_width = $(this).width();
var p_el_height = parseInt($(this).parents('.itm_inner').height());
var p_el_width = parseInt($(this).parents('.itm_inner').width());
if(el_height>el_width){
$(this).css('height','100%');
}else{
$(this).css('width','100%');
}
if(el_height>p_el_height){
$(this).css('marginTop','-'+((el_height-p_el_height)/2)+'px');
}
if(el_width>p_el_width){
console.log(el_width+'-'+p_el_width);
$(this).css('marginLeft','-'+((el_width-p_el_width)/2)+'px');
}
});
$grid.masonry({
columnWidth: '.grid-sizer',
//gutter: '.gutter-sizer',
itemSelector: '.grid-item',
percentPosition: true
});
});
$(document).ready(function() {
$(".grid-item").fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'inside'
},
thumbs : {
width : 50,
height : 50
}
}
});
});
</script>
[11.07.2015 21:25:31] *** weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info відправив custome.css ***
[11.07.2015 21:26:59] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: вот такой структурой должны быть элименты
<div class="grid-item size1" rel="gallery1" data-fancybox-group="gallery1" href="img/3.jpg" title="Заголовок">
<div class="itm_inner">
<img src="img/3.jpg" alt="1"/>
<div class="lable">
<div class="lable-container">
<h3>Заголовок</h3>
<p>Просто описание текста</p>
</div>
</div>
</div>
</div>
Без <div class="lable"> Если вам не нужно иконка с надписью
[11.07.2015 21:32:57] andrush85-skype: http://galleryua.com/photo/dostopr_2-adaptiv-vkontakte-ALL.php
[11.07.2015 21:33:01] andrush85-skype: Что-то я не перенес?
[11.07.2015 21:35:21] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: у вас полная каша на странице скрипты выводиться 10 рас картинки выводиться в таблицах
[11.07.2015 21:36:29] andrush85-skype: вот одна http://galleryua.com/photo/dostopr_2-adaptiv-vkontakte.php?E=49.94722&N=...
[11.07.2015 21:38:22] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: ваша структура 1ного элемента
<tr><td valign="center"><div class="grid-item size1" style="position: absolute; left: 0%; top: 0px;"><a href="/places/1001954-Nikolaevskij-kostel"><img src="http://mw2.google.com/mw-panoramio/photos/medium/60952944.jpg" alt="Николаевский костел" title="1" style="width: 100%;"></a><div class="lable"><div class="lable-container"><h3>Николаевский костел</h3><p></p></div></div></div> </td></tr>
[11.07.2015 21:38:53] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: вот такая должна быть
<div class="grid-item size1" rel="gallery1" data-fancybox-group="gallery1" href="img/6.jpg" title="Заголовок">
<div class="itm_inner">
<img src="img/6.jpg" alt="1"/>
<div class="lable">
<div class="lable-container">
<h3>Заголовок</h3>
<p>Просто описание текста</p>
</div>
</div>
</div>
</div>
[11.07.2015 21:40:51] andrush85-skype: Без надписи вот так как сейчас?
[11.07.2015 21:40:51] andrush85-skype:
<div class="grid-item size1" rel="gallery1" data-fancybox-group="gallery1" href="http://mw2.google.com/mw-panoramio/photos/medium/60952944.jpg" title=""> <div class="itm_inner"> <img src="http://mw2.google.com/mw-panoramio/photos/medium/60952944.jpg" alt="1"/> </div> </div>
[11.07.2015 21:41:06] andrush85-skype: http://galleryua.com/photo/dostopr_2-adaptiv-vkontakte.php?E=49.94722&N=...
[11.07.2015 21:43:47] andrush85-skype: Вернул как біло и сделал копию, чтобі отладить на ней и не потерять что біло - http://galleryua.com/photo/dostopr_2-adaptiv-vkontakte-2.php?E=49.94722&...
[11.07.2015 21:52:17] andrush85-skype: И еще надпись немножко вілазит за пределы фото https://yadi.sk/i/jcf36NZRhopfa
[11.07.2015 21:53:08] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: надпись вылазит потому что вы забыли <div class="itm_inner">
[11.07.2015 22:21:00] andrush85-skype: Я предлагаю доделать в понеделиник, хорошо? Либо остановиться на этом варианте http://galleryua.com/photo/dostopr_2-adaptiv-vkontakte-ALL.php?start=100...
Я просто сделал для <img>: style="width: 100%;min-height: 100%;"
[11.07.2015 22:22:18] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: подождите 10 мин почти закончил
[11.07.2015 22:22:24] andrush85-skype: Панорамы, которые астягиваются https://yadi.sk/i/OGWR2-81hor54 вроде не смотрятся сильно криво.
[11.07.2015 22:22:25] andrush85-skype: Ок
[11.07.2015 22:22:41] andrush85-skype: Я тогда отойду минут на 15.
[11.07.2015 22:22:46] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: ок
[11.07.2015 22:45:58] andrush85-skype: готово?
[11.07.2015 22:46:34] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info:
<script>
var $grid = $('.grid').imagesLoaded( function() {
// init Masonry after all images have loaded
$(".grid .grid-item img").each(function(){
var el_height = $(this).height();
var el_width = $(this).width();
if(el_height>el_width){
$(this).css('width','100%');
}
if(el_heightn_el_height){
$(this).css('marginTop','-'+((n_el_height-n_el_height)/2)+'px');
}
if(n_el_width>p_el_width){
//console.log(n_el_width+'-'+n_el_height+"---"+p_el_width+'-'+p_el_height);
$(this).css('marginLeft','-'+((n_el_width-p_el_width)/2)+'px');
}
});
$grid.masonry({
columnWidth: '.grid-sizer',
//gutter: '.gutter-sizer',
itemSelector: '.grid-item',
percentPosition: true
});
});
$(document).ready(function() {
$(".grid-item").fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'inside'
},
thumbs : {
width : 50,
height : 50
}
}
});
});
</script>
[11.07.2015 22:46:48] *** weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info відправив custome.css ***
[11.07.2015 22:47:10] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: добавьте и дайте ссылку на страницу
[11.07.2015 22:47:19] andrush85-skype: Здесь исправлены ошибки или это другая версия?
[11.07.2015 22:47:52] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: Здесь я по другому считаю размеры блоков для подгона картинок
[11.07.2015 22:52:50] andrush85-skype: http://galleryua.com/photo/dostopr_2-adaptiv-vkontakte-2.php?E=49.94722&...
[11.07.2015 22:53:00] andrush85-skype: Только не вижу центрирования. Есть оно?
[11.07.2015 22:53:41] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: для горизонтальных для вертикальных не успел дописать
[11.07.2015 22:54:18] andrush85-skype: Вот єто Ві имеете в виду? https://yadi.sk/i/8YgG1DqChosXR
[11.07.2015 22:54:54] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: это у вас картинка с белой рамкой!
[11.07.2015 22:56:19] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: http://joxi.ru/D2P6zVwIb9Wxr3 вот выравнивание
[11.07.2015 22:57:09] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: Для больших горизонтальных не успел дописать http://joxi.ru/DrlEg7di1XdDmP
[11.07.2015 22:57:58] andrush85-skype: ааа, понял) Рамка -запутала.
[11.07.2015 22:58:17] andrush85-skype: Кстати черные и белые рамки - нехорошо.
[11.07.2015 22:58:33] andrush85-skype: А можно обрезать краю по 5% зуммированием наверное?
[11.07.2015 22:59:03] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: мин попробую
[11.07.2015 22:59:55] andrush85-skype: ок, я еще мин на 10 отойду пока.
[11.07.2015 22:59:58] andrush85-skype: 10-15
[11.07.2015 23:04:01] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info:
<script>
var $grid = $('.grid').imagesLoaded( function() {
// init Masonry after all images have loaded
$(".grid .grid-item img").each(function(){
var el_height = $(this).height();
var el_width = $(this).width();
if(el_height>el_width){
$(this).css('width','100%');
}
if(el_heightp_el_height){
$(this).css('marginTop','-'+((n_el_height-p_el_height)/2)+'px');
}
if(n_el_width>p_el_width){
//console.log(n_el_width+'-'+n_el_height+"---"+p_el_width+'-'+p_el_height);
$(this).css('marginLeft','-'+((n_el_width-p_el_width)/2)+'px');
}
});
$grid.masonry({
columnWidth: '.grid-sizer',
//gutter: '.gutter-sizer',
itemSelector: '.grid-item',
percentPosition: true
});
});
$(document).ready(function() {
$(".grid-item").fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'inside'
},
thumbs : {
width : 50,
height : 50
}
}
});
});
</script>
Вот теперь должно все центрировать
[11.07.2015 23:14:37] andrush85-skype: Отлично
http://galleryua.com/photo/dostopr_2-adaptiv-vkontakte-2.php?E=49.94722&...
[11.07.2015 23:14:40] *** weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info відправив custome.css ***
[11.07.2015 23:14:53] andrush85-skype: єто тоже заменить?
[11.07.2015 23:14:59] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: да там зум
[11.07.2015 23:15:23] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info:
.grid-item img{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
этим параметром можете менять степень увеличения
[11.07.2015 23:17:41] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: Прикольно вышло =)
[11.07.2015 23:19:39] andrush85-skype: Да, круто! Кстати Ваш скрипт проверят загрузку фото, так? А что, если ссілка битая оказывается, это никак не проверяется?
[11.07.2015 23:21:33] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: да скрипт ждет полной загрузки чтобы оперделить размер картинок!
Если ссылка будет битой то будет пустой блок
[11.07.2015 23:21:59] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: определить*
[11.07.2015 23:23:20] andrush85-skype: всмысле залитый белым?
[11.07.2015 23:24:17] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: как в браузере отображается изображение если адрес изображения не правильный!
[11.07.2015 23:25:15] andrush85-skype: аа, просто битую картинку показывает. Можно ведь как вариант ее белым квадратом замещать?
[11.07.2015 23:26:07] andrush85-skype: И еще в каком местте это проверятеся, нужно что-то типа такого встатить туда $.post( "/video/youtube-add-to-base-cash.php", {data:{"result": videoSet, "pageId": pageId}});
чтобы отправлять серверу инфу о битой ссылке. Это будет вообще крутяк!
[11.07.2015 23:27:22] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: пару мин
[11.07.2015 23:38:08] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info:
<script>
$(document).ready(function(){
$('.grid-item img').bind('error', function() {
$(this).parents('.grid-item').remove();
});
});
var $grid = $('.grid').imagesLoaded( function() {
// init Masonry after all images have loaded
$(".grid .grid-item img").each(function(){
var el_height = $(this).height();
var el_width = $(this).width();
if(el_height>el_width){
$(this).css('width','100%');
}
if(el_heightp_el_height){
$(this).css('marginTop','-'+((n_el_height-p_el_height)/2)+'px');
}
if(n_el_width>p_el_width){
//console.log(n_el_width+'-'+n_el_height+"---"+p_el_width+'-'+p_el_height);
$(this).css('marginLeft','-'+((n_el_width-p_el_width)/2)+'px');
}
});
$grid.masonry({
columnWidth: '.grid-sizer',
//gutter: '.gutter-sizer',
itemSelector: '.grid-item',
percentPosition: true
});
});
$(document).ready(function() {
$(".grid-item").fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'inside'
},
thumbs : {
width : 50,
height : 50
}
}
});
});
</script>
[11.07.2015 23:38:59] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info:
$(document).ready(function(){
$('.grid-item img').bind('error', function() {
$(this).parents('.grid-item').remove();
});
});
вот здесь проверяю загружена ли картинка если нет то убираем весь блок
[11.07.2015 23:40:05] andrush85-skype: ага, тогда после строки $(this).parents('.grid-item').remove();
[11.07.2015 23:40:16] andrush85-skype: можно вставить мой post да ?
[11.07.2015 23:40:19] andrush85-skype: сообщшить серверу..
[11.07.2015 23:40:20] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: перед
[11.07.2015 23:40:44] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: вы как рас можете достать адрес битой картинки
[11.07.2015 23:41:00] andrush85-skype: ага, а как получить ее адрес?
[11.07.2015 23:41:29] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: $(this).attr('href')
[11.07.2015 23:41:58] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: var bad_img_href = $(this).attr('href');
[11.07.2015 23:44:57] andrush85-skype: по идее вот так ,да?
$('.grid-item img').bind('error', function() {
var bad_img_href = $(this).attr('href');
$.post( "/photo/delete-bad-images.php", {data:{"result": bad_img_href}});
$(this).parents('.grid-item').remove();
[11.07.2015 23:45:29] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: да
[11.07.2015 23:46:18] andrush85-skype: Спасибо, теперь то, о чем я мечтал http://galleryua.com/photo/dostopr_2-adaptiv-vkontakte-2.php?E=49.94722&...
Можно будет еще конечно ленивую подгрузку доделать, но не сегодня. Может быть в понедельник.
Скинете Ваш кошелек?
[11.07.2015 23:47:53] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: что вы имеете ввиду под ленивой подгрузкой?
и кошелек чего?
[11.07.2015 23:48:22] andrush85-skype: Z
[11.07.2015 23:48:27] andrush85-skype: куда оплату скинуть?
[11.07.2015 23:48:59] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: Z307295638934
[11.07.2015 23:49:18] andrush85-skype: Под ленивой подгрузкой я подразумеваю скрипт, который при прокрутке страницы вниц подгружает еще фото до бесконечности как в ВК новости.
[11.07.2015 23:49:24] andrush85-skype: Он очень просто по-идее.
[11.07.2015 23:49:35] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: да можно конечно
[11.07.2015 23:54:54] andrush85-skype: код пр. 11753
[11.07.2015 23:55:44] andrush85-skype: Спасибо, хорошо поработали! Отзів могу оставить, если сделаете заявку окончательной!
[11.07.2015 23:55:45] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: Пришло спасибо
[11.07.2015 23:55:52] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: мин
[11.07.2015 23:56:29] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: Изменил
[11.07.2015 23:59:16] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: Спасибо за отзыв
[11.07.2015 23:59:43] andrush85-skype: Ок, Вам тоже. Если ленивую подгрузку готовы будете добавить, то в понедельник напишите.
[0:02:01] weblancer ВЕРСТКА Гора Сергей (DoctorSpirit) ion-studio.info: Хорошо
- Для комментирования войдите или зарегистрируйтесь
Print 
PDF