Toon dubbele foto op archief pagina
Overzicht
Autobedrijf en voertuigen plugin
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.
Oplossing
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;