colorbox jquery script met combinatie van html code werkt niet!!!
de code voorbeeld van colorbox jquery is als volgende op deze site http://www.jacklmoore.com/colorbox/guide/:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<!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>
<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:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<script>
"use strict";
$(document).ready(function(e) {
jQuery('a.gallery').colorbox({rel:'gal'} );
} );
</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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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>
<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:
Code (php)
1
2
2
<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>
<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
Gewijzigd op 23/06/2016 17:01:14 door - Ariën -
ik heb geprobeerd op deze manier maar toch niet gelukt:
Code (php)
1
2
3
4
2
3
4
<div id="content-area"><a href="http://webdesignleren.net/wp-content/uploads/2016/06/johan-150x150.jpg" rel="gal">
<img class=" wp-image" src="http://webdesignleren.net/wp-content/uploads/2016/06/johan-150x150.jpg" alt="johan" width="150" height="150" /></a>
<a href="http://webdesignleren.net/wp-content/uploads/2016/06/john-150x97.jpg" rel="gal">
<img class=" wp-image" src="http://webdesignleren.net/wp-content/uploads/2016/06/john-150x97.jpg" alt="john" width="150" height="97" /></a></div>
<img class=" wp-image" src="http://webdesignleren.net/wp-content/uploads/2016/06/johan-150x150.jpg" alt="johan" width="150" height="150" /></a>
<a href="http://webdesignleren.net/wp-content/uploads/2016/06/john-150x97.jpg" rel="gal">
<img class=" wp-image" src="http://webdesignleren.net/wp-content/uploads/2016/06/john-150x97.jpg" alt="john" width="150" height="97" /></a></div>
johan
het werkt
maar ik wil u kijken deze test website voor zekerheid:http://webdesignleren.net.
johan
Gewijzigd op 24/06/2016 12:58:11 door johannes davidian