Image Carousel - Bei Bildwechsel aktives Thumb ersetzen

M

mpruss

Grünschnabel
Hallo zusammen,

ich bin schon seit Tagen am recherchieren und durchforsten, aber ich finde einfach keine Lösung. Hoffe hier kann mir einer helfen:

Wie im Bild (unten) zu sehen, habe ich ein Carousel auf einer HTML-Webseite eingebaut. Der funktioniert auch einwandfrei mit 3 Bildern. Nun ist aber der Wunsch, dass ein viertes Bild hinzukommen soll, aber trotzdem weiterhin nur drei Thumbs zu sehen sein sollen.
Nun soll es so funktionieren: Bild A ist aktiv und im Thumb ausgeblendet. Nun klicken wir auf Thumb C.
Thumb C soll dann als großes Bild erscheinen, während dann das Bild A als kleines Thumb das Thumb C ersetzt (siehe Skizze).

Versteht ihr was ich meine? Hoffe es hat jemand eine Idee :)
Vielen Dank schon mal dafür!!

galerie_thumb_change.jpg
 
Danke für deine schnelle Antwort!!
Stimmt. Ich weiß nur nicht, ob das mit meinem Code bzw. mit dem was ich eingebunden habe machbar ist. Daher hatte gehofft, jemand hat zufällig ein Script parat. So funktioniert das Carousel auch, ist allerding noch mit drei Bildern, aber es sollen ja vier sein.

Hast du eine Idee??

Hier mal mein Code:

HTML: 
<div class="col-md-4 carousel slide article-slide" id="square-gallery">
  <div class="carousel-inner cont-slider">
     <div class="item"><img src="media/image_B.jpg" title=""></div>
     <div class="item"><img src="media/image_C.jpg" title=""></div>
     <div class="item"><img src="media/image_D.jpg" title=""></div>
     <div class="item active"><img src="media/image_A.jpg" title=""></div>
  </div>
  <ol class="carousel-indicators visible-lg visible-md">
     <li data-slide-to="0" data-target="#square-gallery"><img src="media/image_B.jpg" title=""></li>
     <li data-slide-to="1" data-target="#square-gallery"><img src="media/image_C.jpg" title=""></li>
     <li  data-slide-to="2" data-target="#square-gallery"><img src="media/image_D.jpg" title=""></li>
     <!--<li data-slide-to="3" data-target="#square-gallery"><img src="media/image_A.jpg" title=""></li>-->
  </ol>
</div><!-- /.gallery -->

CSS: 
/* Square Gallery*/

#square-gallery .carousel-inner {    width:100%; padding: 0; border: 2px solid #fff; }

    /* Fade-Effects optional*/
    #square-gallery .carousel-inner .item {
        -webkit-transition: opacity 0.5s;
        -moz-transition: opacity 0.5s;
        -ms-transition: opacity 0.5s;
        -o-transition: opacity 0.5s;
        transition: opacity 0.5s;
    }
    #square-gallery .carousel-inner .active.left { left:0; opacity:0; z-index:2; }
    #square-gallery .carousel-inner .next { left:0; opacity:1; z-index:1; }
    #square-gallery .carousel-inner .active.right { left:0; opacity:0; z-index:2; }
    #square-gallery .carousel-inner .prev {    left:0; opacity:1; z-index:1; }

#square-gallery .carousel-indicators {
    bottom: 0;
    left: 0;
    margin: 0;
    float: left;
    position:relative;
    width: 100%;
    padding-right: 10px;
}
#square-gallery .carousel-indicators {
    margin-left: 1px;
    margin-right: 1px;
    margin-top: 5px;
    padding: 0;
}
#square-gallery .carousel-indicators li {
    border: none;
    border-radius: 0;
    float: left;
    height: auto;
    margin: 0 7px 0 0;
    width: 32%;
}
#square-gallery .carousel-indicators li:last-child { margin: 0; }

#square-gallery .carousel-indicators img {
    border: 2px solid #FFFFFF;
    float: left;
    height: auto;
    left: 0;
    width: 100%;
}

#square-gallery .carousel-indicators .active img { border: 2px solid #007946; }

Javascript: 
<script>
     $(function(){
            // Initializes the carousel
            $(".start-slide").click(function(){
                 $("#square-gallery").carousel('cycle');
            });
     });
</script>
 
Aus deinem Code geht leider nicht hervor, wie die Funktion carousel() implementiert ist. Verwendest Du da ein vorgefertigtes Skript?
 
Ich glaube nicht, dass es für diesen speziellen Fall ein fertiges Skript gibt, denn die Regel ist, dass alle Thumbnails angezeigt werden. Am besten findest Du dich damit ab, dass es so ist. Wenn nicht, ist wahrscheinlich Handarbeit angesagt: Entweder ein Plugin anpassen oder diese Funktion neu schreiben.
Edit: Möglicher Weise könnte man das auch mit der API erledigen, wenn diese unterstützt, dass Elemente in der Thumbnails-Leiste gelöscht und hinzugefügt werden.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück