Fremhæve små billeder

Fremhæve små billeder
HTML
<div id="main">
        <figure> 
            <img src="/i/jquery/dynamiske-HTML-elementer/img_fremhaev/tiger.jpg" class="thirdscreen_width" alt="Billede 1">
            <figcaption><p>En farlig tiger</p></figcaption>
        </figure>

	<p>Lorem Ipsum tekst....</p>

        <figure> 
            <img src="/i/jquery/dynamiske-HTML-elementer/img_fremhaev/panter.jpg" class="halvscreen_width" alt="Billede 2">       
            <figcaption><p>Panteren er flink</p></figcaption>  
        </figure>

	<p>Lorem Ipsum tekst....</p>

        <figure> 
            <img src="/i/jquery/dynamiske-HTML-elementer/img_fremhaev/gepard.jpg" class="halvscreen_width" alt="Billede 3">
            <figcaption><p>Geparden sover</p></figcaption>           	
        </figure>
    
    <p>Lorem Ipsum tekst....</p>
</div> <!-- END OF main -->
CSS
html  { 
	font-size: 62.5%; 
}
#main, .fixed_height, figure, img, figcaption, figcaption p  { 
	padding: 0; 
	margin: 0;
}
figure, figcaption  { 
	display: block; 
}
#main   { 
	position: relative;
    width: 100%;
	max-width: 690px; 
	padding: 30px 12px 60px 12px; 
	margin: 0 auto;
	box-sizing: border-box;
	border: 2px solid green;
}
figure {
	text-align: center;
	padding: 12px 0;
	border: 1px solid red;
	border-radius: 30px; 
	cursor: pointer;
}
figcaption p  {
	font-size: 1.2rem;
	color: grey;
}
.figure_fullscreen  {
	position: absolute;
	z-index: 5000;
	left: 5%;
	right: 5%;
	width: 90%;
	background: rgba(0,0,0,0.2);
	background: white;
}
.thirdscreen_width, .halvscreen_width {
	display: block;
    width: 24%;
    height: auto;
	margin: 0 auto;
	border: 3px solid orange;
}
.halvscreen_width {
    width: 48%;
}
JQuery
$('figure').click(function() {
	if ($(this).hasClass('figure_fullscreen')){
    		$('#main').css({'position':'relative'});
		$('figure').removeClass('figure_fullscreen'); 
  	} else {   
    		$('figure').removeClass('figure_fullscreen'); 
    		$('#main').css({'position':'static'});
    		$(this).addClass('figure_fullscreen'); 
	}
});
Fremhæve små billeder - med fast højde i container
HTML
<div id="main">
    <div class="fixed_height">	
        <figure> 
            <img src="/i/jquery/dynamiske-HTML-elementer/img_fremhaev/tiger.jpg" class="thirdscreen_width" alt="Billede 1">
            <figcaption><p>En farlig tiger</p></figcaption>
        </figure>
    </div>

	<p>Lorem Ipsum tekst....</p>

    <div class="fixed_height">	
        <figure> 
            <img src="/i/jquery/dynamiske-HTML-elementer/img_fremhaev/panter.jpg" class="halvscreen_width" alt="Billede 2">       
            <figcaption><p>Panteren er flink</p></figcaption>  
        </figure>
    </div>

	<p>Lorem Ipsum tekst....</p>

    <div class="fixed_height">
        <figure> 
            <img src="/i/jquery/dynamiske-HTML-elementer/img_fremhaev/gepard.jpg" class="halvscreen_width" alt="Billede 3">
            <figcaption><p>Geparden sover</p></figcaption>           	
        </figure>
    </div>
    
    <p>Lorem Ipsum tekst....</p>
</div> <!-- END OF main -->
CSS
html  { 
	font-size: 62.5%; 
}
#main, .fixed_height, figure, img, figcaption, figcaption p  { 
	padding: 0; 
	margin: 0;
}
figure, figcaption  { 
	display: block; 
}
#main   { 
	position: relative;
    width: 100%;
	max-width: 690px; 
	padding: 30px 12px 60px 12px; 
	margin: 0 auto;
	box-sizing: border-box;
	border: 2px solid green;
}
.fixed_height {
	visibility: visible;
	height: 250px;
	padding: 6px 0;
	border: 1px solid blue;
}
figure {
	text-align: center;
	padding: 12px 0;
	border: 1px solid red;
	border-radius: 30px; 
	cursor: pointer;
}
figcaption p  {
	font-size: 1.2rem;
	color: grey;
}
.figure_fullscreen  {
	position: absolute;
	z-index: 5000;
	left: 5%;
	right: 5%;
	width: 90%;
	background: rgba(0,0,0,0.2);
	background: white;
}
.thirdscreen_width, .halvscreen_width {
	display: block;
    width: 24%;
    height: auto;
	margin: 0 auto;
	border: 3px solid orange;
}
.halvscreen_width {
    width: 48%;
}
JQuery
$('figure').click(function() {
	if ($(this).hasClass('figure_fullscreen')){
    		$('#main').css({'position':'relative'});
		$('figure').removeClass('figure_fullscreen'); 
  	} else {   
    		$('figure').removeClass('figure_fullscreen'); 
    		$('#main').css({'position':'static'});
    		$(this).addClass('figure_fullscreen'); 
	}
});

Opsætning af elementerne i HTML og CSS

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:
Billede 1

En farlig tiger

Billede 2

Panteren er flink

Billede 3

Geparden sover

Opret class til at fremhæve billedet

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;
}

Indsæt Jquery

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:
Billede 1

En farlig tiger

Billede 2

Panteren er flink

Billede 3

Geparden sover

Fast højde på containeren

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.

Fremhæve små billeder - demo
DEMO