Thumbnail-Navigation -> „aktives“ Thumb immer in der Mitte

Ich habe eine WP-Galerie mit Link zur Anhang-Seite.
Damit man sich nicht immer nur stur durchklicken kann / muss, gibt es auf jeder Attachment-Seite unten eine horizontale Leiste mit Thumbnails / Thumbnail-Navigation.

Struktur derzeit (ggf. veränderbar):

<div class="thumbrow">
<a><img /></a>
<a><img /></a>
…
</div>

Beim Vorschaubild für das aktuelle Bild, hat das img-Tag die Klasse .current

Hat jemand eine Idee, wie ich es hinbekommen kann, dass das img.current immer in der Mitte angeordnet wird? – Irgendwie steh ich grad auf’m Schlauch, mir fällt noch nichtmal ein sinnvoller Suchbegriff ein …

Danke
und Gruß
helix

Zitat von SirEctor

Oder habe ich dich falsch verstanden?

Grins. Dass man auch immer bei den eigenen Formlierungen denkt, sie seien eindeutig …

Nein, die Thumbnails sollten alle waagrecht in einer Reihe sein. Auch das .current. Und schön in der Sortierreihenfolge der Galerie.

Wenn ich nun aber eine Galerie mit vielen Bildern habe, habe ich standardmäßig immer von links her die ersten soundsoviel Bilder (abängig von der Browswerfensterbreite). D.h. das Vorschaubild zum aktuellen Bild sehe ich dann gar nicht mehr. Zu den nachfolgenden komme ich erst recht nur durch Scrollen (und so waagrechte Scrollbalken gewinnen auch nicht gerade einen Schönheitswettbewerb) .

Fürs erste habe ich es jetzt so gelöst:

<?php if ( get_post_gallery( $post->post_parent ) ) : // Thumbnail-Navigation ?>
    <div class="thumbrow"> 
        <div class="images-before"> <?php
            $current_attachment_id = get_the_ID(); // ID des aktuellen Bilds / Attachment-Seite
            $gallery = get_post_gallery( $post->post_parent, false ); // Galerie holen, aber nicht ausgeben
            $attachment_ids = explode( ",", $gallery['ids'] ); // IDs in der richtigen Reihenfolge aus der Galerie holen
                        
            foreach( $attachment_ids as $id ) {
                if ( $current_attachment_id == $id ) { // Vorschaubild der aktuellen Attachment-Seite ?>
                    </div><!-- .images-before -->
                    <div class="current-image"> <?php
                        echo wp_get_attachment_link( $id, 'thumb', true, false, false, 'class=current' ); ?>
                    </div>
                    <div class="images-after"> <?php
                }
                else {
                    echo wp_get_attachment_link( $id, 'thumb', true);
                }
                            
            } ?>
        </div><!-- .images-after -->
    </div><!-- .thumbrow -->
<?php endif; // Ende Thumbnail-Navigation ?>

div.thumbrow wird relativ positioniert, overflow-x hidden oder auto, je nachdem.
Die drei divs innerhalb .thumbrow sind absolut positioniert, .current-image in der Mitte, .images-before und .images-after links und rechts anschließend.
Das img für das aktuelle Bild trägt immer noch die Klasse .current. Bräuchte ich jetzt, wo auch das div eine entsprechende Klasse hat, nicht mehr, ist noch ein Relikt von der vorigen Version …

Nicht so besonders schön ist daran, dass es bei den ersten und letzten Bildern der Galerie rechts oder links Weißraum gibt, obwohl die ganze Zeile mit Thumbnails eigentlich breiter wäre …
Scrollen (overflow-x: auto) erlaube ich nur für Mobilgeräte. Auf Desktop-Rechnern funktioniert das Scrollen nur nach rechts, nicht wenn nach links etwas über den Anzeigebereich rausgeht, d.h. das Scrollen funktioniert dann nicht wirklich befriedigend – dann lieber nicht. Mobilgeräte stellen ihr Scrollverhalten anders her – da geht es dann in beide Richtungen.

Eine elegantere Lösung gibt es vermutlich nur mit JavaScript oder jQuery. Bis jetzt bin ich nicht fündig geworden – aber eben auch mangels prägnantem Suchbegriff …
Heißt: auch wenn ich jetzt erstmal eine Lösung habe, bin ich nach wie vor an weiteren Lösungsansätzen interessiert.

Danke und Gruß
helix