Further to http://www.zen-cart.com/forum/showpo...postcount=2703
here is my solution to move the Prev/Next buttons clear above image and then restore truncated bottom of image.
includes\classes\zen_lightbox\autoload_default.php
Line 23 was
<?php if (ZEN_LIGHTBOX_CLOSE_IMAGE == 'true' || ZEN_LIGHTBOX_PREV_NEXT == 'true') { echo '<style> #lbPrevLink, #lbNextLink {display: block; position: absolute; top: 0; width: 63px; height:32px!important; outline: none;} #lbNextLink {right: 0; background: transparent url(images/zen_lightbox/nextlabel.gif) no-repeat 100% 15%;} #lbPrevLink {left: 0; background: transparent url(images/zen_lightbox/prevlabel.gif) no-repeat 0 15%; } </style>';}?>
now (note the minus sign)
<?php if (ZEN_LIGHTBOX_CLOSE_IMAGE == 'true' || ZEN_LIGHTBOX_PREV_NEXT == 'true') { echo '<style> #lbPrevLink, #lbNextLink {display: block; position: absolute; top: -32px; width: 63px; height:32px!important; outline: none;} #lbNextLink {right: 0; background: transparent url(images/zen_lightbox/nextlabel.gif) no-repeat 100% 15%;} #lbPrevLink {left: 0; background: transparent url(images/zen_lightbox/prevlabel.gif) no-repeat 0 15%; } </style>';}?>
includes\templates\YourTemplate\css\stylesheet_zen_lightbox.css
was
#lbImage {
position: absolute;
left: 0;
top: 0;
border: 10px solid #fff;
background-repeat: no-repeat;
}
#lbPrevLink, #lbNextLink {
display: block;
position: absolute;
top: 0;
width: 50%;
outline: none;
}
now
#lbImage {
position: absolute;
left: 0;
top: 22px; /* 0 */ /* May need to be increased to 32px to clear border thickness, if coloured differently. */
border: 10px solid #fff;
background-repeat: no-repeat;
padding-bottom:12px; /* added to restore bottom of image */
}
#lbPrevLink, #lbNextLink {
display: block;
position: absolute;
top: -32px; /* 0 */ /* Note the minus sign */
width: 50%;
outline: none;
}
Hope this helps.
Bookmarks