Page style causes lightbox 2 failure
ludo1960 - October 17, 2009 - 16:56
| Project: | Page Style |
| Version: | 6.x-1.4 |
| Component: | Miscellaneous |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | fixed |
Jump to:
Description
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?
#1
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;
}
#2
Thanks Christian, gave that a try and strangely I get a lightbox showing with half an image. Nearly right :-)
#3
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).
#4
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.
#5
I think, this is a solved support request.