Background opacity, lightbox

[mike-se]

I have been trying to change the opacity of the lightbox popup dark overlay background.

In framework/frontend/assets/plugins/prettyphoto/js/jquery.prettyPhoto.js when I try to change any of these settings nothing changes:

$.fn.prettyPhoto = function(pp_settings) {
pp_settings = jQuery.extend({
opacity: 0.95, /* Value between 0 and 1 */

$pp_overlay
.css({
'opacity':0.95,
'height':$(document).height(),
'width':$(window).width()
})

Any help appreciated.

Topic

[Jason Bobich]

Just in general, it’s not a good idea to be editing jQuery plugins directly like this. In this case, you’re actually not editing a file that the theme uses (it’s just an un-minified reference of the original plugin file).

But beyond that, what you’re trying to change are properties that the plugin is purposely giving you control over from your call to the namespace. If you wanted to change what the theme sets up when binding prettyPhoto, you’d just re-bind it with your own properties from your javascript file.

If you’re using one of the starter child themes that came with Jump Start, you’ve already got a file /assets/js/theme.js setup for you that (a) proceeds the framework’s javascript and (b) establishes jQuery in a non-conflicting way.

So, specifically for prettyPhoto, all you need to do is copy the code from the framework’s javascript to your Child theme’s javascript file to re-bind to the proper selector:

$('a[rel^="themeblvd_lightbox"], a[rel^="featured_themeblvd_lightbox"]').prettyPhoto({
	theme: themeblvd.prettyphoto_theme, // Filter with themeblvd_js_locals
	social_tools: false, // Share icons are not compatible with IE9
	deeplinking: false,
	overlay_gallery: false,
	show_title: false
});

Note: This would go where you see the sample theme.js file says “Put any theme-specific JS here…”

And now you’ve got the call to the prettyPhoto namespace in your hands and you can manipulate any properties you want. (See prettyPhoto documentation)

So, for example you could add in opacity like this:

$('a[rel^="themeblvd_lightbox"], a[rel^="featured_themeblvd_lightbox"]').prettyPhoto({
	theme: themeblvd.prettyphoto_theme, // Filter with themeblvd_js_locals
	social_tools: false, // Share icons are not compatible with IE9
	deeplinking: false,
	overlay_gallery: false,
	show_title: false,
	opacity: 0.95
});

Does that make sense?

[mike-se]

Hi Jason!

Yes, that makes total sense, and this was all new stuff to me, thanks!
It still doesnt seem to change the background opacity on the site though.

[Jason Bobich]

What site are you doing this at? Is this one? http://www.studiojemi.com/bonuspappan/

If so, you don’t have anything in your theme.js? Maybe a caching thing?

http://www.studiojemi.com/wp-content/themes/studiojemi/assets/js/theme.js

[mike-se]

Nope, It’s http://ralfturander.com/wp-content/themes/ralfturander/assets/js/theme.js and It’s not the cache.
I set the opacity to 1 just to see if anything happens and it doesnt.

Thanks

[Jason Bobich]

I think it has something to do with how you’re copy/pasting this code. It looks like you’ve put rich-text quotation marks into the the javascript, opposed to actual quotation marks — "

[mike-se]

Thanks! Your absolutely correct. My bad 😉

[Author]

Replies