Wie funktioniert dieser Effekt (inside)

[Sebastian]

Hallo liebe Kollegen,

Link: http://wow-en.curse-gaming.com/files/details/111/scrollingcombattext/

Auf der verlinkten Seite gibt es im unteren Bereich Screenshots. Wenn man diese anklickt öffnet sich der vergrösserte Screenshot und der Hintergrund der Seite wird dunkler. Dazu habe ich in den CSS Dateien rumgesucht und bin auch folgende Stile gestoßen:

#kBox {
 position: absolute;
 background: #ffffff;
 z-index: 102;
 color:#000000;
 display:none;
 border: 4px solid #525252;
 text-align:left;
}

#kBoxIFrame {
 border: none;
 z-index:101;
 top: 0px;
 left: 0px;
 background-color:#000;
 filter:alpha(opacity=0);
 -moz-opacity: 0.0;
 opacity: 0.0;
 margin: 0px;
 width: 100%;
 height: 100%;
}

#kBox_content {
 overflow: hide;
 background-color:#EBEBEB;
}

#kBox_header a{
 text-decoration: none;
}

#kBox_header > * {
 font-size:9pt;
 line-height:20px;
 font-family:"Trebuchet MS",Verdana,sans-serif;
 color:#fff;
 margin: 0px 5px;
}

#kBox_caption {
 float:left;

}

#kBox_header {
 top: 0px;
 left: 0px;
 z-index:103;
 width: 100%;
 height: 20px;
 background:#282828 url(http://static.curse-gaming.com/images/content/fbox-header.gif) repeat-x scroll left top;
 text-align: right;
}

#kBox_overlay {
 position: absolute;
 z-index:100;
 top: 0px;
 left: 0px;
 background-color:#000;
 filter:alpha(opacity=60);
 -moz-opacity: 0.6;
 opacity: 0.6;
 display: none;
}

#kBox_load {
 position: absolute;
 display:none;
 height:100px;
 width:100px;
 z-index:101;
}

Die Links der Screenshots sehen allerdings sehr einfach aus:

<a <href="http://media5.curse-gaming.com/images/previews/14587/sctexamples.jpg" rel="imageview"><img alt="SCT Examples" src="http://media5.curse-gaming.com/images/thumbnails/14587/sctexamples.jpg"></a>

Da ich in diesem Bereich noch unerfahren bin, würde ich mich über eine Hilfestellung freuen, diesen Effekt selber zu erzeugen.

[e7]

Hi,

Auf der verlinkten Seite gibt es im unteren Bereich Screenshots. Wenn man diese anklickt öffnet sich der vergrösserte Screenshot und der Hintergrund der Seite wird dunkler.

Nein. Dann kommt ein Downloaddialog, da der Server hier Dateien des Formats application/octet-stream ausliefert. Und so was kann ein Browser nicht anzeigen.

e7

[Sebastian]

Hi,

Auf der verlinkten Seite gibt es im unteren Bereich Screenshots. Wenn man diese anklickt öffnet sich der vergrösserte Screenshot und der Hintergrund der Seite wird dunkler.

Nein. Dann kommt ein Downloaddialog, da der Server hier Dateien des Formats application/octet-stream ausliefert. Und so was kann ein Browser nicht anzeigen.

e7

Sorry,
aber ich habe nur beschrieben was bei mir passiert, und bei allen anderen hier im Büro. Sicher das du bis zu den Screenshots gescrollt hast?

[JS]

Nein. Dann kommt ein Downloaddialog, da der Server hier Dateien des Formats application/octet-stream ausliefert. Und so was kann ein Browser nicht anzeigen.

Aktiviere mal Javascript, dann siehst du den gewünschten Effekt

[wahsaga]

hi,

Auf der verlinkten Seite gibt es im unteren Bereich Screenshots. Wenn man diese anklickt öffnet sich der vergrösserte Screenshot und der Hintergrund der Seite wird dunkler.

http://www.huddletogether.com/projects/lightbox/

gruß,
wahsaga

[Sebastian]

http://www.huddletogether.com/projects/lightbox/

gruß,
wahsaga

Danke wahsaga,

genau das wars! Ließ sich auch prima einbauen! Danke!

[INTCASE]

hi,

Hallo,

Auf der verlinkten Seite gibt es im unteren Bereich Screenshots. Wenn man diese anklickt öffnet sich der vergrösserte Screenshot und der Hintergrund der Seite wird dunkler.

http://www.huddletogether.com/projects/lightbox/

gibt auch mittlerweile ein Update mit navi Funktion.

gruß,
wahsaga

Grüße,
Intcase
 GYRO

[Cervantes]

gibt auch mittlerweile ein Update mit navi Funktion.

Kann bei größeren Gallerien allerdings zu Komplikationen führen:
http://www.huddletogether.com/forum/comments.php?DiscussionID=543&page=1#Item_0

[INTCASE]

Hi,

Kann bei größeren Gallerien allerdings zu Komplikationen führen:
http://www.huddletogether.com/forum/comments.php?DiscussionID=543&page=1#Item_0

Dafür gibt´s ja dann das Forum =)

Grüße,
Engin
 GYRO