Nextgen fancybox gallery background opacity css

Please look at this Nextgen gallery

http://steveempson.com/gallery-1/

When I thumbnail is clicked, how do I change the colour and opacity of the background?

I would like it to be black and opaque.

Thanks
mattybrownAsked:
Who is Participating?
 
COBOLdinosaurConnect With a Mentor Commented:
I doubt that it will work in any stylesheet without breaking the fancy box.  the style is being generated inline from script.  Likely the fancybox-overlay does not even exist until the thumb is clck to bring up the fancy box.  So if you want to override what the author of the fancybox plugin decided the default should be, you will have to fine the code in the jquery library where the line is generated and change it.  

If it is properly written, you will not find the actual literal values, but rather a set of variables that you will have to track down. Be careful what you change, because you can easily break other things.

Cd&
0
 
COBOLdinosaurCommented:
Which background? The image; the fancybox; the page itself?

Cd&
0
 
mattybrownAuthor Commented:
The fancybox backgound - the semi-opaque grey that appears when you click a thumbnail and it enlarges
0
Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

 
COBOLdinosaurCommented:
It is done with this line of code:

<div id="fancybox-overlay" style="background-color: rgb(119, 119, 119); opacity: 0.7; cursor: pointer; height: 1101px; display: block;"></div>

Open in new window


I expect it is generated from script, so you will need to find where it is being generated in script and modify the background-color.

Cd&
0
 
mattybrownAuthor Commented:
Using fire bug, I can identify what CSS is affecting the background:

element.style :
background-color: #777;
opacity: 0.7;
cursor: pointer;
height: 1093px;
display: block;

However, I can't work out which style sheet this should go in.
0
 
mattybrownAuthor Commented:
Yes you were right. Thank you. There is no style sheet as such. The overlay is controlled by the js file:

wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/lightbox/static/fancybox/ jquery.fancybox-1.3.4.pack.js

Search for the hex to find the controls:

overlayOpacity:1.0,overlayColor:"#444"
0
 
COBOLdinosaurCommented:
Be very careful making changes in the library code and do a full test to make sure you do not have any undesirable side effects.

Cd&
0
 
COBOLdinosaurCommented:
Hmmm.... B?  I guess for an A I would have had to do your work and change the code for you.  

The question sat without a response for a day.  I came to it because EE sent me an email and asked me to look at it.  Maybe I should have ignored it like everyone else, because I could have been sitting in the pub with a pint instead of trying to help you.

Cd&
0
 
mattybrownAuthor Commented:
Well yes, to get an A that's more or less exactly what it says in the EE guidelines - you need to provide a full and comprehensive response that fixes the problem with little or no additional work. Your reply pointed me in the right direction, but I still had to spend an hour or so digging around in wp trying to find the right  js file (with more comprehensive advice from the wp support board I might add) and then find the correct bit of code by trial and error. I am not an expert which is why I pay a subscription to experts exchange. I followed the expert exchange guidelines by giving you GOOD. If you have a complaint, suggest you raise the issue with EE and ask them to review. Happy to up to an A if the concur.
0
 
COBOLdinosaurCommented:
Well there is a thing called reasonable expectations.  At my normal billing rate the monthly fee you pay would buy about 7 minutes of my time.  Based on my time on the site, I pay more to be here helping in a day I exceed what you pay for a year.

We are not here to do the work for you.  If you need someone to do the detailed grunt work then you should be hiring a young developer who needs the experience.  The question sat a day before I responded because every Expert who looked at it realized the full solution was well beyond what they are willing to do as an unpaid volunteer.  I only responded because I don't like to see questions being ignored; my mistake.

Cd&
0
 
mattybrownAuthor Commented:
Please follow up with ee. I am following their guidelines, not my own. As I said, I am quite happy to up your response to an a grade if they feel it appropriate.
0
 
COBOLdinosaurCommented:
As a Topic Advisor, part of my role is to do those kinds of reviews.  When an admin or moderator needs in the Web Development topics, I am one of the people they ask to do a review. I have the authority and tools to just change the grade if I want.  I could even do it quietly without a notification going out.

The grade itself is not really the issue but your interpretation of the guidelines indicates rather high expectations.  "...fixes the problem with little or no additional work. ... " seems to be problematic.  little or no additional work does not mean it is the experts job to take over the task.  The digging through the code and trial and error testing was always your part of the collaboration.  As support on the WP boards; it is not uncommon to refer questioners to product support sites and forums when the y need product specific help.

So it really comes down to the division of responsibilities in the collaboration.  Experts are not on the site to take over task or projects and do the work.  We are here to point in the right direction; answer specific questions; and help you understand the process of getting to a solution.  You still have to do the real work.  We are a resource, not a job board.  When we have a ready solution, we may go beyond the normal guidance, but not doing that does not mean we ar going to invest hours of detail work that is not part of "answering" or "providing a solution".
0
All Courses

From novice to tech pro — start learning today.