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

Lightbox 2 - Ein Bild und zwei grössen ?

N

noxx2

Neues Mitglied
Hallo

ich teste gerade Lightbox 2.
Lightbox 2

Nun will ich das ein Bild beim Klick vergrössert wird, das klappt aber nicht.

Code: 
<a href="tempdaycomp.png" rel="lightbox" width="600" height="360"><img src="tempdaycomp.png"</a>

Beide Bilder werden gleich gross dargestellt, mit 300x180 Pixel (=Pixelzahl des PNGs)

Wieso wird die Box nicht auf 600x360 hochskaliert?

Gruss
 
Einem Link eine Breite und eine Höhe mitzugeben wirkt sich nunmal nicht auf das verlinkte Bild aus. Grundlage der Lightbox ist die Verwendung zweier Grafike, einem großen Originalbild und einem verkleinerten Vorschaubild. Dem Vorschaubild kannst du natürlich per HTML mitteilen, wie klein es zu sein hat (und daher kannst du dafür die selbe Grafikdatei verwenden wie für die Großansicht), was ich aber nicht empfehlen würde.
 
Um die obige Antwort in Form von HTML-Code mal zu verdeutlichen:

HTML: 
<a href="tempdaycomp_grossansicht.png" rel="lightbox"><img src="tempdaycomp_klein.png"</a>

;)
 
danke. also in der lightbox hochskalieren geht nicht?


Habe auch noch ein weiteres Problem: Lightbox funktioniert irgendwie nicht mit Float

Hier mal der Code:
HTML: 
<div><fl1>Aussentemperatur letzten 7 Tage<br><br>
<a href="tempweekcomp.png" rel="lightbox"> <img src="tempweekcomp.png" width="300" height="180"></fl1></div></a>

<div><fl1>Regen letzten 7 Tage<br><br>
<a href="rainweek.png" rel="lightbox"> <img src="rainweek.png" width="300" height="180"></fl1></div></a>

<div><fl1>Luftfeuchtigkeit letzten 7 Tage<br><br>
<a href="humidweek.png" rel="lightbox"> <img src="humidweek.png" width="300" height="180"></fl1></div></a>

<div><fl1>Luftdruck letzten 7 Tage<br><br>
<a href="baromweek.png" rel="lightbox"> <img src="baromweek.png" width="300" height="180"></fl1></div></a>

Die Grafiken sind wild durcheinander, ohne Lightbox gehts wunderbar:
HTML: 
<div><fl1>Aussentemperatur letzten 7 Tage<br><br>
<img src="tempweekcomp.png" width="300" height="180"></fl1></div>

<div><fl1>Regen letzten 7 Tage<br><br>
<img src="rainweek.png" width="300" height="180"></fl1></div>

<div><fl1>Luftfeuchtigkeit letzten 7 Tage<br><br>
<img src="humidweek.png" width="300" height="180"></fl1></div>

<div><fl1>Luftdruck letzten 7 Tage<br><br>
<img src="baromweek.png" width="300" height="180"></fl1></div>

Hier der CSS Code:

HTML: 
fl1 {
font-family:Arial,sans-serif;
font-size:12px;
font-weight:bold;
color: #000000;
display: block;
float:left;
margin: 15px 0px 30px 50px;
}

Gruss und danke schonmal
 
Zuletzt bearbeitet:
Jetzt hab ich leider keine Ahnung, was <fl1> ist (gibts das wirklich?), aber ich tippe mal, am float liegts nicht. Hast du ne FireBug installiert? Die Lightbox greift ins css der bestehenden Seite nicht ein, erst in dem Moment, wo die Vergrößerung angezeigt wird.

Gruß in die Schweiz!
Bodil
 
hat sich irgendwie erledigt, auf einmal gehts. gestern hat er die bilder noch kreuz und quer durcheinander gehauen

gruss
 
Ein Element namens <fl1> gibt es nicht. Das ist der Fehler in deinem Code. Und höchstwahrscheinlich auch die Ursache für jegliche seltsame Darstellung.

Die Lightbox selbst setzt keine Styles in den Link ein, somit dürfte diese Angabe auch nicht die Ursache sein - was genau passiert kannst Du wie oben schon gesagt mit Firebug prima ermitteln.
 
ich denke eher, dass der Fehler war, die Elemente über Kreuz zu schliessen. Vereinfacht sah das doch so aus:

HTML: 
<div>
  <f11>
     <a>
   </f11>
</div>
     </a>

Das falsche Schliessen das a-Tags halte ich für das Problem, schließlich hat es ohne Link ja auch funkioniert
 
Eine Element dieses Namens gibt es in HTML nicht. Folglich ist dein HTML-Code nicht valide, was folglich viele Browser zu unvorhersehbaren Aktionen veranlassen könnte. U.a. eben auch mögliche Fehldarstellungen.
 
dann habe ich das irgendwie falsch verstanden.

dachte in der *.css könnte man frei wählen für den Namen/Bezeichner

