We’ve found an issue with the smooth gallery… when you click to enlarge a frame, it opens on top of our menu system… and the menu is interfering with the viewing of the image… the page url is: http://www.fbcfamilylife.org/xstudies/faq. This page is hidden in menu right now… it’s part of a section of new development…

Mary Beth,
This is due to a z-index problem between smoothgallery and the menus on your site. The z-index CSS property is used to specify how elements stack on top of each other. An element with a higher z-index overlaps one with a lower z-index.

In menu.css, your menus are defined with a z-index of 1000. I see several other places where its defined in 900-ish range but the one pasted below seems to be the one causing problems.


WIthin SmoothGallery, all of the lightbox effects have a z-index of 15-ish. This means that menu system is at a higher level than the lightbox and causes the problem that you see.

I'm not sure which I'd recommend changing. The menu is of course very critical on the site and so I'd be careful with modifications there but it feels like the one that should change. The SmoothGallery isn't as critical but it also feels like a more extensive change.

Thanks,
Jeff

Can I change the z-index on smooth gallery somewhere?

Mary Beth,
You'll need to provide custom CSS in order to do this. From looking at SmoothGallery, these should be the steps to get it done (untested, but looks pretty straightforward).

1. The CSS file for the lightbox is at typo3conf/ext/rgsmoothgallery/res/css/slightbox.css. Copy this file into fileadmin/ext-templates/slightbox.css or the location of your choosing.
2. Edit the CSS file, updating all of the z-index definitions in the file. They're all in 10-20 range so if you update them to be 910-920 (but still the same relative to one another) you should be fine.
3. Point rgsmoothgallery to the new CSS file by adding the following Typoscript to the setup section


I think that should take care of it. Let us know if you have any questions.

Thanks,
Jeff

Jeff, I made the changes you specified by copying the slightbox.css file to a new location (fileadmin/templates ) and adding a '9' in front of all the z-index numbers ( e.g. 15 became 915, 20 became 920 etc).
This script was already in the Setup for the page:

plugin.tx_rgsmoothgallery_pi1 { pathToJdgalleryCSS =
EXT:rgsmoothgallery/res/css/jd.galleryColor.css pathToSlightboxCSS =
EXT:rgsmoothgallery/res/css/slightboxColor.css}

I don't know if the new script will conflict with any of this...

New script = plugin.tx_rgsmoothgallery_pi1.pathToSlightboxCSS = fileadmin/templates/slightbox.css

I am also wondering if there is a way to add CSS script somewhere to make the SmoothGallery centered on the column/page... it is floating to left justify...

Mary Beth,
Can you double check your Typoscript settings? From what I can see, your custom CSS file is not being included but wen I use the Typoscript locally, it is being included. I would comment out those lines that were originally there by putting a pound sign (#) in front of each of them.

Thanks,
Jeff