Help needed with JQuery FancyBox: I encountered a 404 error when trying to enlarge small images.
Here is the code that I used:
<a class="fancybox-buttons" data-fancybox-group="button" href="images/gallery/1_b.png" style="margin-right:100px;"><img src="images/gallery/1_s.png" alt="" /></a>
<a class="fancybox-buttons" data-fancybox-group="button" href="images/gallery/2_b.png" style="margin-right:100px;"><img src="images/gallery/2_s.png" alt="" /></a>
Upon checking the page source, it shows:
images/Skeleton/images/gallery/1_b.png 404 (Not Found)
images/Skeleton/images/gallery/2_b.png 404 (Not Found)
The version of JQuery Fancybox being used is jquery.fancybox.js?v=2.1.5.
Javascript code included:
<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<!-- Add Thumbnail helper (optional) -->
<link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<!-- Add Media helper (optional) -->
<script type="text/javascript" src="source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript">
$(document).ready(function() {
/*
* Simple image gallery. Uses default settings
*/
$('.fancybox').fancybox();
/*
* Different effects
*/
// Change title type, overlay closing speed
$(".fancybox-effects-a").fancybox({
helpers: {
title : {
type : 'outside'
},
overlay : {
speedOut : 0
}
}
});
// Disable opening and closing animations, change title type
$(".fancybox-effects-b").fancybox({
openEffect : 'none',
closeEffect :
.....(Text shortened for brevity)