Форум русской поддержки Joomla!® CMS
04.12.2016, 20:22:10 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

jQuery плагин "beforeafter" в статье Joomla 3

 (Прочитано 1290 раз)
0 Пользователей и 1 Гость смотрят эту тему.
keramzit_001
Захожу иногда
**

Репутация: +1/-0
Offline Offline

Пол: Мужской
Сообщений: 15



« : 08.09.2015, 11:02:55 »

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

Плагин 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.
  • Подобрал рабочий код инициализации плагина.
Код
// <![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`ом внутри, который принимает такую же высоту, как и картинки для обработки плагином.
Код
$(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`ом внутри, который принимает такую же высоту, как и картинки для обработки плагином.
Код
$(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.
Код
$(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`а в зависимости от размера окна браузера. Ведь плагин построен на фиксированной ширине входящей картинки:
Код
			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, 22:37:30 от keramzit_001 » Записан
fsv
Практически профи
*******

Репутация: +330/-2
Offline Offline

Пол: Мужской
Сообщений: 2236


« Ответ #1 : 08.09.2015, 14: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
Захожу иногда
**

Репутация: +1/-0
Offline Offline

Пол: Мужской
Сообщений: 15



« Ответ #2 : 10.09.2015, 11:16:58 »

Спасибо Вам за подсказки!

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

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

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

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

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


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

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

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

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

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

В последней версии 1.4 тегом <img>
Общая структура версии:
Код
<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() Общая структура версии:
Код
<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:
Код
<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, 22:40:03 от keramzit_001 » Записан
fsv
Практически профи
*******

Репутация: +330/-2
Offline Offline

Пол: Мужской
Сообщений: 2236


« Ответ #3 : 10.09.2015, 15: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
Захожу иногда
**

Репутация: +1/-0
Offline Offline

Пол: Мужской
Сообщений: 15



« Ответ #4 : 11.09.2015, 08:25:26 »

Вы абсолютно правы
Цитировать
Ваш пример - http://jsfiddle.net/wb1ftz95/ - удалив лишнее, работает
Не просто запускается, а даже класс hasTooltip обрабатывается Smiley корректно. Чего не было при вызове через $each(). Единственное ещё не пробовал запустить плагин несколько раз на одной странице.

В итоге получилось заставить масштабироваться изображения так:
Код
$('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, 22:43:33 от keramzit_001 » Записан
fsv
Практически профи
*******

Репутация: +330/-2
Offline Offline

Пол: Мужской
Сообщений: 2236


« Ответ #5 : 11.09.2015, 15:00:19 »

Цитировать
Safari для windows подвёл. Не подхватывает height у всех div значение "0px", которые формируются плагином.
Можно попробовать при динамическом создании этих дивов:  if safari, устанавливать им высоту js-ом, исходя из высоты дочернего элемента.
...или гуглить, что за особенности у safari, и все равно какой-то костыль дописывать.

Показать текстовый блок
Записан
keramzit_001
Захожу иногда
**

Репутация: +1/-0
Offline Offline

Пол: Мужской
Сообщений: 15



« Ответ #6 : 11.09.2015, 15:52:16 »

Обязательно попробую и буду гуглить условия для Safari. Выбора нет. Должно везде работать. Пару дней назад этот замечательный браузер нормально обрабатывал код. Обновился скорей всего. На сайте "слетели" высоты в панорамных картинках http://sergey-tretyakov.ru/blog/korporativ-leto.html именно в Safari - остальные браузеры нормально читают код. Причём панорамки так же выводятся другим скриптом в div`ах через background: url(). Только в одном случае height намного больше чем реальный, а в другом просто ноль.

Показать текстовый блок
Записан
keramzit_001
Захожу иногда
**

Репутация: +1/-0
Offline Offline

Пол: Мужской
Сообщений: 15



« Ответ #7 : 30.01.2016, 01: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.

Рабочий код вызова:
Показать текстовый блок
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet