• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage zu CSS Datei

P

paddystyle

Neues Mitglied
Hey ich hab hier ein code und komme nicht ganz klar bzw fehlt mir grad das verständnis dafür.

das ist eine lightbox ohne java und ich versteh nicht genau was ich mit dem pfad anfangen soll?

Code: 
<a href="#t6" class="aBox"><img src="html5/pic6t.jpg" alt="" /></a>

um die img anzuzeigen als thumb ist mir klar aber die verlinkung zu #t6 verstehe ich nicht, was muss ich da tun das die verlinkung funktioniert mit dem effekt?

hier noch den kompletten code.

Code: 
<!DOCTYPE HTML><html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
</head>
<style type="text/css">


/* ================================================================ 


This copyright notice must be kept untouched in the stylesheet at 


all times.


Copyright (c) 2005-2011 Stu Nicholls. All rights reserved.


This stylesheet and the associated (x)html may be modified in any 


way to fit your requirements.


=================================================================== */


.starlightImages {padding-left:10px;}


.aBox img {border:0;}


.bBox {display:none;}






.starLight {display:table; position:fixed; top:0; left:-9999px; width:100%; height:100%; z-index:500; background:rgba(0,0,0,0.5);}


.starLight .holder {position:fixed; width:100%; height:100%; left:0; top:0; z-index:100; text-align:center; display:table-cell; opacity:0;


-moz-transform: scale(0);


-ms-transform: scale(0);


-o-transform: scale(0);


-webkit-transform: scale(0);


transform: scale(0);


-webkit-transition: 1s;


-moz-transition: 1s;


-o-transition: 1s;


transition: 1s;


}






.starLight .frame {display:inline-block; margin:50px auto; padding:15px; background:#fff; position:relative; text-align:left; font-family:arial, sans-serif;


border-radius:10px 10px 0 0;


}


.starLight .frame .clickLeft {position:absolute; left:15px; top:15px; right:50%; bottom:15px; background:url(trans.gif); z-index:110;}


.starLight .frame .clickLeft .previous {opacity:0; position:absolute; width:100px; text-align:center; height:40px; top:120px; left:0; background:rgba(64,64,64,0.6); font:bold 15px/40px arial, sans-serif; text-decoration:none; color:#fff; border-radius:0 10px 10px 0;


-webkit-transition: 0.5s;


-moz-transition: 0.5s;


-o-transition: 0.5s;


transition: 0.5s;


}


.starLight .frame .clickLeft:hover .previous {opacity:1;}






.starLight .frame .clickRight {position:absolute; right:15px; top:15px; left:50%; bottom:15px; background:url(trans.gif); z-index:110;}


.starLight .frame .clickRight .next {opacity:0; position:absolute; width:100px; text-align:center; height:40px; top:120px; right:0; background:rgba(64,64,64,0.6); font:bold 15px/40px arial, sans-serif; text-decoration:none; color:#fff; border-radius:10px 0 0 10px;


-webkit-transition: 0.5s;


-moz-transition: 0.5s;


-o-transition: 0.5s;


transition: 0.5s;


}


.starLight .frame .clickRight:hover .next {opacity:1;}






.starLight .frame .caption {position:absolute; margin-top:-150px; left:0; right:0; padding:5px 15px; background:#fff;


border-radius: 0 0 10px 10px;


-webkit-transition: 0.5s;


-moz-transition: 0.5s;


-o-transition: 0.5s;


transition: 0.5s;


transition-delay: 1s;


-o-transition-delay: 1s;


-moz-transition-delay: 1s;


-ms-transition-delay: 1s;


-webkit-transition-delay: 1s;


}


