0 Пользователей и 1 Гость просматривают эту тему.
  • 7 Ответов
  • 3884 Просмотров
*

keramzit_001

  • Осваиваюсь на форуме
  • 14
  • 2 / 0
Предисловие:
На просторах интернета наткнулся на замечательный скрипт представления проделанного объёма работы над изображением  -  До/После.
Для человека тратящего большое количество времени на обработку фотографий такой визуальный метод презентации очень важен и необходим.
Известные интернет-ресурсы с его помощью презентуют свои платные курсы по обработке изображений.

Плагин jquery.beforeafter.js созданный автором сайта http://www.catchmyfame.com


1. Что имеем на входе:
Необходимые файлы для работы:
------------------------------
jquery-1.6.1.min.js
jquery-ui-1.8.13.custom.min.js
jquery.beforeafter-1.4.js

------------------------------
  • Последняя версия плагина v1.4 от September 19, 2011 с офф сайта не работает в материалах joomla3.
  • Инициализация плагина предложенная автором не запускает код скрипта.
  • Оригинал кода и демо http://www.catchmyfame.com/jquery/demo/8/

2. Изучая структуру кода и найдя разные версии плагина выяснил:
На самом деле необходимые файлы для работы в joomla3:
------------------------------
jquery-1.10.2.min.js
jquery-migrate-1.2.1.min.js
jquery-ui-1.11.4.min.js
jquery.beforeafter.js

------------------------------
  • Запустил версию 1.2 от October 18, 2010 которая работает в материалах joomla3.
  • Подобрал рабочий код инициализации плагина.
Код: javascript
// <![CDATA[
jQuery(document).ready(function() {
$(function() {
$('#BeforeAfter').each(function() {
$(this).beforeAfter();
});
});
});
// ]]>

Вопрос: Как научить плагин корректно масштабироваться в адаптивной вёрстке и не "распадаться"?

Корректированная рабочая версия плагина в материалах joomla3: Chrome, Firefox, Safari, Opera, IE и iPad обрабатывают код отлично, но при уменьшении разрешения окна браузера плывёт вёрстка.
Спойлер
[свернуть]

По задумке автора ссылки "Показать До" и "Показать После" формируются методом $(obj).after и отображаются в отдельном div http://www.catchmyfame.com/jquery/demo/8/. Юзабилити на смартфонах хромает при таком выводе. Пальцем не попадешь. Можно сделать большую кнопку, но она будет под картинкой, что крайне неудобно.

Если сделать большие кнопки справа и слева становится удобней использовать плагин и на устройствах и на стационарных машинах.

