Ich verwende Typo3 3.8.1 und perfectlightbox 2 2.2.2
static Template im TS-Setup eingebunden.
und in TS-Constants:
plugin.perfectlightbox.cssPath=fileadmin/templates/de_slightbox.css
de_slightbox.css:
/* Shared styles for lightbox & slimbox*/
#overlay {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000;
/*cursor:pointer;*/
z-index:90;
}
#prevLink, #nextLink {
display:block;
position:absolute;
top:0;
width:33%;
height:100%;
background:transparent url(../gallery/ext_img/blank.gif) no-repeat; /* Trick IE into showing hover */
}
#prevLink {
left:0;
float:left;
}
#nextLink {
right:0;
float:right;
}
#prevLink:hover {
/* Edit here for a different image!*/
background:transparent url(../gallery/ext_img/prev.gif) no-repeat 0% 15%;
}
#nextLink:hover {
/* Edit here for a different image!*/
background:transparent url(../gallery/ext_img/next.gif) no-repeat 100% 15%;
}
#playLink,#pauseLink,#saveLink,#closeLink {
display:block;
float:right;
/* Set these two to the actual dimensions of your images! If they differ in size you have to set them seperately!*/
width:26px;
height:26px;
/* End*/
margin-left:1.0em;
}
#playLink {
/* Edit here for a different image! Add width & height here if needed*/
background:transparent url(../gallery/ext_img/play.gif) no-repeat center;
}
#pauseLink {
/* Edit here for a different image! Add width & height here if needed*/
background:transparent url(../gallery/ext_img/pause.gif) no-repeat center;
}
#saveLink {
/* Edit here for a different image! Add width & height here if needed*/
background:transparent url(../gallery/ext_img/save.gif) no-repeat center;
}
#closeLink {
/* Edit here for a different image! Add width & height here if needed*/
background:transparent url(../gallery/ext_img/close.gif) no-repeat center;
/*clear:right;
float:right;*/
}
/* Slimbox-only*/
#sbCenter, #sbBottomContainer {
position:absolute;
left:50%;
overflow:hidden;
background-color:#fff;
z-index:100;
}
#sbCenter a, #sbBottomContainer a {
text-decoration:none;
border:none;
outline:none;
}
.sbLoading {
background:#fff url(../gallery/ext_img/loading.gif) no-repeat center;
}
#sbImage {
position:absolute;
left:0;
top:0;
border:10px solid #fff;
background-repeat:no-repeat;
}
#sbBottom {
font-family:tahoma, arial, sans-serif;
font-size:11px;
color:#666;
line-height:1.4em;
text-align:left;
padding:0 10px 10px 10px;
}
#sbCaption {
width:66%;
font-weight:bold;
margin-bottom:0.1em;
}
#sbNumber {
width:66%;
margin-bottom:0.1em;
}
#sbPresent {
width:66%;
margin-bottom:0.1em;
}
#sbPresent a {
color:#666;
margin-right:1.0em;
}
#sbPresent a.act {
font-weight:bold;
color:#fff;
background:#777;
border-right:0.2em solid #777;
border-bottom:0.1em solid #777;
border-left:0.4em solid #777;
}
/* Lightbox-only*/
#lbLightbox {
position:absolute;
left:0;
width:100%;
z-index:100;
text-align:center;
line-height:0;
}
#lbLightbox #closeLink {
margin-bottom:10px;
}
#lbLightbox a {
text-decoration:none;
border:none;
outline:none;
}
#lbLightbox gallery/ext_img {
border:none;
}
#lbOuterImageContainer {
position:relative;
background-color:#fff;
width:250px;
height:250px;
margin:0 auto;
}
#lbImageContainer {
padding:10px;
}
#lbLoading {
position:absolute;
z-index:110;
top:40%;
left:0%;
height:25%;
width:100%;
text-align:center;
line-height:0;
background:#fff url(../gallery/ext_img/loading.gif) no-repeat center;
}
#lbHoverNav {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:10;
}
#lbImageContainer>#lbHoverNav {
left:0;
}
#lbImageDataContainer {
font-family:tahoma, arial, sans-serif;
font-size:11px;
background-color:#fff;
margin:0 auto;
line-height:1.4em;
overflow:auto;
width:100%;
}
#lbImageData {
padding:0 10px;
color:#666;
}
#lbImageDetails {
width:66%;
float:left;
text-align:left;
padding-bottom:10px;
}
#lbCaption {
display:block;
font-weight:bold;
margin-bottom:0.1em;
}
#lbNumber {
display:block;
margin-bottom:0.1em;
}
#lbPresent {
display:block;
margin-bottom:0.1em;
}
#lbPresent a {
color:#666;
margin-right:1.0em;
}
#lbPresent a.act {
font-weight:bold;
color:#fff;
background:#777;
border-right:0.2em solid #777;
border-bottom:0.1em solid #777;
border-left:0.4em solid #777;
}
Alle Images liegen in fileadmin/gallery/ext_img.
Ich kann habe beim Content Element Bild, Klick-Vergrössern, Lightbox und ausgewählt.
Doch das Einzige was passiert, ist das Klick-Vergrössern.
Und im Browser ein JS_Error bei lighbox-packed.js:
Object.extend is not a function