Support » Plugin: RPS Image Gallery » [Plugin: RPS Image Gallery] Slideshow div appearing below Twenty Eleven Header

  • Resolved kuemerle5


    Just as the title says. I have a header image enabled and the div for the slideshow appears beneath both the header image and header menu. This happens in Firefox 14 and Chrome 21.

    Also, just another small thing: the slideshow in Chrome is always centered vertically on the screen in Chrome but not Firefox. As in, if I scroll down, the slideshow moves in Chrome but not Firefox.

    Hopefully, this helps in some way and great work on the plugins!

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author redpixelstudios


    Sorry that you are having trouble with the gallery display. It would be helpful if you could provide the URL of the page in question. We would be happy to look into the issue for you upon receipt of that information.

    Sure, absolutely! Here it is:

    And here’s the shortcode for the gallery: [gallery link="file" columns="4" fb_title_position="outside" fb_transition_in="elastic" fb_transition_out="elastic"]

    Thanks for the quick response!

    Plugin Author redpixelstudios


    No problem at all. It really helps to get feedback like yours considering how difficult it is to test the plugin in multiple environments, so thanks to you as well!

    We have created a maintenance release of RPS Image Gallery (v1.2.3) that should take care of the issue. It seems that the problem was related to the fact that the stacking priority (or z-index) of the header in the Twenty Eleven theme was much greater than the default settings for the fancybox overlay and wrap.

    We have added the appropriate CSS to RPS Image Gallery to increase the priority of the fancybox overlay and wrap elements to the point where they should appear above the elements in most themes, including Twenty Eleven, while staying tucked underneath the admin toolbar. The solution has been tested in multiple browsers and cross-platform, so we are fairly confident that it will meet your needs.

    Unfortunately, we were unable to replicate the vertical centering issue in Firefox 13.0.1 (the current stable release) running on Mac OS or Windows 7. It seems that you may be running a pre-release version of Firefox, and that, perhaps, could be the issue. Please let us know if we can be of further assistance.

    Plugin Author redpixelstudios


    Though it was omitted from the last post, we did also test the vertical centering issue in Google Chrome 20.0. Again it seems that you perhaps have a pre-release version of this browser as well or are on a different platform than our testing environments. Perhaps the vertical centering issue is caused by certain combinations of the browser viewport size versus the fancybox wrap size. Please provide additional information that you deem pertinent should you wish us to investigate further.

    Awesome, changing the z-index fixed the div being properly situated on the page!

    Ok, so I did a little digging and what I’m looking at is something in the Fancybox option ‘centerOnScroll’ Here is the code I get from Firefox:

    <script type="text/javascript">
    			( function( $, window ) {
    			var document = window.document;
    			$( document ).ready( function() {
    				    	'titleShow' : true,
    						'transitionIn' : 'elastic',
    						'transitionOut' : 'elastic',
    						'titlePosition' : 'outside',
    						'speedIn' : 300,
    						'speedOut' : 300,
    						'showCloseButton' : true,
    						// not editable via shortcode
    						'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
    							return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
    						'cyclic' : true,
    						'centerOnScroll' : true
    			} )( jQuery, window );

    Cloudflare was sort of effing things up (half of the JS above was commented out from minification including the option for centerOnScroll), so I disabled it and that is the generated Javascript from your gallery plugin I assume. Since the slideshow is still not centered in Firefox (only Chrome), I assume this is an issue with Fancybox. Hopefully this helps or at least specifies a known issue.

    Oh! Something new to report. You were correct in your last post about the viewing area having to do with the centerOnScroll.

    FF14 1366×768: No scroll
    FF14 1280×1024: Scrolls
    Chrome 1366×768: No scroll
    Chrome 1280×1024: Scrolls
    Chrome w/ dev console opened @ 1280×768: No scroll

    I wonder why Fancybox would exhibit that type of behavior?

    Pardon my spam, I have one last question. It seems Fancybox has continued active development ( & and they are now on a v2 branch. Do you plan on updating to this version anytime in the near future or keep with the known working 1.3.4 version?

    Plugin Author redpixelstudios


    We have been in contact with the developer of fancybox and have approval to include the new version with RPS Image Gallery (along with appropriate license information). We plan on doing so in the near future.

    We will look further into the center on scroll behavior to see if the image to viewport ratio could be an the cause. Regardless, the information that you have provided will be helpful in determining next steps.

    Awesome! Glad I could help and I’ll be looking forward to updates to this great plugin!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘[Plugin: RPS Image Gallery] Slideshow div appearing below Twenty Eleven Header’ is closed to new replies.