Solved

Nextgen fancybox gallery background opacity css

Posted on 2013-11-20
12
2,293 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 

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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Did you use a default hosting installation of wordpress with the intention of it being your actual site?  Maybe you’ve installed it as a Blog to your current site and recently converted it to be the main site and do away with the old .htm pages.  An…
Transferring a wordpress site from a host or local dev server to another host can be a pain. So I've included my steps on how I have accomplished this task. Steps include an assumption that you have Cpanel access or Ftp access.. If you do not hav…
This video teaches viewers how to create their own website using cPanel and Wordpress. Tutorial walks users through how to set up their own domain name from tools like Domain Registrar, Hosting Account, and Wordpress. More specifically, the order in…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

827 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