Элементы управления и макет галереи

[Skarlet1]

Привет, ребята, я сейчас переношу свое фото-портфолио из Squarespace на свой сайт Joomla. Я настроил тестовые страницы, настроил шаблон и т. д., чтобы все было так, как я хочу. Однако у меня возникли проблемы с последними настройками, необходимыми для модулей галереи.

Я использую этот шаблон: Полный экран 6.

Он поставляется с полноэкранным расширением галереи, которое представляет собой урезанную версию: Supersized.

Вот как я настроил его для отображения на новом сайте: Галерея тестов.

1) Я бы хотел, чтобы изображения располагались по центру черного пространства, а не напротив столбца меню (и при этом непоследовательно). Я могу улучшить позиционирование, изменив ширину #supersized на 120 %, но, хотя на моем ноутбуке она выглядит идеально, на больших экранах она располагается неравномерно. Кроме того, если вы сожмете окно браузера на определенную величину, часть изображения окажется ПОД столбцом меню, чего мне определенно не хочется. Но мне не удалось найти соответствующий раздел кода, чтобы настроить галерею строго внутри черного «контейнера» (поля содержимого) справа.

2) Эта урезанная версия настроена только на автозапуск. Меня пока устраивает автозапуск, но хотелось бы знать, где/как изменить код, чтобы отключить автозапуск и придерживаться только ручного режима, если мне нужно.

3) В этой версии также нет видимых элементов управления. Я хотел бы добавить элементы управления плавающей галереей, как на моем старом сайте: Галерея Squarespace.

Таким образом, при наведении курсора на левую часть модуля мышь превращается в стрелку «предыдущий»; при наведении на правую часть галереи она превращается в стрелку «далее», а при наведении на середину мышь должна превратиться в кнопку воспроизведения/паузы. В Squarespace я бы настроил элементы управления для этого с помощью следующего кода («средний» эффект наведения курсора мыши в Squarespace на самом деле предназначен для миниатюр, но на новом сайте это должно быть воспроизведение/пауза):

