thegingerkid Posted January 25, 2016 Share Posted January 25, 2016 Hi guys, I'm in the process of transferring my photo portfolio from Squarespace to my own Joomla site. I've set up the test pages and and customized the template, etc. to get everything the way I want it. However, I'm having trouble with the last few tweaks needed for the gallery modules. I'm using this template: Full Screen 6 It came with a full screen gallery extension, which is a stripped down version of this: Supersized This is how I've set it up to look on the new site: Test Gallery 1) I would like the images to be centered within the black space rather than being up against the menu column (and inconsistently at that). I can improve the positioning by changing the #supersized width to 120% but, while it looks perfect on my laptop, it's not evenly positioned on larger screens. Also, if you shrink the browser window a certain amount, part of the image goes UNDER the menu column, which I certainly don't want. But I haven't been able to find the appropriate section of code to adjust the gallery to be strictly within that black "container" (content box) on the right. 2) This stripped down version is set to autoplay only. I'm fine with it being on autoplay for now but would like to know where / how to change the code to switch off autoplay and stick to manual only, if I need to. 3) This version also has no visible controls. I would like to add floating gallery controls like I have on my old site here: Squarespace Gallery So when hovering over the left side of the module, the mouse turns into the "previous" arrow; when hovering over the right side of the gallery, it turns into the "next" arrow, and when hovering over the middle, the mouse should turn into a play/pause button. On Squarespace, I'd set up the controls to do that with the following code (the "middle" mouseover effect on Squarespace is actually for thumbnails, but on the new site, it should be play/pause): .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; } I've tried downloading the main Supersized gallery module and going through that to see what code might need to be added or edited to get the gallery controls on screen, add play/pause, etc. but can't seem to figure it out. I've pasted the code for the "basic" version of the gallery below (the one included in the template) and the full version can be downloaded for free at the link I provided above, if any additional info or references are needed. If anyone can help me figure out where to look and how to achieve the results I want, it would be very, very much appreciated! Gallery 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;} Gallery JS 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); Link to comment Share on other sites More sharing options...
justsomeguy Posted January 25, 2016 Share Posted January 25, 2016 It looks like that code didn't paste correctly, there are several line breaks missing. Link to comment Share on other sites More sharing options...
thegingerkid Posted January 25, 2016 Author Share Posted January 25, 2016 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); Link to comment Share on other sites More sharing options...
thegingerkid Posted January 25, 2016 Author Share Posted January 25, 2016 Oh...hmm there are also a number of other files for the gallery in the modules folder: css_admin.css helper.php mod_supersized2.php mod_supersized2.xml And then a tmpl folder with default.php in it Should I paste the code for any of those? I found the autoplay setting in default.php so really the only things I want to do are find out how to confine the gallery to the black area rather than having it overlap (or go under) the white menu column. And add the mouseover controls for prev / next / play / pause, which seem to be mentioned all throughout the code but I don't know if they're hidden or deactivated somehow, or just in a position that's not showing up... Link to comment Share on other sites More sharing options...
dsonesuk Posted January 25, 2016 Share Posted January 25, 2016 You are trying to change fullscreen to not a fullscreen gallery, and because it is using position fixed it will not constrained by any container element it is in, but the browser viewpoint window. Ideally this should be placed in an article page and given position absolute, with content container element using position relative; this will restrict its size to the right of menu area. If you use current setup you need to set left margin to same width of menu or left property to the same, but the formular to center and position image will need adjusting also. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 25, 2016 Share Posted January 25, 2016 You should never really edit plugin core files, you tend to lose everything when update takes place. you can edit css with no problem to override plugin css. This seems to work #supersized a { background: none repeat scroll 0 0 #111; display: block; height: 100%; left: 285px; /* same distance as left menu width */ overflow: hidden; position: fixed; right: 0; /* use instead of width 100% - will go no further than right edge of browser window */ top: 0; /*width: 100%; removed by dsonesuk using 100% with left 285px will make width 100% + 285px;*/ z-index: -30; } #supersized { bottom: 0; height: 100%; left: 285px; /* same distance as left menu width */ overflow: hidden; position: fixed; right: 0; /* use instead of width 100% - will go no further than right edge of browser window */ top: 0; /*width: 100%; removed by dsonesuk using 100% with left 285px will make width 100% + 285px;*/ z-index: 1; } Link to comment Share on other sites More sharing options...
thegingerkid Posted January 25, 2016 Author Share Posted January 25, 2016 (edited) How can I express my love for you right now? Works perfectly! I spent so long playing around with the CSS but just couldn't get it...thanks so much! Now I just need to figure out the whole "make the controls visible and turn them into mouseover controls" part. I contacted the guy who released the template but he wrote back saying he doesn't know enough javascript to help....which confuses me since his notes on the template indicate that he removed a lot of stuff to keep "only the essentials" (making the controls invisible or inactive). I'd assumed that if he was the one to alter the script for the template, he'd know how to...un-alter it? But I guess not! I hope someone else will be able to help me figure that part out because it's sort of imperative... I can't have a gallery with no controls. All of the references to forward / backward / play / pause buttons seem to be there, scattered throughout the code. I just can't figure out how to make them show up on the screen and actually *work*. Edited January 25, 2016 by thegingerkid Link to comment Share on other sites More sharing options...
dsonesuk Posted January 25, 2016 Share Posted January 25, 2016 This is messing up the slideshow nav buttons remove or comment out .hide_function, .hide_thumbnails { /* height: 0 !important; left: -9999px !important; position: absolute !important; top: -10px !important;*/ } Then make sure these properties are set for these selectors as follows #thumb-tray {height:0;} #prevslide, #nextslide { top: 50%; } #prevslide {left: 295px;} Link to comment Share on other sites More sharing options...
thegingerkid Posted January 26, 2016 Author Share Posted January 26, 2016 (edited) Oh perfect, the prev / next buttons are showing up and working just fine now, thanks! It may be a long shot but is there any chance you have an idea of how to tackle the last two issues? Namely, adding a working play/pause button and then replacing all 3 controls with the mouseover effect that's on my curent site? I've been trying different things but no luck so far. For the play/pause button, I see "pauseplay" mentioned in the js file under General Elements. Code related to play_button seems to appear throughout the various files and there is a "pause on hover" option but I don't see any mention of the pause button itself. It's possible I'm just overlooking it or searching for the wrong terms. I tried to copy and adjust the prevslide CSS to add parameters for #play and #pause (even tried #pauseplay as well), but those buttons aren't showing up on the screen, let alone working as buttons, so I'm obviously way off track. As for the mouseover effects, as you saw from the link in my initial post (to the current SquareS site) plus the cursor code I pasted, that entirely gallery module is basically divided into 3 parts. The left third is the "previous" button, the middle is the "thumbnails" option and the right third is the "next" button. For the new Joomla gallery, I would want to replace the thumbnails button with play/pause, but otherwise I was hoping to get the same functionality. I guess it's some sort of overlay? It seems like I would need to hide the button icons and simultaneously adjust the parameters to make each button take up a certain percentage of the module container...is that completely wrong? I feel like it should be a relatively easy task once I find the right portion of code. I did add in the cursor code for the prev and next buttons but of course the mouseover effect only works when hovering close to each button for now, which makes it redundant. Do you have any ideas about that? Either way, thanks so much for your time and help on this; it's a huge stress relief to at least have the properly positioned gallery with the controls in place! I was just hoping to get these two final touches done, if there's an easy enough way to make it happen :-) Edited January 26, 2016 by thegingerkid Link to comment Share on other sites More sharing options...
dsonesuk Posted January 26, 2016 Share Posted January 26, 2016 Normally you would install joomla plugin, change settings to include what you require pause, play, next, prev buttons, and options like directory to look through for list of images. Then you would insert plugin shortcode into article page, or a custom module. And then you can adjust CSS to suit your needs. You need to identify the class/id along with element this plugin uses, so IF the CSS styling, JavaScript/jQuery exists for this element with this specific class/id they will accomplish there tasks. Link to comment Share on other sites More sharing options...
thegingerkid Posted January 27, 2016 Author Share Posted January 27, 2016 Well, I altered the code like so and am now getting the floating forward / backward icons I wanted:#prevslide, #nextslide {position:fixed;height:100%;top:0;opacity:0.6;z-index:20;}#prevslide {left:295px;width:58%;}#nextslide {right:10px;width:42%;}#prevslide:hover {cursor: url('img/back.png'), move;}#nextslide:hover {cursor: url('img/forward.png'), move;} However, due to the template's design, the creator set the main index.php file to include the controls on ALL pages. So I've just noticed that now that the forward / backward icons are actually visible / active, they are appearing on every single page, whether or not its a gallery. I'm not sure how to fix that and restrict the controls to gallery pages or the Supersized module only. I tried removing the prevslide and nextslide <a id> tags from index.php and placing them directly into the gallery article. I also copied the relevant code from the Supersized css file to the main css, since I assume the article is drawing directly from that. Unfortunately, nothing at all was showing when I tried that method - the gallery controls were hidden and inaccessible again. I can't imagine there's no easy way to display those controls on specific pages rather than placing them in the index.php file and forcing their presence on *every* page... Also, I've just noticed another unfortunate fact...although the solution you gave me in a previous post, for the positioning of the module, is fantastic on the average computer screen (forcing it to be centered within the black space and not underlap the menu at smaller window sizes, it creates a problem on mobile devices or when viewing the page at a very small browser size. With the default settings, the images are often right up against or slightly underlapping the menu, and they go almost halfway under the menu at certain browser window dimensions. However, the images do retain their normal size and, at small enough dimensions, like on a phone, they look as they should for a responsive design. With the new code, the images are centered on normal computer screens but when the window is sized down, or the page is viewed on a mobile device, the responsive elements seem to be in disarray. The image is tiny and pushed all the way to the right, cut off on the side, and when trying to enlarge it, the menus go all crazy and it disappears. I can certainly live without a play/pause option but I definitely can't have a gallery that looks like a mess on mobile devices, or a site that has gallery controls appearing on every page. I'm so frustrated because I thought I was done, but I just noticed those two issues and need to find a way of fixing them before moving on. Do you have any thoughts about keeping the gallery centered in the main content area, without losing the responsive elements for smaller windows? And/or would you have any suggestions for restricting the controls to the gallery pages? I'm not sure why my method didn't work, unless I overlooked something, which is possible... Thanks again; I truly appreciate your help! Link to comment Share on other sites More sharing options...
dsonesuk Posted January 27, 2016 Share Posted January 27, 2016 That is why you should enter into and article or custom module, not try to hack index file and place it manually. Placed in a article it only show when called for, and the gallery width is determined the content area that it I placed, and hopefully you have responsive template and it will adjust accordingly, by having menu appear at top as a mobile friendly menu. The article area will adjust to full width making again Mobile friendly. The module can be created to be placed in content area by using custom position for this module, its reference is then inserted in index page OR a shortcode reference can be used to insert into article page, so again the width adjusts to responsive template as before. All modules come with ability to add specific class, add custom html AND choose which page it should appear on either all or just a specific page. Link to comment Share on other sites More sharing options...
thegingerkid Posted February 3, 2016 Author Share Posted February 3, 2016 Sorry for not responding sooner - for some reason, this forum isn't sending me email updates even though I have it set to instant notification. Anyway, it was getting close but I think ultimately there are just too many glitches when attempting to use the Supersized gallery in that way, so I tried out a different gallery option. It's working as it should in most ways but I need to sort out the fit-to-screen view before it's ready to go. I'm going to post my question for that in a new thread though, because it's a totally different module and a different issue. If I can get the fit-to-screen fixed, this new gallery will be perfect and much easier to manage than the other. Thanks so much for your help! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now