Code: 
fl1 { font-family:Arial,sans-serif; font-size:12px; font-weight:bold; color: #000000; display: block; float:left; margin: 15px 0px 30px 50px; }
und dann einfach per

Code: 
<link rel="stylesheet" type="text/css" href="css/font.css" />

einbinden die die *.htm und dann wie folgt anwenden:

HTML: 
<div><fl1>Aussentemperatur letzte 24 Stunden<br><br>
<a href="tempdaycomp.png" rel="shadowbox;height=360;width=600">
<img src="tempdaycomp.png" width="300" height="180"></fl1>
</div></a>

Zumindest funktioniert es, warum auch immer
 
Nein. Nochmal: Du kannst nicht einfach HTML-Elemente erfinden. Das hat nichts mit CSS zu tun. Und das es bei dir "funktioniert" heißt nichts. Das kann bei jedem anderen Nutzer und Browser anders sein.
 
wie hätte ich es denn richtig machen müssen? Ziel war es mit dem Float Bilder nebeneinander anzuordnen.

Hier mal der Komplett Code der Seite:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Wochenübersicht</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="css/font.css" />
<style type="text/css">#webinfos {margin: 0 auto; width: 800px; height: 1000px; background-color:#FFFFFF}</style>
<style type="text/css">#position {position: relative;left: 15px;}</style>
<style type="text/css">#position {pos_bilder: relative;left: 50px;}</style>


<!-- Begin Shadowbox JS -->
         <link rel="stylesheet" type="text/css" href="shadowbox.css">
         <script type="text/javascript" src="shadowbox.js"></script>
         <script type="text/javascript">
         Shadowbox.init({
         animSequence:    "wh",
         fadeDuration:    0.5
         });
         </script>
<!-- End Shadowbox JS -->

</head>
<body bgcolor="#E0E0E0">
<div id="webinfos">

<body>
<ul class="menu">
  <li><a href="default.htm"><span>Aktuell</span></a></li>
  <li><a href="woche.htm" class="active"><span>Woche</span></a></li>
  <li><a href="monat.htm"><span>Monat</span></a></li>
  <li><a href="jahr.htm"><span>Jahr</span></a></li>
  <li><a href="archiv.htm"><span>Archiv</span></a></li>
  <li><a href="wetterstation.htm"><span>Wetterstation</span></a></li>
  <li><a href="links.htm"><span>Links</span></a></li>
  <li><a href="impressum.htm"><span>Impressum</span></a></li>
</ul>

<br>




<div><fl1>Aussentemperatur letzten 7 Tage<br><br>
<a href="tempweekcomp.png" rel="shadowbox;height=360;width=600">
<img src="tempweekcomp.png" width="300" height="180">
</a></fl1></div>

<div><fl1>Regen letzten 7 Tage<br><br>
<a href="rainweek.png" rel="shadowbox;height=360;width=600">
<img src="rainweek.png" width="300" height="180">
</a></fl1></div>

<div><fl1>Luftfeuchtigkeit letzten 7 Tage<br><br>
<a href="humidweek.png" rel="shadowbox;height=360;width=600">
<img src="humidweek.png" width="300" height="180">
</a></fl1></div>

<div><fl1>Luftdruck letzten 7 Tage<br><br>
<a href="baromweek.png" rel="shadowbox;height=360;width=600">
<img src="baromweek.png" width="300" height="180">
</a></fl1></div>




</body>
</div>
</html>
 
So etwas lässt sich mit einer <ul>-Liste lösen. Damit sparst Du dir vor allem die sinnfreien <div>'s.

HTML: 
<ul>
 <li><a href="tempweekcomp.png" rel="shadowbox;height=360;width=600"><img src="tempweekcomp.png" width="300" height="180"></a></li>
 [etc...]
</ul>

Wenn Du die Bilder nebeneinander haben willst, kannst Du zudem in manchen Fällen auf float verzichten. Manchmal reicht auch schon, wenn die Elemente Inline-Elemente sind ("display: inline;") oder (für moderne Browser) mit "display: inline-block;" versehen sind. Abstände erreichst Du in ersterem Fall mit padding bzw. margin.
 
willst erstmal mit CSS probieren um das Thema zu begreifen. Habs nunmal umgeschrieben, funktioniert auch, aber ist es konform?

Code: 
div.float {
font-family:Arial,sans-serif;
font-size:12px;
font-weight:bold;
color: #000000;
display: block;
float:left;
margin: 15px 0px 30px 50px;
}

HTML: 
<div class="float">Aussentemperatur letzte 24 Stunden<br><br>
<a href="tempdaycomp.png" rel="shadowbox;height=360;width=600">
<img src="tempdaycomp.png" width="300" height="180">
</a></div>

<div class="float">Regen letzte 24 Stunden<br><br>
<a href="rainday.png" rel="shadowbox;height=360;width=600">
<img src="rainday.png" width="300" height="180">
</a></div>

<div class="float">Windgeschw. letzte 24 Stunden<br><br>
<a href="wspeeddaycomp.png" rel="shadowbox;height=360;width=600">
<img src="wspeeddaycomp.png" width="300" height="180">
</a></div>

<div class="float">Luftdruck letzte 24 Stunden<br><br>
<a href="baromday.png" rel="shadowbox;height=360;width=600">
<img src="baromday.png" width="300" height="180">
</a></div>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben