next_image_link() Bild durch Icon ersetzen

  • Hallo,

    ich lasse mir zur Navigation durch meine Bildergalerien den Link zum nächsten Bild mit der Funktion next_image_link() ausgeben. Nun will ich an der Stelle aber nicht das nächste Bild oder einen Text sehen, sondern würde gerne ein Pfeil-Icon verlinken. Hat jemand eine Idee, wie das gehen könnte?

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • du könntest den php-Code in span setzen

    PHP
    <span class="previous"><?php previous_image_link(); ?></span>
        <span class="next"><?php next_image_link();?></span>




    und dann über css deinen Pfeil definieren

    ungefähr so (fehlt noch die Ausrichtung und natürlich deiner Pfeilgröße anpassen)

    Code
    span.previous{
        background: url("images/previous_pfeil_icon.png") no-repeat scroll 0 0 transparent;
        cursor: pointer; 
        font-size: 0;
        line-height: 0;    
        height: 20px;
        width: 20px;
    }
    Code
    font-size: 0;
        line-height: 0;

    blendet den Text aus

    das geht auch alternativ mit z.B.

    Code
    text-indent: -9999px;
  • Hmm, damit ist der Text weg, aber das Bild nicht klickbar. as Problem ist ja, dass next_image_link() schon einen kompletten Link von <a>bis</a> ausgibt. D.h. ein <a><img /></a> geht nicht.

  • natürlich ist der Pfeil klickbar, der Link ist ja noch vorhanden.......nur der Text wird durch den Pfeil ersetzt

    aber ich bin kein Hellseher, kann also nicht sehen was bei dir falsch ist

    und einen Link zu deiner Seite gibt es ja nicht :wink:

  • Sorry, ich mach das an einer lokalen Testinstallation. Der Code ist:

    PHP
    <!--Begin navigation-->
                    <div class="navicontainer">
                        <span class="pfeilrechts">
                            <?php next_image_link(0); ?>
                        </span>
                    </div>
  • nun müsste eigentlich funktionieren

    kannst ja mal testweise

    Code
    text-indent: -9999px;


    verwenden statt

    Code
    font-size: 0;
        line-height: 0;

    funktioniert natürlich nur, wenn auch ein next Image vorhanden ist, sonst gibts nix zu klicken

  • Geht auch nicht. Ich hab mir zwischendurch auch mal den Link anzeigen lassen, der Text kommt auf jeden Fall, ist auch das erste Bild der Galerie. Wenn ich ihn ausbleden, ist dann nur noch das Bild des Pfeils zu sehen und nichts ist klickbar.

  • Tja, da kann man nichts machen... Trotzdem danke für deine Hilfe. So doof wie meine User sich manchmal anstellen, biete ich denen sowieso wohl besser eine Bild + Text Lösung an ;-)

  • ja hab was vergessen, das Bild sitzt nicht auf dem Link

    verwende mal

    Code
    .pfeilrechts a

    oder

    Code
    .pfeilrechts a, .pfeilrechts span

    statt

    Code
    span.pfeilrechts
  • Perfekt, jetzt funktioniert es wie gewollt. Der Pfeil verschwindet auch wenn kein nächstes Bild mehr da ist. Ich habe die zweite Methode benutzt, kannst ja mal schauen, ob das bei dir im Blog auch gehen würde. Da ist der Pfeil nach links auf der Startseite ja noch zu sehen, obwohl man bereits auf der ersten Seite ist. Also vielen Dank nochmal!

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!