Antworten auf deine Fragen:
Neues Thema erstellen

Album bei Slideshow wechseln

Jormungand

VonAllemEtwas

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

Posting-Frequenz: 14µHz

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

VonAllemEtwas

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?
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.640
Beiträge
1.538.505
Mitglieder
67.559
Neuestes Mitglied
mic4mac
Oben