[rofl.kartoffel]

Guten Abend,

ich habe bereits im CMS Herstellerforum um Hilfe gebeten leider scheint dort recht wenig los zu sein und da Ihr mir allgemein auch schneller und kompetenter erscheint wollte ich hier erneut mein "Glück" versuchen.

Wie bereits erwähnt versuche ich die Slimbox, ein Klon der sogenannten Lightbox-Technik, in meine CMS Seite zu integrieren.
Slimbox Herstellerlink: PHP Blogger: Lightbox Alternative Slimbox - Ein PHP Blog auf deutsch ... e-slimbox/
Quellcode der Seite um die Slimbox einzusetzen:

<p><strong>Ein einzelnes Bild:</strong><br /><a href="./includes/upload/image-1.jpg" rel="lightbox"><img src="./includes/upload/thumb-1.jpg" width="100" height="40" alt="" /></a></p>
s<p><strong>Eine Galerie:</strong> (Mit Title-Tags)<br /><a href="./includes/upload/image-2.jpg" rel="lightbox[galerie]" title="Ein schickes Bild"><img src="./includes/upload/thumb-1.jpg" width="100" height="40" alt="" /></a>
<a href="./includes/upload/image-3.jpg" rel="lightbox[galerie]" title="Super Ansicht!"><img src="./includes/upload/thumb-1.jpg" width="100" height="40" alt="" /></a></p>

So sieht der .css teil aus:

#lbOverlay {
   position: absolute;
   z-index: 9999;
   left: 0;
   width: 100%;
   background-color: #000;
   cursor: pointer;
}

#lbCenter, #lbBottomContainer {
   position: absolute;
   z-index: 9999;
   left: 50%;
   overflow: hidden;
   background-color: #fff;
}

.lbLoading {
   background: #fff url(./images/loading.gif) no-repeat center;
}

#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;
}

#lbPrevLink {
   left: 0;
}

#lbPrevLink:hover {
   background: transparent url(./images/prevlabel.gif) no-repeat 0% 15%;
}

#lbNextLink {
   right: 0;
}

#lbNextLink:hover {
   background: transparent url(./images/nextlabel.gif) no-repeat 100% 15%;
}

#lbBottom {
   font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
   font-size: 10px;
   color: #666;
   line-height: 1.4em;
   text-align: left;
   border: 10px solid #fff;
   border-top-style: none;
}

#lbCloseLink {
   display: block;
   float: right;
   width: 113px;
   height: 22px;
   background: transparent url(./images/closelabel.gif) no-repeat center;
   margin: 5px 0;
   outline: none;
}

#lbCaption, #lbNumber {
   margin-right: 71px;
}

#lbCaption {
   font-weight: bold;
}

Anhand der Dateien im Download der Slimbox solltet ihr ja hoffentlich erkennen können, wo es bei mir hakt?
Der "js" Ordner liegt bei mir im hauptverzeichnis, wo auch die index.php und die anderen cms unterordner sind.

Die Grafiken werden mir korrekt angezeigt, jedoch fehlt der lightbox/slimbox effekt beim anklicken der thumbnails. Also das alles rund um die aufgehende "Lightbox" abgedunkelt wird etc.

Habt ihr vlt. ne lösung?

[Rico]

Möglicherweise hast du die Mootools vergessen einzubinden, denn Slimbox setzt auf diesen auf. Das würde dann etwa so aussehen :

<script type="text/javascript" src="../js/mootools/mootools.js"></script>
<script type="text/javascript" src="../js/slimbox/slimbox.js"></script>

Am besten du schaust du dir die Originalseite von Slimbox - digitalia.be · Slimbox, the ultimate lightweight Lightbox clone an. Dort ist auch beschrieben, wie du Mootools konfigurieren musst.

Gruss
Erich