Solved

Nextgen fancybox gallery background opacity css

Posted on 2013-11-20
12
2,222 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
 

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

I want to start by talking about the use of plug-ins for WordPress. I started a web-site for a company I was working for a few years ago; I had extremely basic knowledge of HTML. I am a Graphic Designer by trade so I invited the opportunity as a cha…
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 properly insert a Vimeo Video into a WordPress site or Blog. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp…
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…

895 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now