Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Nextgen fancybox gallery background opacity css

Posted on 2013-11-20
12
Medium Priority
?
2,545 Views
Last Modified: 2013-11-23
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
0
Comment
Question by:mattybrown
  • 7
  • 5
12 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39666225
Which background? The image; the fancybox; the page itself?

Cd&
0
 

Author Comment

by:mattybrown
ID: 39667449
The fancybox backgound - the semi-opaque grey that appears when you click a thumbnail and it enlarges
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39669188
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
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 

Author Comment

by:mattybrown
ID: 39669379
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
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 1500 total points
ID: 39669551
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
 

Author Comment

by:mattybrown
ID: 39671278
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39671455
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39671464
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
 

Author Comment

by:mattybrown
ID: 39671606
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39671999
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
 

Author Comment

by:mattybrown
ID: 39672021
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39672100
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

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

WordPress is constantly evolving, and with each evolution appears to get better and better.  One of the big drawbacks prior to version 3 was that there was no way to be able to set up a custom menu from the backend. The Old Way Adding menus is…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
The purpose of this video is to demonstrate how to manually back up a WordPress Database. This will be demonstrated using a Windows 8 PC. The Host used will be IPage.com Log into your Hosting account. IPage will be used for demonstration : Locat…
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…

879 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question