jQuery.noConflict();
(function(jQuery){ theme = {  _init : function(){ if (api.options.slide_links) jQuery(vars.slide_list).css('margin-left', -jQuery(vars.slide_list).width()/2); if (api.options.autoplay){ if (api.options.progress_bar) theme.progressBar(); }else{ if (jQuery(vars.play_button).attr('src')) jQuery(vars.play_button).attr("src", vars.image_path + "play.png"); // If pause play button is image, swap src if (api.options.progress_bar) jQuery(vars.progress_bar).stop().animate({left : -jQuery(window).width()}, 0 ); // Place progress bar }  jQuery(vars.thumb_tray).animate({bottom : -jQuery(vars.thumb_tray).height()}, 0 ); jQuery(vars.tray_button).toggle(function(){ jQuery(vars.thumb_tray).stop().animate({bottom : -jQuery(vars.thumb_tray).height(), avoidTransforms : true}, 300 ); if (jQuery(vars.tray_arrow).toggleClass('full-screen-button-arrow')); return false; }, function() { jQuery(vars.thumb_tray).stop().animate({bottom : 0, avoidTransforms : true}, 300 ); if (jQuery(vars.tray_arrow).toggleClass('full-screen-button-arrow')); return false; }); jQuery(vars.thumb_list).width(jQuery('> li', vars.thumb_list).length * jQuery('> li', vars.thumb_list).outerWidth(true)); //Adjust to true width of thumb markers if (jQuery(vars.slide_total).length){ jQuery(vars.slide_total).html(api.options.slides.length); }  if (api.options.thumb_links){ if (jQuery(vars.thumb_list).width() <= jQuery(vars.thumb_tray).width()){ jQuery(vars.thumb_back +','+vars.thumb_forward).fadeOut(0); } vars.thumb_interval = Math.floor(jQuery(vars.thumb_tray).width() / jQuery('> li', vars.thumb_list).outerWidth(true)) * jQuery('> li', vars.thumb_list).outerWidth(true); vars.thumb_page = 0; jQuery(vars.thumb_forward).click(function(){ if (vars.thumb_page - vars.thumb_interval <= -jQuery(vars.thumb_list).width()){ vars.thumb_page = 0; jQuery(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'linear'}); }else{ vars.thumb_page = vars.thumb_page - vars.thumb_interval; jQuery(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'linear'}); } }); jQuery(vars.thumb_back).click(function(){ if (vars.thumb_page + vars.thumb_interval > 0){ vars.thumb_page = Math.floor(jQuery(vars.thumb_list).width() / vars.thumb_interval) * -vars.thumb_interval; if (jQuery(vars.thumb_list).width() <= -vars.thumb_page) vars.thumb_page = vars.thumb_page + vars.thumb_interval; jQuery(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'linear'}); }else{ vars.thumb_page = vars.thumb_page + vars.thumb_interval; jQuery(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'linear'}); } }); }  jQuery(vars.next_slide).click(function() { api.nextSlide(); }); jQuery(vars.prev_slide).click(function() { api.prevSlide(); }); if(jQuery.support.opacity){ jQuery(vars.prev_slide +','+vars.next_slide).mouseover(function() { jQuery(this).stop().animate({opacity:0.7},100); }).mouseout(function(){ jQuery(this).stop().animate({opacity:0.3},100); }); } if (api.options.thumbnail_navigation){ jQuery(vars.next_thumb).click(function() { api.nextSlide(); }); jQuery(vars.prev_thumb).click(function() { api.prevSlide(); }); } jQuery(vars.play_button).click(function() { api.playToggle(); });  if (api.options.mouse_scrub){ jQuery(vars.thumb_tray).mousemove(function(e) { var containerWidth = jQuery(vars.thumb_tray).width(), listWidth = jQuery(vars.thumb_list).width(); if (listWidth > containerWidth){ var mousePos = 1, diff = e.pageX - mousePos; if (diff > 10 || diff < -10) { mousePos = e.pageX; newX = (containerWidth - listWidth) * (e.pageX/containerWidth); diff = parseInt(Math.abs(parseInt(jQuery(vars.thumb_list).css('left'))-newX )).toFixed(0); jQuery(vars.thumb_list).stop().animate({'left':newX}, {duration:diff*3, easing:'linear'}); } } }); }  jQuery(window).resize(function(){ if (api.options.progress_bar && !vars.in_animation){ if (vars.slideshow_interval) clearInterval(vars.slideshow_interval); if (api.options.slides.length - 1 > 0) clearInterval(vars.slideshow_interval); jQuery(vars.progress_bar).stop().animate({left : -jQuery(window).width()}, 0 ); if (!vars.progressDelay && api.options.slideshow){ vars.progressDelay = setTimeout(function() { if (!vars.is_paused){ theme.progressBar(); vars.slideshow_interval = setInterval(api.nextSlide, api.options.slide_interval); } vars.progressDelay = false; }, 1000); } } if (api.options.thumb_links && vars.thumb_tray.length){ vars.thumb_page = 0; vars.thumb_interval = Math.floor(jQuery(vars.thumb_tray).width() / jQuery('> li', vars.thumb_list).outerWidth(true)) * jQuery('> li', vars.thumb_list).outerWidth(true); if (jQuery(vars.thumb_list).width() > jQuery(vars.thumb_tray).width()){ jQuery(vars.thumb_back +','+vars.thumb_forward).fadeIn('fast'); jQuery(vars.thumb_list).stop().animate({'left':0}, 200); }else{ jQuery(vars.thumb_back +','+vars.thumb_forward).fadeOut('fast'); } } }); },  goTo : function(){ if (api.options.progress_bar && !vars.is_paused){ jQuery(vars.progress_bar).stop().animate({left : -jQuery(window).width()}, 0 ); theme.progressBar(); } },  playToggle : function(state){ if (state =='play'){ if (jQuery(vars.play_button).toggleClass('full-screen-button-play')); if (api.options.progress_bar && !vars.is_paused) theme.progressBar(); }else if (state == 'pause'){ if (jQuery(vars.play_button).toggleClass('full-screen-button-play')); if (api.options.progress_bar && vars.is_paused)jQuery(vars.progress_bar).stop().animate({left : -jQuery(window).width()}, 0 ); } },  beforeAnimation : function(direction){ if (api.options.progress_bar && !vars.is_paused) jQuery(vars.progress_bar).stop().animate({left : -jQuery(window).width()}, 0 );  if (jQuery(vars.slide_caption).length){ (api.getField('title')) ? jQuery(vars.slide_caption).html(api.getField('title')) : jQuery(vars.slide_caption).html(''); } if (vars.slide_current.length){ jQuery(vars.slide_current).html(vars.current_slide + 1); } if (api.options.thumb_links){ jQuery('.current-thumb').removeClass('current-thumb'); jQuery('li', vars.thumb_list).eq(vars.current_slide).addClass('current-thumb'); if (jQuery(vars.thumb_list).width() > jQuery(vars.thumb_tray).width()){ if (direction == 'next'){ if (vars.current_slide == 0){ vars.thumb_page = 0; jQuery(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'linear'}); } else if (jQuery('.current-thumb').offset().left - jQuery(vars.thumb_tray).offset().left >= vars.thumb_interval){ vars.thumb_page = vars.thumb_page - vars.thumb_interval; jQuery(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'linear'}); } }else if(direction == 'prev'){ if (vars.current_slide == api.options.slides.length - 1){ vars.thumb_page = Math.floor(jQuery(vars.thumb_list).width() / vars.thumb_interval) * -vars.thumb_interval; if (jQuery(vars.thumb_list).width() <= -vars.thumb_page) vars.thumb_page = vars.thumb_page + vars.thumb_interval; jQuery(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'linear'}); } else if (jQuery('.current-thumb').offset().left - jQuery(vars.thumb_tray).offset().left < 0){ if (vars.thumb_page + vars.thumb_interval > 0) return false; vars.thumb_page = vars.thumb_page + vars.thumb_interval; jQuery(vars.thumb_list).stop().animate({'left': vars.thumb_page}, {duration:500, easing:'linear'}); } } } } },  afterAnimation : function(){ if (api.options.progress_bar && !vars.is_paused) theme.progressBar(); // Start progress bar },  progressBar : function(){ jQuery(vars.progress_bar).stop().animate({left : -jQuery(window).width()}, 0 ).animate({ left:0 }, api.options.slide_interval); } };  jQuery.supersized.themeVars = { progress_delay : false, // Delay after resize before resuming slideshow thumb_page : false, // Thumbnail page thumb_interval : false, // Thumbnail interval image_path : 'templates/full_screen_4/images/supersized/', // Default image path play_button : '#pauseplay', // Play/Pause button next_slide : '#nextslide', // Next slide button prev_slide : '#prevslide', // Prev slide button next_thumb : '#nextthumb', // Next slide thumb button prev_thumb : '#prevthumb', // Prev slide thumb button slide_caption : '#slidecaption', // Slide caption slide_current : '.slidenumber', // Current slide number slide_total : '.totalslides', // Total Slides slide_list : '#slide-list', // Slide jump list thumb_tray : '#thumb-tray', // Thumbnail tray thumb_list : '#thumb-list', // Thumbnail list thumb_forward : '#thumb-forward', // Cycles forward through thumbnail list thumb_back : '#thumb-back', // Cycles backwards through thumbnail list tray_arrow : '#tray-arrow', // Thumbnail tray button arrow tray_button : '#tray-button', // Thumbnail tray button progress_bar : '#progress-bar' // Progress bar };  jQuery.supersized.themeOptions = { progress_bar : 1, // Timer for each slide mouse_scrub : 0 // Thumbnails move with mouse };
})(jQuery);

Код (разметка): я пытался загрузить основной модуль галереи Supersized и просмотреть его, чтобы увидеть, какой код необходимо добавить или отредактировать, чтобы вывести элементы управления галереей на экран, добавить воспроизведение/паузу и т. д., но, похоже, ничего не получилось. чтобы разобраться.

Я вставил код «базовой» версии галереи ниже (той, которая включена в шаблон), а полную версию можно скачать бесплатно по ссылке, которую я предоставил выше, если потребуется какая-либо дополнительная информация или ссылки.

Если кто-нибудь может помочь мне понять, где искать и как достичь желаемых результатов, я буду очень, очень признателен!



Галерея CSS
#supersized-loader { position:absolute; top:65%; left:50%; z-index:0; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em; background:url(../../../images/supersized/progress.gif) no-repeat center center; } #supersized { position:fixed; left:0; top:0; overflow:hidden; z-index: 1; height:100%; width: 100%; } #supersized img { width:auto; height:auto; position:relative; max-width : none; display:none; outline:none; border:none; } #supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; } #supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; } #supersized a { z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111; display:block; } #supersized a.prevslide { z-index: -20; } #supersized a.activeslide { z-index:-10; } #supersized a.image-loading { background:#111 url(../../../images/supersized/progress.gif) no-repeat center center; width:100%; height:100%; } #supersized a.prevslide img, #supersized a.activeslide img { display:inline; } .hide_function, .hide_thumbnails { position:absolute !important; top: -10px !important; left:-9999px !important; height : 0 !important; } #prevslide, #nextslide { position:fixed; height:43px; width:43px; top:80%; margin-top:-21px; opacity:0.6; z-index:20; } #prevslide { left:10px; background:url('../../../images/supersized/back.png'); } #nextslide { right:10px; background:url('../../../images/supersized/forward.png'); } #prevslide:active, #nextslide:active { margin-top:-19px; } #prevslide:hover, #nextslide:hover { cursor:pointer; } #thumb-tray { position:fixed; z-index:20; bottom:0; left:0; margin-bottom:-4px; background: transparent url(../../../images/black-50.png) 0 0 repeat; width:100%; overflow:hidden; text-align:center; -moz-box-shadow: 0px 0px 4px #000; -webkit-box-shadow: 0px 0px 4px #000; box-shadow: 0px 0px 4px #000; } .menu-white #thumb-tray { background:transparent url(../../../images/white-40.png) 0 0 repeat; } #thumb-back, #thumb-forward { position:absolute; z-index:5; bottom:0; height:100%; width:40px; opacity:0.65; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70); } #thumb-back { left:0; background: url(../../../images/supersized/thumb-back.png) no-repeat center center; } #thumb-forward { right:0; background:url(../../../images/supersized/thumb-forward.png) no-repeat center center; } #thumb-back:hover, #thumb-forward:hover { cursor:pointer; background-color:rgba(255,255,255, 0.18); opacity:1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); } #thumb-back:hover { border-right:1px solid rgba(255,255,255, 0.3); } #thumb-forward:hover { border-left:1px solid rgba(255,255,255, 0.3); } ul#thumb-list { display:inline-block; list-style:none; position:relative; left:0px; padding: 0; } ul#thumb-list li { background:#111; list-style:none; display:inline; width:150px; overflow:hidden; float:left; margin:0; } ul#thumb-list li img { width:150px; height:auto; opacity:0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter:alpha(opacity=60); } ul#thumb-list li.current-thumb img, ul#thumb-list li:hover img { opacity:1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); } ul#thumb-list li:hover { cursor:pointer; }
Код (разметка):


Галерея JS

.collection-type-gallery .overlay-controls.right-control { cursor: url('imagepath'), move; } .collection-type-gallery .overlay-controls.left-control { cursor: url('imagepath'), move; } .collection-type-gallery .overlay-controls.center-control.thumbnail-toggle { cursor: url('imagepath'), move; }
Код (разметка):

 

[ololosh1]

Еще я только что понял, что в папке модулей есть дополнительные файлы для галереи:

css_admin.css
helper.php
mod_supersized2.php
mod_supersized2.xml
А затем папка tmpl с default.php в ней.

Должен ли я вставить код для любого из них? Я нашел настройку автозапуска в default.php, поэтому единственное, что я хочу сделать, это выяснить, как ограничить галерею черной областью, а не перекрывать (или помещать ее под) белый столбец меню. И добавьте элементы управления наведением мыши для предыдущего/следующего/воспроизведения/паузы, которые, кажется, упоминаются по всему коду, но я не знаю, скрыты ли они или деактивированы каким-либо образом, или просто находятся в позиции, которая не отображается...