Album bei Slideshow wechseln

Jormungand · 08.01.2014

Hallo zusammen,
für ein Projekt habe ich im Flexslider eine passende Slideshow gefunden und eingebunden. Jetzt soll über eine kleine Navigation das Thema (das Album?) geändert werden können. Z.B. wird eine Bilderserie zum Thema A gezeigt, über die Navi auf Thema B oder C umgeschaltet werden.

Da die Website eine einzelne Scrollseite ist, kann nicht auf eine andere Seite gewechselt werden.

Ist die Realisierung ohne JS möglich? Bzw. gibt es eine leicht anpassbare Lösung? Ich stehe mit JS etwas auf Kriegsfuß. :/

Schöne Grüße
Jormungand

Duddle · 08.01.2014

AW: Album bei Slideshow wechseln

Ist die Realisierung ohne JS möglich?

Möglicherweise mit CSS und :hover, aber unnötig aufwendig.

Bzw. gibt es eine leicht anpassbare Lösung?

Du könntest jQuery UI Tabs benutzen, um jeweils die gewünschte Slideshow anzeigen zu lassen.

Edit: Oder möchtest du tatsächlich ein "Thema" ändern, also das Aussehen der Website um die Slideshow herum?

Duddle

Jormungand · 08.01.2014

AW: Album bei Slideshow wechseln

Danke erstmal für den Tipp mit jQuery UI Tabs.
Das werde ich mir mal zu Gemüte führen.

Mit Thema meinte ich verschiedene Sets an Bildern, mir ist vorhin nur der Begriff nicht eingefallen.

_______________________________________________________
Edit:
Jetzt habe ich den FlexSlider mit den Tabs kombiniert. Ich kann die Tabs umschalten und im ersten Tab funktioniert auch meine Slideshow, aber im zweiten nicht.

Code:

     <!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="flexslider.css" rel="stylesheet">
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <script src="jquery.flexslider-min.js" type="text/javascript"></script>
        <script>
            $(function() {
                $("#tabs").tabs();
            });
        </script>
    </head>
    <body>

        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">Nunc tincidunt</a></li>
                <li><a href="#tabs-2">Proin dolor</a></li>
            </ul>
            <div id="tabs-1">
                <div class="flexslider">
                    <ul class="slides">
                        <li><img alt="" src="img/1.jpg" /></li>
                        <li><img alt="" src="img/2.jpg" /></li>
                        <li><img alt="" src="img/3.jpg" /></li>                        
                    </ul>
                </div> 
            </div>
            <div id="tabs-2">
                <div class="flexslider">
                    <ul class="slides">
                        <li><img alt="" src="img/4.jpg" /></li>
                        <li><img alt="" src="img/5.jpg" /></li>
                        <li><img alt="" src="img/6.jpg" /></li>                        
                    </ul>
                </div> 
            </div>
        </div>

        <script type="text/javascript">
            // Can also be used with $(document).ready()
            $(window).load(function() {
                $('.flexslider').flexslider({
                    animation: "slide"
                });
            });
        </script> 
    </body>
</html>

Woran kann es liegen, dass es nicht geht?

______________________________________________
Edit2:
Habe auch mal versucht, die zweite Galerie außerhalb des Tabs-Block zu platzieren. Da funktioniert sie einwandfrei. Hat noch wer Vorschläge, was man noch probieren kann?