Что сделал:
Функцию o.showFullLinks отключил и прописал:
1. Метод $(obj).before для ссылки "Показать До" с div`ом внутри, который принимает такую же высоту, как и картинки для обработки плагином.
Код: javascript
$(obj).before('<a id="showleft'+randID+'" class="BefAft" href="javascript:void(0)"><div id="links'+randID+'" class="balinks-left" style="float:left;height:'+imgHeight+'px;width:'+imgWidth/9+'px;"><h1 id="insetshadow-left'+randID+'" style="position:relative;top:'+((imgHeight/2)-30)+'px;">Do</h1></div></a>');
$('#showleft'+randID).css({'float':'left','position':'relative','z-index':'999'}).click(function(){
$('div:eq(2)', obj).animate({width:imgWidth},200);
$('#dragwrapper'+randID).animate({left:imgWidth - $('#dragwrapper'+randID).width()+'px'},200);
});
2. Метод $(obj).after для ссылки "Показать После" с div`ом внутри, который принимает такую же высоту, как и картинки для обработки плагином.
Код: javascript
$(obj).after('<a id="showright'+randID+'" class="BefAft" href="javascript:void(0)"><div id="links'+randID+'" class="balinks-right" style="float:left;height:'+imgHeight+'px;width:'+imgWidth/9+'px;"><h1 id="insetshadow-right'+randID+'" style="position:relative;top:'+((imgHeight/2)+30)+'px;">Posle</h1></div></a>');
$('#showright'+randID).css({'float':'left','margin-bottom': '2em','position':'relative','z-index':'999'}).click(function(){
$('div:eq(2)', obj).animate({width:0},200);
$('#dragwrapper'+randID).animate({left:'0px'},200);
});
3. Методом $(obj).wrap всё обернул. Вследствии чего не плывёт вёрстка самого материала и плагин центрируется по CSS.
Код: javascript
$(obj).wrap('<div id="wpaperBefAft"></div>');
$('#wpaperBefAft').height(imgHeight).width((imgWidth/9)+imgWidth+(imgWidth/9)).css({'margin':'40px auto 40px auto','padding':'0'});
Всё бы хорошо, но опытным путём подобранная ширина ссылок "Показать До" и "Показать После"  imgWidth/9 корректно отрабатывает только ДО альбомной ориентации экрана iPad (1024px) далее при уменьшении разрешения экрана появляется горизонтальная полоса прокрутки. Я понимаю, почему это происходит. Задаются фиксированные размеры родительского div id="wpaperBefAft" в методе $(obj).wrap. Но не знаю, как прописать функцию для изменения родительского div`а в зависимости от размера окна браузера. Ведь плагин построен на фиксированной ширине входящей картинки:
Код: javascript
			var imgWidth = $('img:first', obj).width();
var imgHeight = $('img:first', obj).height();


$(obj)
.width(imgWidth)
.height(imgHeight)
.css({'float':'left','position':'relative','padding':'0'});
Если отключить вывод ссылок "Показать До" и "Показать После" сделанные мной в своих div и убрать $(obj).wrap плагин корректно масштабирует div id="BeforeAfter" формируемый методом $(obj).prepend с такими же заданными начальными размерами ширины и высоты, которые меняются при уменьшении окна браузера.
На картинке в спойлере пример:
Спойлер
[свернуть]
Но масштабируется сам div оболочка, а картинка своего размера не меняет. Браузеры скрывают не влезающую часть изображения 'overflow':'hidden'.
 
Прошу помощи в решении задачи корректного масштабирования родительского div и находящихся в нём изображений.


Код HTML формируемый скриптом:
Спойлер
[свернуть]

Пример работы в моих материалах joomla3 (разные размеры картинок)
http://sergey-tretyakov.ru/blog/obrabotka-pejzazhnoj-fotografii-karelii
http://sergey-tretyakov.ru/blog/vishnya-v-tjomnykh-tonakh
http://sergey-tretyakov.ru/blog/chashka-utrennego-kofe
« Последнее редактирование: 05.02.2016, 21:37:30 от keramzit_001 »
*

fsv

  • Живу я здесь
  • 2765
  • 402 / 2
Re: jQuery плагин "beforeafter" в статье Joomla 3
« Ответ #1 : 08.09.2015, 13:34:20 »
По первой ссылке на ваш сайт - подключено 3 jQuery 1.10.2.

Цитировать
Последняя версия плагина v1.4 от September 19, 2011 с офф сайта не работает в материалах joomla3.
А вы что, может эти древние библиотеки еще подключили - jquery-1.6.1.min.js ?
Не знаком с этим скриптом, сейчас посмотрел на сайт разработчика , там есть раздел "Tablets/Mobile". Предполагаю, что в новой версии ваш вопрос решен. Но вы взяли старую версию. И не сказали здесь, что в ней не работает в J3, что в консоли. Предполагаю, обычный конфликт скриптов был.

Код
$('#BeforeAfter').each(function() {
смысла нет, так как id должен быть 1 на странице. Если class, можно.

В ваши изменения не вникал, попробуйте на новой версии (1.4). Если не получится, надо будет убрать у блока фиксированные размеры, картинки на 100%.
Веб-разработка: заказ. Только новая объемная разработка. Качественно, дорого.
*

keramzit_001

  • Осваиваюсь на форуме
  • 14
  • 2 / 0
Re: jQuery плагин "beforeafter" в статье Joomla 3
« Ответ #2 : 10.09.2015, 10:16:58 »
Спасибо Вам за подсказки!

Цитировать
По первой ссылке на ваш сайт - подключено 3 jQuery 1.10.2.

Убрал лишнее подключение. Оставил только в head.

Цитировать
А вы что, может эти древние библиотеки еще подключили - jquery-1.6.1.min.js ?

Если честно, то пробовал и такой вариант.

Цитировать
Не знаком с этим скриптом, сейчас посмотрел на сайт разработчика, там есть раздел "Tablets/Mobile". Предполагаю, что в новой версии ваш вопрос решен.


Раздел "Tablets/Mobile"-  это небольшой плагин для UI jQuery, который позволяет перемещать зелёный бар одним касанием на устройствах.

Цитировать
Но вы взяли старую версию. И не сказали здесь, что в ней не работает в J3, что в консоли. Предполагаю, обычный конфликт скриптов был.

По поводу версий нужно уточнить, конечно же. Не досмотрел/дописал причину такого решения:
Консоль молчит. Весь сыр-бор происходит из-за bootstpap`а  - его стили по умолчанию масштабируют все <img>

