Bilder großansicht in neuem Fenster

[kornyclown]

Hi nochmal zusammen,
ich komme mit meiner Webseite schneller vorran als ich dachte und deswegen wollte ich jetzt schonmal vorab fragen wie man das macht, dass ich eine kleine Vorschau von einem Bild habe und wenn ich draufklicke öffnet sich die Großansicht in einem neuen Fenster darüber, so wie bei Facebook.
Wenn man dort ein Bild anklickt dann öffnet es sich nicht einfach in einem neuen Fenster sondern die ursprüngliche Seite graut aus und darüber öffnet sich das Bild in groß, die Kommentarbox daneben interessiert mich nich. Ich hätte sowas nur gerne für meine Galerie, wo man alle Bilder als kleine Vorschaubilder sieht und sie sich dann halt durch draufklicken in groß ansehen kann, bestenfalls hat das neue Fenster genau wie in Facebook auch diese Pfeile zum vor und zurück skippen.

Ich weiß nur leider nich wonach ich da suchen soll. Hat das einen Bestimmten Namen oder kennt vielleicht jemand sogar ein Tutorial was das erklärt?

[randacek_pro]

Hallo, was du suchst nennt sich lightbox - das ist eine Overlay-Ansicht.
Ich glaube, du arbeitest mit jQuery?
Dann könnte dieses Script hier für dich hilfreich sein:
http://lokeshdhakar.com/projects/lightbox2/

Viele Grüße

[DaKKK]

Hey,

du meinst garantiert die Lightbox Ist super einfach zu nutzen. Auf der Seite gibts dafür ne gute Dokumentation.

lg DaKKK

edit: Da war jemand schneller :-)

[kornyclown]

Ah cool, Lightbox. Gut zu wissen.
Vielen dank, ich hoffe ich kann damit umgehen. So wie ich das verstehe, lad ich mir das Paket einfach runter, verschieb die jeweiligen files in meine Ordnerstruktur und prüfe ob alle links richtig sind.
Das wars?

P.S.:
Is das Cross-Browser kompatibel?

[randacek_pro]

Ja, ist kompatibel mit allen gängigen und auch älteren Browsern.
Genau, du lädst es runter, entpackst es und verteilst es auf deine Ordnerstruktur. Im head deines Websitedocuments fügst du (wenn du jQuery selbst schon integriert hast) einfach noch

<script src="js/lightbox.js"></script>

ein (wobei natürlich der Pfad zu beachten ist ) und ebenso noch das Stylesheet

<link href="css/lightbox.css" rel="stylesheet" />

Wenn du nun die Bilder in die Seite einbaust, dann nicht als img-Tag, sondern als Link, genauer "Anchor-Tag", also <a> und in den Tag kommt ein ein "rel="lightbox"", das bewirkt, dass, wenn der User das Bild anklickt, das lightbox-Script anspringt und die weitere Anzeige übernimmt. Jedes deiner Bilder wird also nicht einfach als Bild eingebunden, sondern als Link, wobei du ja zwischen den <a>-Tags noch ein Thumbnail als Vorschaubild anführen kannst (macht ja Sinn, damit der User sieht, auf was er klicken soll )
Also Beispiel:

<a href="images/meinbild.jpg" rel="lightbox" title="my caption">
<img alt="thumb" src="images/meinbild_thumb.jpg">
</a>

Viel Spaß damit

[kornyclown]

Hey cool, danke für dieses Kurztutorial. Ihr kriegt alle Credits auf meiner Seite wenn sie fertig is

[DaKKK]

Du kannst uns ja mal deine Website zeigen, wenn du damit fertig bist Würde mich freuen.

btw: das habe ich bei meinem ersten Post vergessen. Vllt. ist ja auch die Shadowbox was für dich. Die nutze ich sehr gerne.

[randacek_pro]

Zitat von kornyclown

Ihr kriegt alle Credits auf meiner Seite wenn sie fertig is

klingt extrem gut, also nich vergessen lol
Arbeitest du derzeit an deiner Portfolio-Seite?
Muss sagen, bin schon gespannt darauf, weil wir ja hier quasi den Aufbau mit beobachten können

Von diesen lightboxes gibt es einige Varianten, die sich nur leicht voneinander unterscheiden, was den technischen Aufbau betrifft, manche können auch Videos und swf-Inhalte darstellen. Und andere Varianten passen manchmal vielleicht besser zum Design, aber eingebunden werden sie alle fast auf die gleiche Art.

Freut mich, wenn du hier Anregung und Hilfe gefunden hast

Viele Grüße

[kornyclown]

Also da meine Seite sowieso keinen großen Traffic hat hab ich die alte jetz mal runtergenommen und die neue als vorläufige Version hoch gestellt. Da sind noch ein paar Kinderkrankheiten drin, geschweige denn, dass sie noch nich fertig is.
www.thomasmanz.de

Ja, es ist halt hauptsächlich für mich beruflich als Freiberufler eine übersichtliche Webpresents, zum vorzeigen von Referenzarbeiten und so. Aber dafür hätte meine alte Flash Variante auch gereicht, ich steige jetzt um auf solides HTML und CSS da ich wahrscheinlich irgendwann mal eigene Projekte starte und für die Verwaltung von wechselnden Inhalten macht sich das halt besser.

P.S. Lightbox scheint gut zu funktionieren

[Myhar]

Das Erste, was mir hier auffällt:
Verwende bitte semantisch sinnvolle Tags.
So etwas ergibt keinen Sinn:

 <div id="headline">THOMAS MANZ.DE</div>

Nimm statt dessen lieber folgendes:

 <h1>THOMAS MANZ.DE</h1> <!-- Oder was für eine Ordnung du auch dafür vorgesehen hast, also h2, h3, ... -->

[kornyclown]

Ja, da hast du recht, der Code is vielleicht nich ganz der sauberste aber es ist mein erstes HTML Projekt und da muss ich mit dem Code noch ein bischen vertraut werden aber danke für den Hinweis, ich habs jetz geändert (noch nich hochgeladen).

Ach, und wenn mir jemand dabei helfen kann dass sich mein Hintergrund auf der Startseite wiederholt, würde ich mich auch sehr freuen.
Das ist der aktuelle Code:

<div class="wrapper">
<div class="bgleft"></div>
<div class="bgright"></div>

* {
    padding: 0; 
    margin: 0;
}

html {
    background-color: #FFF;
}
    
html, body {
    min-width: 100%;
    height: 100%;
}

/****************     Background Elements     ****************/

.wrapper {
    position: relative; 
    width: 800px; 
    height: 100%; 
    margin: 0 auto;
}

.bgleft, .bgright {
    position: absolute;
    width: 100%;
    height: 100%;
}

.bgleft {
    background: transparent url(../images/BG_left.png) repeat-y left top;
}

.bgright {
    background: transparent url(../images/BG_right.png) repeat-y right top;
}

Also die höhe für html und die div-Container sind auf 100% also immer das maximum und die Grafiken selbst sind als repeat-y angegeben, warum höhren sie dann am ende der Seite auf?

[DaKKK]

Ich hab jetzt nur kurz drüber geguckt, aber du solltest mal deinen Code überprüfen...z.B. gibt es das "content" so wie du es verwendest garnicht.

Zum Hintergrund: Wieso machst du nicht einfach eine Hintergrundgrafik und weist diese dem Wrapper zu?

Ich hab dir mal ne PN geschickt