Toon dubbele foto op archief pagina

Je ziet het steeds vaker. Een overzichtpagina (zoeken en/of archief) waarbij je op de hover van een afbeelding ineens een andere foto ziet. Bijvoorbeeld een foto van het exterieur van een auto en zodra je met de muis op de foto gaat staan zie je een foto van de binnenzijde. Op deze manier geef je bezoekers direct iets meer informatie over het voertuig, zonder dat ze onnodig hoeven klikken.

De oplossing hiervoor is eenvoudiger dan je denkt. Als gebruiker van onze Autobedrijf en voertuigen plugin kun je de functie gebruiken die hieronder staat. De functie haalt de eerste twee foto's op die bij het voertuig horen en zet deze - in dit geval - in een span element. Het tweede spanelement krijgt daarbij de class "back", welke je op de hover kunt activeren.

$count = 0;
foreach ($voertuig->afbeeldingen as $foto):
    $gallery_url = wp_get_attachment_image_src($foto->ID, 'medium'); 
    if ($count == '1'):
        echo '<span class="face"><img src="'.$gallery_url[0].'" class="" alt="" ></span>';
    elseif($count == '2'):
        echo '<span class="face back"><img src="'.$gallery_url[0].'" class="" alt="" ></span>';
        break;
    endif; $count++;
endforeach;

That's it

Meer dan bovenstaande code heb je niet nodig. Gebruik de code in je overzicht-, zoek- en/of archiefpagina en je haalt de eerste twee foto's van de voertuigen op. Zorg er natuurlijk nog wel voor dat je twee "triggerende" foto's gebruikt.

Kom je er niet helemaal uit? Laat het ons weten. We helpen je graag. Laat een vraag of reactie achter via ons reactiesysteem hieronder of mail info@tussendoor.nl