de code voorbeeld van colorbox jquery is als volgende op deze site http://www.jacklmoore.com/colorbox/guide/:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="colorbox.css">
<script src="jquery.min.js"></script>
<script src="jquery.colorbox-min.js"></script>
</head>
<body>
<a class='gallery' href='image1.jpg'>Photo_1</a>
<a class='gallery' href='image2.jpg'>Photo_2</a>
<a class='gallery' href='image3.jpg'>Photo_3</a>
</body>
</html>
de script is als volgende:
<script>
"use strict";
$(document).ready(function(e) {
jQuery('a.gallery').colorbox({rel:'gal'} );
} );
</script>
ik heb in header.php van mij wordpress theme deze code toegevoegd:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<link rel="stylesheet" href="/wp-content/themes/garage/colorbox.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="/wp-content/themes/garage/js/jquery.colorbox-min.js"></script>
<?php wp_head(); ?>
<script>
"use strict";
$(document).ready(function(e) {
$('#content-area').find('img').colorbox({rel:'gal'} );
} );
</script>
</head>
terwijl ik heb in wordpress pagina van mij theme deze html code geplakt:
<div id="content-area"><img class=" wp-image" src="http://webdesignleren.net/wp-content/uploads/2016/06/johan-150x150.jpg" alt="johan" width="150" height="150" />
<img class=" wp-image" src="http://webdesignleren.net/wp-content/uploads/2016/06/john-150x97.jpg" alt="john" width="150" height="97" /></div>
als u ziet ik heb boven in script div:#content-area gebruikt en img om de script laten functioneren.
maar het werkt niet.
ik heb andere mogelijkheden geprobeerd maar zonder resultaat, wat kan hierboven fout zijn?
is de fout in script of is de fout bij html coderen?
hoe ik kan deze probleem oplossen?
dank u wel
johan
