Gallery 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; }

Code (markup):

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

Code (markup):

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

Code (markup):

 

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...