1

I'm having problems getting the Next/Previous images to show up in lightbox 2. No other answers here about this have solved this for me so I don't know what I'm still missing.

It almost seems like the "outer container" (I think that's what it's called) that the image "sits" inside of isn't wide enough for the Next/Prev gifs to show up. The link is there; i.e., when you hover over the right left sides of the images and click, it will go to the next and previous images.

I would like for the next/previous images to be: 1. visible all the time 2. located below the image x of x text and above the Close - or - ideally centered at the bottom of the image:

Image 3 of x Prev Close Next

I don't necessarily have to use images per say, simple text links will be fine.

If I have to change something in another file besides the css, please let me know which one because I am relatively clueless when it comes to programming language. ROFL

8 Answers 8

4

What did work is to remove all instances of, "../" in the lightbox.css file. For example, change, "../img/prev.png" to "img/prev.png". Basically go through the lightbox.css file and remove the "../" where ever it occurs.

3

I had the same issue the second time I implemented Lightbox. In my case, I've changed all the occurrences where the gifs are linked from

content: url(../img/close.png) 

to

content: url(http://www.../img/close.png) 

Now it works.

2

I had the same problem, nothing worked, finally got it to show the buttons by adding<!doctype html>to the first line of your html page, just before the head

2

I think the solution is just adding a gallery name in the "rel" tag. So change this:

rel="lightbox"

into this:

rel="lightbox[gallery]"

in each of your image links. Worked for me!

0
0

None of the above suggestions worked for me.

The problem is the background URLs in lightbox.css - these URLs link to nothing. So I downloaded the images and amended the URL's in lightbox.css. Here's an example:

Default:

background: url(../images/close.png) top right no-repeat;

Amended:

background: url(../../images/lightbox2/prev.png) top right no-repeat;
0

if you go in the lightbox.min.css file you can see that this line ".lb-nav a.lb-next{width:64%;right:0;float:right;background:url(../images/next.png)". Maybe the "next.png" don't be in the default directory "images" so just change the path to your "next.png".

Example "background:url(..path/to/my/images/next.png) for the next button. Do the same for the others buttons.

[Ctlr + F] and look for "next.png", then "previous.png", then "loading.png", and finally "close.png" and put the right path so that you can see these buttons.

0

just copy arrows and close icons from lightbox2-dev (1)\lightbox2-dev\dist\images to your project and link proper. it will 100% work.

1
  • Please take a moment to read through the editing help in the help center. Formatting on Stack Overflow is different than other sites.
    – Ghost
    Aug 24, 2021 at 1:01
-2

I had The Same Problem,To Make The Arrows and Close Button Show The Key is the background URLs in lightbox.min.css Make Sure They Are Pointing to The Right Directory where the images close.png, prev.png, next.png & loading.gif are stored, for me i had To Copy them from lightbox2-master\dist\images folder to my projects images folder and made Sure that in the lightbox.min.css file, the line of code background:url(../images/close.png); background:url(../images/prev.png); background:url(../images/next.png); background:url(../images/loading.gif); points to the images folder where the Arrows and close button images are stored and each referenced respectively

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.