.starLight .frame .caption .shadow {left:15px; right:15px; height:60px; position:absolute; bottom:5px; background:#aaa; box-shadow:0 10px 20px rgba(0,0,0,0.5); z-index:-1; border-radius: 100px/50px; }


.starLight .frame .caption h4 {font-size:18px; margin:0; padding:3px 0; color:#333;}


.starLight .frame .caption p {font-size:12px; color:#444; margin:0; padding:3px 0;}


.starLight .frame .caption h4 span {float:right; font-size:9px;}


.starLight .large {display:inline-block; position:relative; z-index:100; border:1px solid #888;


-webkit-transition: 1s;


-moz-transition: 1s;


-o-transition: 1s;


transition: 1s;


}


.starLight .frame .close {display:block; width:48px; height:48px; position:absolute; top:-24px; right:-24px; z-index:200; opacity:0;


-webkit-transition: 1s 1s;


-moz-transition: 1s 1s;


-o-transition: 1s 1s;


transition: 1s 1s;


}


.starLight .frame .close img {border:0;}






#t1:target ~ .starLight,


#t2:target ~ .starLight,


#t3:target ~ .starLight,


#t4:target ~ .starLight,


#t5:target ~ .starLight,


#t6:target ~ .starLight {left:0;}






#t1:target ~ .starLight .h1, 


#t2:target ~ .starLight .h2, 


#t3:target ~ .starLight .h3, 


#t4:target ~ .starLight .h4, 


#t5:target ~ .starLight .h5, 


#t6:target ~ .starLight .h6 


{opacity:1;


-moz-transform: scale(1);


-ms-transform: scale(1);


-o-transform: scale(1);


-webkit-transform: scale(1);


transform: scale(1);


}






#t1:target ~ .starLight .h1 .close,


#t2:target ~ .starLight .h2 .close,


#t3:target ~ .starLight .h3 .close,


#t4:target ~ .starLight .h4 .close,


#t5:target ~ .starLight .h5 .close,


#t6:target ~ .starLight .h6 .close


{opacity:1;}






#t1:target ~ .starLight .h1 .caption,


#t2:target ~ .starLight .h2 .caption,


#t3:target ~ .starLight .h3 .caption,


#t4:target ~ .starLight .h4 .caption,


#t5:target ~ .starLight .h5 .caption,


#t6:target ~ .starLight .h6 .caption


{margin-top:10px;} 


</style>




<body>
<p class="info">&nbsp;</p>


<div class="starlightImages">


	<a href="#t1" class="aBox"><img src="gallery/Acryl/thumbs/pic1t.jpg" alt="" /></a>


	<a href="#t2" class="aBox"><img src="html5/pic2t.jpg" alt="" /></a>


	<a href="#t3" class="aBox"><img src="html5/pic3t.jpg" alt="" /></a>


	<a href="#t4" class="aBox"><img src="html5/pic4t.jpg" alt="" /></a>


	<a href="#t5" class="aBox"><img src="html5/pic5t.jpg" alt="" /></a>


	<a href="#t6" class="aBox"><img src="html5/pic6t.jpg" alt="" /></a>


</div>


<b id="t1" class="bBox"></b><b id="t2" class="bBox"></b><b id="t3" class="bBox"></b><b id="t4" class="bBox"></b><b id="t5" class="bBox"></b><b id="t6" class="bBox"></b>






<div class="starLight">
</body>
</html>
 
#t6 ist ein Anker der zu einer ID zielt. Schau dir mal den HTML-Code der Vorlage an. Da siehst Du unten ein Element

HTML: 
<b id="t6" class="bBox"></b>

Das ist das Ziel des Ankers. Soweit ich das verstehe, musst Du die ID an das Element hängen, welches angezeigt werden soll.

Und btw.: eine Lightbox funktioniert immer ohne Java. Meistens wird sie jedoch mit JavaScript umgesetzt, was eine völlig andere Sprache ist.
 
ok sagen wir ich hab ein bild
images/bilder/apfel.jpg

wie hänge ich das nun an das es funktioniert? Hab noch nie mit so ein Anker gearbeitet

richtig, ich meinte auch javaScript.
 
Theoretisch indem Du das Bild als Bild einbindest und diesem img-Element die ID gibst.

Gibt es dort wo Du die CSS-Daten dafür her hast kein Beispiel?
 
Dann musst Du noch den Abschnitt ab

HTML: 
<div class="starLight">

komplett mit kopieren. Dort sind die Bilder enthalten die in der Vergrößerung dargestellt werden.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben