Wenn es dir genau so reicht, wie es da zu sehen ist, dann geht das problemlos mit HTML und CSS bzw. nur mit HTML.
Code:
<div id="content">
<ul id="galleryNav">
<il><a href="#galleryItem1">Item 1</a></li>
<il><a href="#galleryItem2">Item 1</a></li>
<il><a href="#galleryItem3">Item 1</a></li>
<il><a href="#galleryItem4">Item 1</a></li>
</ul>
<div id="gallery">
<div id="galleryItem1">Gallery Content</div>
<div id="galleryItem2">Gallery Content</div>
<div id="galleryItem3">Gallery Content</div>
<div id="galleryItem4">Gallery Content</div>
</div>
</div>
In CSS musst du nun das Folgende umsetzen:
- die Navigation der Gallery mit "position: absolute" und "z-index: 1" auf der z-Achse über dem Gallery-Content anordnen
- im Content-Container und im Gallery-Container den "overflow" auf "hidden" setzen und beiden Containern die gleiche Breite geben
- den div-Container im Gallery-Container die gleichen Dimensionen geben wie den beiden übergeordneten Containern geben.
Wie du vielleicht schon erahnt hast, steuerst du die gewünschten Gallery-Container einfach über deren ID an. Alles andere ist geschickte Verschachtelung der Container, damit nur der gewünschte Content gerade Platz im Wrapper hat.
Vorteile: Du brauchst kein JavaScript/jquery/AJAX
Nachteil: Beim Aufruf der Seite muss jeder Gallery-Inhalte geladen werden, auch jener, der zu dem Zeitpunkt gar nicht angezeigt wird.
Mit jquery/ajax könntest du steuern, dass nur der Content geladen wird, der auch angezeigt werden soll. Außerdem könntest du mit Animationen arbeiten. An der Stelle würde ich auch definitiv mit einem Framework wie jquery arbeiten, zum einen du mit jquery keinen Umweg über php-Daten gehen musst und intutiv mit HTML arbeiten kannst, zum anderen weil du alle jquery-Aktionen über eine separate js-Datei ausführen kannst und den HTML-Code frei von fremden Code halten kannst. Der Nachteil eines Frameworks kann sein, dass die Darstellung und Animation der Seite furchtbar langsam werden kann, wenn man den Code nicht sauber strukturiert. So kann jquery zwar so ziemlich jedes DOM-Element abgreifen, aber das kann furchtbar langsam sein, weshalb man wenn möglich immer mit eindeutigen IDs arbeiten sollte.
Wenn du noch keine Ahnung von JavaScript hast, würde ich erst einmal die HTML-Lösung umsetzen und dann im nächsten Schritt eine Lösung mit jquery o.Ä. erarbeiten.
Edit:
Kleiner Tipp, um einen Container zu zentrieren.
Code:
#content {
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
position: absolute;
}
Wobei du den Abstand zu den Rändern, etwa auch zum oberen Rand, variieren kannst. Ohne fixe dimensionen wird der Container so groß wie möglich (also 100%).
Ist es möglich so etwas in CSS umzusetzen?
