Hi Christian, not really sure if this is a lightbox2 issue or a page style issue. In standard page style mode lightbox2 performs well, however when selecting black/white for example lightbox2 fails to show an image, anybody else had this issue? Any ideas?

Comments

CZ’s picture

CZ commented

A first solution is a hack in the CSS files. For example in the file style_black_white.css add the code:

body.lightbox-processed div#wrapper {
  background-color: #fff !important; /* the background-color of "body" and "*" */
}
#imageContainer > #hoverNav {
 background-color: transparent !important;
}
#bottomNavClose {
  background: transparent url(../../lightbox2/images/close.gif) no-repeat scroll left center !important;
}
ludo1960’s picture

ludo1960 commented

Thanks Christian, gave that a try and strangely I get a lightbox showing with half an image. Nearly right :-)

CZ’s picture

CZ commented

The easy solution is to change all important background images in your theme to "!important". For example: "background: url(example.gif) left no-repeat !important;"

The better way (no hack). Add only this code in your theme CSS (example /sites/all/themes/mytheme/style.css)

/* code for lightbox2 */
#imageContainer > #hoverNav,
#hoverNav a {
 background-color: transparent !important;
}
#prevLink, #nextLink {
  background: transparent url(../../modules/lightbox2/images/blank.gif) no-repeat !important; /* Trick IE into showing hover */
}
#prevLink:hover, #prevLink:visited:hover, #prevLink.force_show_nav, #framePrevLink {
  background: url(../../modules/lightbox2/images/prev.gif) left 15% no-repeat !important;
}
#nextLink:hover, #nextLink:visited:hover, #nextLink.force_show_nav, #frameNextLink {
  background: url(../../modules/lightbox2/images/next.gif) right 15% no-repeat !important;
}
#prevLink:hover.force_show_nav, #prevLink:visited:hover.force_show_nav,
#framePrevLink:hover, #framePrevLink:visited:hover {
  background: url(../../modules/lightbox2/images/prev_hover.gif) left 15% no-repeat !important;
}
#nextLink:hover.force_show_nav, #nextLink:visited:hover.force_show_nav,
#frameNextLink:hover, #frameNextLink:visited:hover {
  background: url(../../modules/lightbox2/images/next_hover.gif) right 15% no-repeat !important;
}
#overlay_macff2 {
  background: transparent url(../../modules/lightbox2/images/overlay.png) repeat !important;
}
#bottomNavClose {
  background: url(../../modules/lightbox2/images/close.gif) left no-repeat !important;
}
#loadingLink {
  background: url(../../modules/lightbox2/images/loading.gif) no-repeat !important;
}
#bottomNavZoom {
  background: url(../../modules/lightbox2/images/expand.gif) no-repeat !important;
}
#bottomNavZoomOut {
  background: url(../../modules/lightbox2/images/contract.gif) no-repeat !important;
}
#lightshowPlay {
  background: url(../../modules/lightbox2/images/play.png) no-repeat !important;
}
#lightshowPause {
  background: url(../../modules/lightbox2/images/pause.png) no-repeat !important;
}

For Garland in /themes/garland/style.css: "url(../../sites/all/modules/lightbox2/...".

And so on for lightbox_lite.css and more.

This issue can be a support request because the most of us don't use "!important" for background images, and it's not so good to add all important code of moules/themes in the pagestyle module (overloaded).

ludo1960’s picture

ludo1960 commented

Thank you very much Christian, the above code sorts out the problem perfectly!
Once again thank you for your essential modules and your continued support.

Very much appreciated.

CZ’s picture

CZ commented
Category: bug » support
Status: Active » Fixed

I think, this is a solved support request.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.