Fremhæve små billeder

Er der billeder på hjemmesiden som er små og kan være svære at se, er det en god ide at give den besøgende mulighed for se dem i stor størrelse. Dette kan lade sig gøre ved hjælp af JQuery.

Når et billede indsættes på siden ved hjælp af HTML5, bør det opbevares i elementet 'figure' - måske har det en class tilføjet, som kan styre skaleringen i forhold til et responsivt layout - læs artiklen "Skalering af billeder i responsive layout":

Elementet 'figure' indeholdende billedet vil som regel være indsat i en container - for eksempel elementet 'main' - som opbevarer alt indhold på siden, og blandt andet definerer sidens bredde.

Sidens opsætning med 3 billeder kan se sådan ud:

HTML

<main>
	<figure> 
		<img src="/images/tiger.jpg" class="thirdscreen_width" alt="Se en tiger">       
		<figcaption><p>En farlig tiger</p></figcaption>  
	</figure>
	<figure> 
		<img src="/images/panter.jpg" class="halvscreen_width" alt="En flot panter">       
		<figcaption><p>Panteren er flink</p></figcaption>  
	</figure>
	<figure> 
		<img src="/images/panter.jpg" class="halvscreen_width" alt="Schhhh zzz">       
		<figcaption><p>Geparden sover</p></figcaption>  
	</figure>
</main>

CSS

main   { 
	position: relative;
	width: 100%;
	max-width: 690px;
	padding: 10px 12px; 	
	margin: 0 auto;
	box-sizing: border-box;
	border: 2px solid green;
}
figure {
	padding: 12px 0;
	border: 1px solid red;
	border-radius: 30px; 
	text-align: center;
	cursor: pointer;
}

Resultatet bliver noget lignende dette:

En farlig tiger

Panteren er flink

Geparden sover

Når billedet skal fylde skærmens bredde, er det nødvendigt at enten elementet 'figure' eller billedet selv ('img') kan overskride containeren 'main's max-bredde på 690px - det er den grønne ramme i eksemplet.

Dette kan lade sig gøre ved at tilføje enten billedet eller 'figure' en class med en 'position: absolute' og en højere 'stacking' med 'z-index' - nu kan billedet strække sig udover 'main's grønne ramme.

Her oprettes class'en 'figure_fullscreen' til elementet 'figure':

CSS

.figure_fullscreen  {
	position: absolute; /* TRÆK 'figure' UD AF CONTAINEREN main*/
	z-index: 5000;
	left: 5%;
	right: 5%;
	width: 90%;
	background: white;
}

Udover at 'figure' skal tildeles en class med 'position: absolute', er det også nødvendigt, at ændre stylingen for 'main' fra 'position: relative' til 'static'. Dette kan ske ved at oprette endnu en class og tilføje den til 'main', eller som i dette eksempel ved at ændre stylingen ved hjælp af JQuery - se funktionen herunder.

Når der klikkes på billedet og 'main' er i 'position: relative', aktiveres 'figure_fullscreen' og 'figure' vises i stor størrelse - klikkes der på billedet mens 'main' er 'static', så de-aktiveres 'figure_fullscreen' og 'figure' vender tilbage til den oprindelige styling:

JQuery

$('figure').click(function() {  // KLIK *figure'..    
	if ($(this).hasClass('figure_fullscreen')){  // HVIS DENNE 'figure' HAR 'figure_fullscreen' -
    	$('#main').css({'position':'relative'});  // - SKIFT TIL 'relative' - 
    	$('figure').removeClass('figure_fullscreen');  // - FJERN 'figure_fullscreen' FRA ALLE 'figure'
  	} else {  // ELLERS -
    	$('figure').removeClass('figure_fullscreen');  // - FJERN 'figure_fullscreen' FRA ALLE 'figure'
    	$('#main').css({'position':'static'});  // - SKIFT TIL 'static' - 
    	$(this).addClass('figure_fullscreen');  // TILFØJ 'figure_fullscreen' TIL DENNE 'figure' 
	}
});

Klik på billederne:

En farlig tiger

Panteren er flink

Geparden sover

Læg mærke til hvordan 'main' med den grønne ramme mister højde, når der klikkes på et billede - dette skyldes at elementet 'figure' trækkes ud af 'main', når class 'figure_fullscreen' tilføjes med JQuery.

Skal 'main' bevare sin højde når der klikkes på 'figure', er det nødvendigt at wrappe 'figure' i en container for eksempel 'figure_wrap' med en fast højde som kan optage pladsen, når 'figure' trækkes ud. En ulempe ved dette er, at alle hjemmesidens billeder vil få en max-højde svarende til højden af 'figure_wrap'.

Her er en demo, som viser 3 billeder som kan forstørres ved at klikke - billederne er indsat i en container, så sidens indhold ikke ændrer højde, når der klikkes på et billede. Find den samlede kode for opsætningen under "kode" øverst på dennes side.