NectGen Nivo slider and lightbox – not working

Resolved smit_ralph
(@smit_ralph)

10 years, 9 months ago

I hav ebeen trying to get a lightbox plugin working with the NextGen Nivo Slider, and I can’t seem to get it working! I tried several lightbox plugins everything fails…

Here’s what I did: A lightbox needs the images to be wrapped in links. In rules 221, 231, 260 and 271 of the file query.nivo.slider.js I changed:

$('<div class="nivo-slice" name="'+i+'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block !important; top:0; left:-'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px;" /></div>').css({

into:

$('<div class="nivo-slice" name="'+i+'"><a href="'+ vars.currentImage.attr('src') +'" rel="lightbox"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block !important; top:0; left:-'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px;" /></a></div>').css({

Thus wrapping the image with:

<a href="'+ vars.currentImage.attr('src') +'" rel="lightbox"></a>

This does make the images (except for the first, another annoyance) in the slideshows clickable, and it provides a normal link, a fullscreen pic in my browser. But I just can’t get the links produced in a lightbox!!! I also set the WordPress effect to ‘Lightbox’ but I guess that is overruled by the Nivo slider?

As a lightbox plugin I am now using WP Lightbox 2, but as said, it doesn’t work with any of them (Easy Fancybox, Fancybox for WordPress and jQuery Lightbox are some of the plugins I tried).

My wp_header() and wp_footer are all in place and other jQuery-based plugins are working, so that’s not it…

Anyone got a solution? THX! Any other slideshow plugin will do also, as long as it loads from NextGen.

http://wordpress.org/plugins/nextgen-nivoslider/

Viewing 2 replies - 1 through 2 (of 2 total)

Plugin Author Aldert Vaandering
(@paperfeed)

10 years, 9 months ago
From looking at what you’re doing you’re wrapping every slice with the link. If you want to have the actual images have a rel of “lightbox” you should instead alter ngg-nivoslider-widget.php around line 222.
```
if ( $imageAltText != ''
						&& preg_match( '%\A/|\Ahttp://|\Aftp://|\Amailto:%', $imageAltText ) ) {
					$use_url = true;
					$output .= "<a href=\"" . esc_attr( $imageAltText ) . "\" target=\"_blank\">";
				} elseif ( $imageDescription != ''
						&& preg_match( '%\A/|\Ahttp://|\Aftp://|\Amailto:%', $imageDescription ) ) {
					$use_url = true;
					$output .= "<a href=\"" . esc_attr( $imageDescription ) . "\" target=\"_blank\">";
				}
```
Alter this to always add an a href with a rel=”lightbox”. Like this for example (replacing the code shown above [line 222-230]):
```
$output .= "<a href=\"" . $image->imageURL . "\" rel=\"lightbox\">";
```
If I find the time I’ll code this in as an option. There’s the code to do it manually for now.
Thread Starter smit_ralph
(@smit_ralph)

10 years, 9 months ago

That’s great, Thank A Lot!!!

I ended putting your suggest code under the if / elseif part, so it will always add the link, regardless (I’m guessing?) of the title or alt text of the image. Just changing it in the
if ( $imageAltText != ''
and the
elseif ( $imageDescription != ''

Didn’t get me linked images, but putting it below works perfectly!

So again, THX!!

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘NectGen Nivo slider and lightbox – not working’ is closed to new replies.

Tags