Код: css
img {
    max-width: 100%;
    height: auto;
}

Разработчик плагина в разных версиях использует разный вывод картинок в DOM дерево:

В последней версии 1.4 тегом <img>
Общая структура версии:
Код: html4strict
<div><!-- wraper parent -->
<div><!-- wraper moving elements -->
<div><!-- gray bar -->
<img alt="green tab">
</div>
</div>
<div>
<img alt="before">
</div>
<div>
<img alt="after">
</div>
<img alt="left arrow"><img alt="right arrow">
</div>

Bootstrap`овские стили подхватывают теги и обрабатывают их. Если исключить bootstrap версия 1.4 работает, но адаптивность всего сайта коту под хвост. Потому и была выбрана более старая версия плагина.

В версии 1.2 с помощью background: url() Общая структура версии:
Код: html4strict
<div><!-- wraper parent -->
<div><!-- wraper moving elements -->
<div><!-- gray bar -->
<img alt="green tab">
</div>
</div>
<div style="background: url(coffee-before.jpg) no-repeat;"></div>
<div style="background: url(coffee-after.jpg) no-repeat;"></div>
<img alt="left arrow"><img alt="right arrow">
</div>

Исключив влияние CSS добился корректной работы плагина в материалах joomla3.

Попытался немного улучшить юзабилити расположив кнопки по бокам. Кастомная структура версии 1.2:
Код: html4strict
<div><!-- wraper custom -->

<a><!-- showleft custom-->
<div>
<h1>Before</h1>
</div>
</a>

<div><!-- wraper parent -->
<div><!-- wraper moving elements -->
<div><!-- gray bar -->
<img alt="green tab">
</div>
</div>
<div style="background: url(coffee-before.jpg) no-repeat;"></div>
<div style="background: url(coffee-after.jpg) no-repeat;"></div>
<img alt="left arrow"><img alt="right arrow">
</div>

<a><!-- showright custom-->
<div>
<h1>After</h1>
</div>
</a>

</div>

И снова упёрся в масштабирование родительского div и расположенных в нём изображений для разрешений менее 1024px.

Цитировать
$('#BeforeAfter').each(function() {
смысла нет, так как id должен быть 1 на странице. Если class, можно.

Только вызовом $each() плагин подхватывает запуск.
« Последнее редактирование: 05.02.2016, 21:40:03 от keramzit_001 »
*

fsv

  • Живу я здесь
  • 2765
  • 402 / 2
Re: jQuery плагин "beforeafter" в статье Joomla 3
« Ответ #3 : 10.09.2015, 14:09:22 »
Цитировать
Только вызовом $each() плагин подхватывает запуск.
Ваш пример - http://jsfiddle.net/wb1ftz95/ - удалив лишнее, работает
Код
jQuery(document).ready(function() {
    $('#BeforeAfter').beforeAfter();
});

Цитировать
Весь сыр-бор происходит из-за bootstpap`а  - его стили по умолчанию масштабируют все <img>
Попробуйте js-ом переопределить размеры так, как вам надо, после бутстрапа, до
Код
var imgWidth = $('img:first', obj).width();
var imgHeight = $('img:first', obj).height();
из скрипта.
Веб-разработка: заказ. Только новая объемная разработка. Качественно, дорого.
*

keramzit_001

  • Осваиваюсь на форуме
  • 14
  • 2 / 0
Re: jQuery плагин "beforeafter" в статье Joomla 3
« Ответ #4 : 11.09.2015, 07:25:26 »
Вы абсолютно правы
Цитировать
Ваш пример - http://jsfiddle.net/wb1ftz95/ - удалив лишнее, работает
Не просто запускается, а даже класс hasTooltip обрабатывается ^-^ корректно. Чего не было при вызове через $each(). Единственное ещё не пробовал запустить плагин несколько раз на одной странице.

В итоге получилось заставить масштабироваться изображения так:
Код: javascript
$('img',obj).css({'max-width':($(window).width()-160)+'px','height':imgHeight+'px'});

При больших разрешениях экрана свойство max-width: 1423px; у тегов <img> браузеры выводят, перечеркивая bootstrap`овские max-width: 100%, а при разрешениях менее максимальной ширины изображения масштабируют его до указанного и ещё отнимают константу в 160px. В эти пикселы встают div`ы боковых кнопок "До" и "После".

