Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Nextgen fancybox gallery background opacity css

Posted on 2013-11-20
12
Medium Priority
?
2,495 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Understanding Web Applications

Without even knowing it, most of us are using web applications on a daily basis. Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We often confuse these web applications tools for websites.  So, what is the difference?

 

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

Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

Question has a verified solution.

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

What's this? As a volunteer Page Editor for Experts-Exchange.com, I have noticed that many authors also have blogs, and pull articles from their blogs to post at Experts-Exchange. I appreciate each author sharing their blog content with our site …
I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
Suggested Courses

721 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