Gallery Floating Controls and Layout

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[CODE]/** 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;}[/CODE]

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

1 Like

I also just realized there are additional 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…

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.