Проверил вывод на:
  • IE 11.0 +
  • Opera 12.15 +
  • FereFox 40.0.3 +
  • Chrome 47.0 +
  • Яндекс Браузер 15.7 +
  • iPad2 Safari +
  • iPad2 Chrome +
  • Safari 5.1.7 -

Safari для windows подвёл. Не подхватывает height у всех div значение "0px", которые формируются плагином. Ctrl+R не помогает. Консоль молчит. Только вернувшись назад и снова войдя в материал, браузер проставляет нормальное значение, к примеру, height="900px" На планшете в Safari полёт нормальный. Мистика.
« Последнее редактирование: 11.09.2015, 21:43:33 от keramzit_001 »
*

fsv

  • Живу я здесь
  • 2765
  • 402 / 2
Re: jQuery плагин "beforeafter" в статье Joomla 3
« Ответ #5 : 11.09.2015, 14:00:19 »
Цитировать
Safari для windows подвёл. Не подхватывает height у всех div значение "0px", которые формируются плагином.
Можно попробовать при динамическом создании этих дивов:  if safari, устанавливать им высоту js-ом, исходя из высоты дочернего элемента.
...или гуглить, что за особенности у safari, и все равно какой-то костыль дописывать.

Спойлер
[свернуть]
Веб-разработка: заказ. Только новая объемная разработка. Качественно, дорого.
*

keramzit_001

  • Осваиваюсь на форуме
  • 14
  • 2 / 0
Re: jQuery плагин "beforeafter" в статье Joomla 3
« Ответ #6 : 11.09.2015, 14:52:16 »
Обязательно попробую и буду гуглить условия для Safari. Выбора нет. Должно везде работать. Пару дней назад этот замечательный браузер нормально обрабатывал код. Обновился скорей всего. На сайте "слетели" высоты в панорамных картинках http://sergey-tretyakov.ru/blog/korporativ-leto.html именно в Safari - остальные браузеры нормально читают код. Причём панорамки так же выводятся другим скриптом в div`ах через background: url(). Только в одном случае height намного больше чем реальный, а в другом просто ноль.

Спойлер
[свернуть]
*

keramzit_001

  • Осваиваюсь на форуме
  • 14
  • 2 / 0
Re: jQuery плагин "beforeafter" в статье Joomla 3
« Ответ #7 : 30.01.2016, 00:44:57 »

Всё решил. Везде работает! Все популярные браузеры корректно обрабатывают код плагина.

Safari не мог обновиться (см. пост выше). Единственная версия выпущенная apple под windows 5.1.7 от 2012 года других нет!

Разбор ошибок:

1. У Safari есть баг при jQuery(document).ready он не считает height и советуют пользоваться jQuery(window).load  - совет здесь потратил кучу времени на ложный путь. Модифицировал код плагина добавив:
Спойлер
[свернуть]
Плагин запустился в Safari но только один раз на странице

2. Нашел дельный совет по использованию $(window).on('load', function(){}); и всё отлично запустил.

Коряво вызывал скрипт. Поэтому safari выдавал в консоли: $(this) - анонимная функция. Плагин не работал и на десктопах и на устройствах apple (chrome, Firefox, opera - полёт нормальный код работает) Изменил id на class для .each функции как говорил  fsv.

Рабочий код вызова:
Спойлер
[свернуть]
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Заготовка болванки - BlankTemplate для Joomla 3.x

Автор buyanov

Ответов: 83
Просмотров: 34057
Последний ответ 20.02.2019, 10:27:16
от jem777
Шаблон не видит переменные локализации кроме глобальных (Joomla 3.8)

Автор s.elena133

Ответов: 10
Просмотров: 3073
Последний ответ 09.12.2017, 18:27:18
от Ilhom666
Навигационный бар (Navbar) Bootstrap, Joomla 3.2

Автор wfedin

Ответов: 31
Просмотров: 20666
Последний ответ 06.01.2017, 21:07:31
от slon777
Кнопка для выхода пользователя для Joomla 3.0

Автор Fedor Vlasenko

Ответов: 6
Просмотров: 10085
Последний ответ 13.04.2016, 09:13:30
от ribojex
Можно ли и как правильно использовать Bootstrap3 для Joomla3 (Joomla 3.3.1 и Bootstrap 3.1.1)

Автор MansEL

Ответов: 4
Просмотров: 5445
Последний ответ 13.02.2016, 14:21:44
от Marta