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

Привет, ребята, я сейчас переношу свое фото-портфолио из Squarespace на свой сайт Joomla.

Я настроил тестовые страницы, настроил шаблон и т. д., чтобы все было так, как я хочу.

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

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

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

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



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



Кроме того, если вы сожмете окно браузера на определенную величину, часть изображения окажется ПОД столбцом меню, чего мне определенно не хочется.

Но мне не удалось найти соответствующий раздел кода, чтобы настроить галерею строго внутри черного «контейнера» (поля содержимого) справа. 2) Эта урезанная версия настроена только на автозапуск.

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

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

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

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

 


jQuery.noConflict();


(function(jQuery){


theme = {


/* Initial Placement


----------------------------*/


_init : function(){


// Center Slide Links


if (api.options.slide_links) jQuery(vars.slide_list).css('margin-left', -jQuery(vars.slide_list).width()/2);


// Start progressbar if autoplay enabled


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


}


/* Thumbnail Tray


----------------------------*/


// Hide tray off screen


jQuery(vars.thumb_tray).animate({bottom : -jQuery(vars.thumb_tray).height()}, 0 );


// Thumbnail Tray Toggle


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;


});


// Make thumb tray proper size


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


// Display total slides


if (jQuery(vars.slide_total).length){


jQuery(vars.slide_total).html(api.options.slides.length);


}


/* Thumbnail Tray Navigation


----------------------------*/ 


if (api.options.thumb_links){


//Hide thumb arrows if not needed


if (jQuery(vars.thumb_list).width() <= jQuery(vars.thumb_tray).width()){


jQuery(vars.thumb_back +','+vars.thumb_forward).fadeOut(0);


}


// Thumb Intervals


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;


// Cycle thumbs forward


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'});


}


});


// Cycle thumbs backwards


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'});


}


});


}


/* Navigation Items


----------------------------*/


jQuery(vars.next_slide).click(function() {


api.nextSlide();


});


jQuery(vars.prev_slide).click(function() {


api.prevSlide();


});


// Full Opacity on Hover


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){


// Next thumbnail clicked


jQuery(vars.next_thumb).click(function() {


api.nextSlide();


});


// Previous thumbnail clicked


jQuery(vars.prev_thumb).click(function() {


api.prevSlide();


});


}


jQuery(vars.play_button).click(function() {


api.playToggle(); 


});


/* Thumbnail Mouse Scrub


----------------------------*/


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'});


}


}


});


}


/* Window Resize


----------------------------*/


jQuery(window).resize(function(){


// Delay progress bar on resize


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){


// Delay slideshow from resuming so Chrome can refocus images


vars.progressDelay = setTimeout(function() {


if (!vars.is_paused){


theme.progressBar();


vars.slideshow_interval = setInterval(api.nextSlide, api.options.slide_interval);


}


vars.progressDelay = false;


}, 1000);


}


}


// Thumb Links


if (api.options.thumb_links && vars.thumb_tray.length){


// Update Thumb Interval & Page


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);


// Adjust thumbnail markers


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');


}


}


}); 


},


/* Go To Slide


----------------------------*/


goTo : function(){


if (api.options.progress_bar && !vars.is_paused){


jQuery(vars.progress_bar).stop().animate({left : -jQuery(window).width()}, 0 );


theme.progressBar();


}


},


/* Play & Pause Toggle


----------------------------*/


playToggle : function(state){


if (state =='play'){


// If image, swap to pause


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 image, swap to play


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 );


}


},


/* Before Slide Transition


----------------------------*/


beforeAnimation : function(direction){


if (api.options.progress_bar && !vars.is_paused) jQuery(vars.progress_bar).stop().animate({left : -jQuery(window).width()}, 0 );


/* Update Fields


----------------------------*/


// Update slide caption


if (jQuery(vars.slide_caption).length){


(api.getField('title')) ? jQuery(vars.slide_caption).html(api.getField('title')) : jQuery(vars.slide_caption).html('');


}


// Update slide number


if (vars.slide_current.length){


jQuery(vars.slide_current).html(vars.current_slide + 1);


}


// Highlight current thumbnail and adjust row position


if (api.options.thumb_links){


jQuery('.current-thumb').removeClass('current-thumb');


jQuery('li', vars.thumb_list).eq(vars.current_slide).addClass('current-thumb');


// If thumb out of view


if (jQuery(vars.thumb_list).width() > jQuery(vars.thumb_tray).width()){


// If next slide direction


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'});


}


// If previous slide direction


}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'});


}


}


}


}


},


/* After Slide Transition


----------------------------*/


afterAnimation : function(){


if (api.options.progress_bar && !vars.is_paused) theme.progressBar(); // Start progress bar


},


/* Progress Bar


----------------------------*/


progressBar : function(){


jQuery(vars.progress_bar).stop().animate({left : -jQuery(window).width()}, 0 ).animate({ left:0 }, api.options.slide_interval);


}


};


/* Theme Specific Variables


----------------------------*/


jQuery.supersized.themeVars = {


// Internal Variables


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


// General Elements 


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


}; 


/* Theme Specific Options


----------------------------*/ 


jQuery.supersized.themeOptions = { 


progress_bar : 1, // Timer for each slide 


mouse_scrub : 0 // Thumbnails move with mouse


};


})(jQuery);

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

чтобы разобраться.

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

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

Галерея CSS

 /** supersize **/ #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; } /*Speed*/ #supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; } /*Quality*/ #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; } /** Prev / Next slide **/ #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; } /* Thumbnail Tray ----------------------------*/ #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; }

Код (разметка):

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

css_admin.css

helper.php

mod_supersized2.php

mod_supersized2.xml

А затем папка tmpl с default.php в ней.

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

И добавьте элементы управления наведением мыши для предыдущего/следующего/воспроизведения/паузы, которые, кажется, упоминаются по всему коду, но я не знаю, скрыты ли они или деактивированы каким-либо образом, или просто находятся в позиции, которая не отображается...