A&V Autobedrijf & Voertuigen plugin

Toon dubbele foto op archief pagina

Leestijd: 1 minuten (269) words
profile image

Rick de Jong

Strategie

January 05, 2017 07:07

Toon dubbele foto op archief pagina

Voor een slider of hover effect

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;