Yet another thread of disabling the lightbox

[Shashahan]

Hi,

first, let me explain my setup:
I’m using Justified Image Grid from codecanyon.net in conjunction with NextGen Gallery and FooBox as my pictures provider in WordPress.

My frontpage is configured to display first a set of pictures and then the newest three or six blog posts in masonry style.

Problem is located in the pictures part. It activates 2 different lightboxes. First Foobox and behind the built in lightbox.
If i deactivate the lightbox completly as described the blog post part stop working.

Is there a way to stop the lightbox only for pictures?

Right now, my site is in maintenance mode but i can provide credentials via email.

Best Regards,
Shashahan

• This topic was modified 10 years, 6 months ago by Shashahan. Reason: Links are not displayed. Removed them and changed the description of my problem a bit

[Devin]

Hi Shashahan!

If you give any image link the noLightbox class it will not open using the themes prettyPhoto lightbox.

See: http://kriesi.at/documentation/enfold/prevent-image-or-link-from-opening-in-a-lightbox/

Cheers!
Devin

[Shashahan]

Hi Devin,

thank you for your answer.
I’m sorry, it didn’t.

Below, you will find the html source code. Justified Image Grid picked up the class “noLightbox” and put it in a-tag. And yet it has the overlay and will open in the standard lightbox behind foobox.

Short code used in WordPress:
[jig title_field=off caption_field=off caption=off mobile_caption=off outer link_title_field=off img_alt_field=off link_class=noLighbox ng_gallery=13]

HTML:

<div class="jig-imageContainer">
	<div class="jig-overflow" style="width: 146px; height: 200px; opacity: 1;">
		<a class="jig-link noLighbox fbx-link jig-loaded" rel="gallery[1]" href="http://16qm.de/wp-content/gallery/portfolio/0001-10.jpg" style="position: relative; overflow: hidden; display: block;">
			<img src="http://16qm.de/wp-content/plugins/justified-image-grid/timthumb.php?src=http://16qm.de/wp-content/gallery/portfolio/0001-10.jpg&h=240&w=180&q=90&f=.jpg" width="150" height="200" style="width: 150px; height: 200px; margin-left: -2px; margin-top: 0px;" class="">
			<canvas width="150" height="200" title="" class="jig-pixastic" tabindex="-1" id="" style="width: 150px; height: 200px; margin-left: -2px; margin-top: 0px; display: block; opacity: 1;"></canvas>
			<div class="jig-overlay-wrapper" style="display: none;">
				<div class="jig-overlay"></div>
			</div>
			<div class="jig-border"></div>
			<span class="image-overlay overlay-type-image" style="left: -7px; top: 0px; overflow: hidden; display: block; height: 200px; width: 160px;">
				<span class="image-overlay-inside"></span>
			</span>
		</a>
	</div>
</div>

Best Regards,
Olaf

• This reply was modified 10 years, 6 months ago by Shashahan.

[Shashahan]

Hi,

i found a way to make it work =)
It contains the editing of avia.js at line 61 where you have to change

//activates the prettyphoto lightbox
$(container).avia_activate_lightbox({callback:'avia_lightbox_callback'});

to

//activates the prettyphoto lightbox
//$(container).avia_activate_lightbox({callback:'avia_lightbox_callback'});

and in the Quick CSS section of the theme i have the following CSS:
.image-overlay{ background-color: transparent; display: none !important; }

Now it works. Maybe this help future customers of this great theme.
Thank you. =)

[Devin]

Hey!

You can also correct the spelling in your code:
<a class="jig-link noLighbox
to
<a class="jig-link noLightbox

Modifying the js function is the theme wide method as well.

Cheers!
Devin

[Shashahan]

*FACE->DESK* Sometimes … i could punch myself for my own stupidity.
You’re totally right, this works as intended. I tried it, changed avia.js back to the original state and deleted the entry in the quick.css section.
Thank you for your *WORKING* answer in the first post. ;)

Thank you and have a nive day =)
Olaf

[Dude]

Hey!

Glad Devin could help you :)

Regards,
Peter

[Author]

Posts