navigation button not appeared in using lightbox2

[chitrag]

Hello,

 

I am trying to use lightbox2 in my site http://kalseeecolodge.com/Photo_Gallery.phpbut navigation buttons are not appeared. how to fix it ?

 

css file is attached

/* Preload images */body:after {  content: url(../lightbox/close.png) url(../lightbox/loading.gif) url(../lightbox/prev.png) url(../lightbox/next.png);  display: none;}.lightboxOverlay {  position: absolute;  top: 0;  left: 0;  z-index: 9999;  background-color: black;  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);  opacity: 0.8;  display: none;}.lightbox {  position: absolute;  left: 0;  width: 100%;  z-index: 10000;  text-align: center;  line-height: 0;  font-weight: normal;}.lightbox .lb-image {  display: block;  height: auto;  max-width: inherit;  -webkit-border-radius: 3px;  -moz-border-radius: 3px;  -ms-border-radius: 3px;  -o-border-radius: 3px;  border-radius: 3px;}.lightbox a img {  border: none;}.lb-outerContainer {  position: relative;  background-color: white;  *zoom: 1;  width: 250px;  height: 250px;  margin: 0 auto;  -webkit-border-radius: 4px;  -moz-border-radius: 4px;  -ms-border-radius: 4px;  -o-border-radius: 4px;  border-radius: 4px;}.lb-outerContainer:after {  content: "";  display: table;  clear: both;}.lb-container {  padding: 4px;}.lb-loader {  position: absolute;  top: 43%;  left: 0;  height: 25%;  width: 100%;  text-align: center;  line-height: 0;}.lb-cancel {  display: block;  width: 32px;  height: 32px;  margin: 0 auto;  background: url(../lightbox/loading.gif) no-repeat;}.lb-nav {  position: absolute;  top: 0;  left: 0;  height: 100%;  width: 100%;  z-index: 10;}.lb-container > .nav {  left: 0;}.lb-nav a {  outline: none;  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');}.lb-prev, .lb-next {  height: 100%;  cursor: pointer;  display: block;}.lb-nav a.lb-prev {  width: 34%;  left: 0;  float: left;  background: url(../lightbox/prev.png) left 48% no-repeat;  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);  opacity: 0;  -webkit-transition: opacity 0.6s;  -moz-transition: opacity 0.6s;  -o-transition: opacity 0.6s;  transition: opacity 0.6s;}.lb-nav a.lb-prev:hover {  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);  opacity: 1;}.lb-nav a.lb-next {  width: 64%;  right: 0;  float: right;  background: url(../lightbox/next.png) right 48% no-repeat;  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);  opacity: 0;  -webkit-transition: opacity 0.6s;  -moz-transition: opacity 0.6s;  -o-transition: opacity 0.6s;  transition: opacity 0.6s;}.lb-nav a.lb-next:hover {  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);  opacity: 1;}.lb-dataContainer {  margin: 0 auto;  padding-top: 5px;  *zoom: 1;  width: 100%;  -moz-border-radius-bottomleft: 4px;  -webkit-border-bottom-left-radius: 4px;  border-bottom-left-radius: 4px;  -moz-border-radius-bottomright: 4px;  -webkit-border-bottom-right-radius: 4px;  border-bottom-right-radius: 4px;}.lb-dataContainer:after {  content: "";  display: table;  clear: both;}.lb-data {  padding: 0 4px;  color: #ccc;}.lb-data .lb-details {  width: 85%;  float: left;  text-align: left;  line-height: 1.1em;}.lb-data .lb-caption {  font-size: 13px;  font-weight: bold;  line-height: 1em;}.lb-data .lb-number {  display: block;  clear: left;  padding-bottom: 1em;  font-size: 12px;  color: #999999;}.lb-data .lb-close {  display: block;  float: right;  width: 30px;  height: 30px;  background: url(../lightbox/close.png) top right no-repeat;  text-align: right;  outline: none;  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);  opacity: 0.7;  -webkit-transition: opacity 0.2s;  -moz-transition: opacity 0.2s;  -o-transition: opacity 0.2s;  transition: opacity 0.2s;}.lb-data .lb-close:hover {  cursor: pointer;  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);  opacity: 1;}

[dsonesuk]

They are not showing because relative background image path is wrong

 

background: url("../lightbox/next.png")

 

 

try

 

background: url("/lightbox/next.png")

 

 

'..' forces it outside current folder 'css' it is now in 'lightbox' folder, but '/lightbox' forces it to look in subfolder 'lightbox' of current folder which is 'lightbox' which does not exist! it is looking for images in

 

www.kalseeecolodge.com/lightbox/lightbox/next.png

 

EDIT if the links are how lightbox had set the links to css and images

 

if you move the lightbox css folder outside of lightbox folder your current css will work

root folder

-lightbox

-css (originally in lightbox folder)

 

but you will have change any current link from

 

<link rel="stylesheet" href="http://www.kalseeecolodge.com/lightbox/css/lightbox.css">

 

to

 

<link rel="stylesheet" href="http://www.kalseeecolodge.com/css/lightbox.css">

Edited July 18, 2015 by dsonesuk

[chitrag]

Hi,

 

Thank you so much. That worked perfectly. You are great GURU !

 

Other thing this lightbox does not work in Internet Explorer. What can be the reason ?

[dsonesuk]

Are you using current version? Since IE is a sh@t of a browser, lightbox should allow for its sh@^^yness and included fixes, check its forum, IE typical crapiness with fixes discussed herehttps://github.com/lokesh/lightbox2/issues/63

[chitrag]

I m using IE 8 when I open pages with lightbox I got these kind of error message as in attached file

Edited July 19, 2015 by chitrag

[dsonesuk]

I'm not going to help for IE8, there is no reason to be using IE8, the problem is YOU STILL! using IE8, not lightbox.

Edited July 21, 2015 by dsonesuk