Предисловие: На просторах интернета наткнулся на замечательный скрипт представления проделанного объёма работы над изображением - До/После.
Для человека тратящего большое количество времени на обработку фотографий такой визуальный метод презентации очень важен и необходим.
Известные интернет-ресурсы с его помощью презентуют свои платные курсы по обработке изображений.
Плагин 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();
});
});
});
// ]]>
По задумке автора ссылки "Показать До" и "Показать После" формируются методом
$(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-kareliihttp://sergey-tretyakov.ru/blog/vishnya-v-tjomnykh-tonakhhttp://sergey-tretyakov.ru/blog/chashka-utrennego-kofe
20.02.2019, 10:27:16