Develop Reference

Uncaught TypeError: jQuery(...).amazingslider is not a function

I've created a video lightbox slider using amazing slider javascript, and the code is working fine on local, but as I'm implementing it on my template then a very strange error occurs. however, all the required CDN is added
Uncaught TypeError: jQuery(...).amazingslider is not a function
Here is the complete code which I'm using
<script type='text/javascript' src='https://amazingslider.com/wp-includes/js/jquery/jquery.min.js?ver=3.5.1' id='jquery-core-js'></script>
<script type='text/javascript' src='https://amazingslider.com/wp-content/uploads/amazingslider/sharedengine/amazingslider.js?ver=4.2' id='amazingslider-script-js'></script>
<script src="https://amazingslider.com/wp-content/uploads/amazingslider/19/sliderengine/initslider.js"></script>
<style type="text/css">
.demo-slider-3 {
margin: 0em auto 8em;
max-width: 600px;
text-align: center;
}
.amazingslider-bottom-shadow-0 {
display: none !important;
}
</style>
<div class="demo-slider-3">
<div id="amazingslider-19" style="display:block;position:relative;margin:15px auto 30px;">
<ul class="amazingslider-slides" style="display:none;">
<li>
<a href="#videolink" class="html5lightbox">
<img src="#imagelink"/>
</a>
</li>
<li>
<a href="#videolink" class="html5lightbox">
<img src="#imagelink"/>
</a>
</li>
<li>
<a href="#videolink" class="html5lightbox">
<img src="#imagelink"/>
</a>
</li>
</ul>
<ul class="amazingslider-thumbnails" style="display:none;">
<li><img src="#imagelink"/></li>
<li><img src="#imagelink"/></li>
<li><img src="#imagelink"/></li>
</ul>
</div>
</div>

<script language="JavaScript">
function insertToHead(src) {
var head = document.getElementsByTagName("head")[0];
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', src);
head.appendChild(script);
};
var jQueryLoaded = setInterval(function(){
if (typeof jQuery !== 'undefined')
{
clearInterval(jQueryLoaded);
insertToHead('http://yourwebsite.com/myslider/amazingslider.js');
}
}, 500);
var AmazingSliderLoaded = setInterval(function(){
if ((typeof jQuery !== 'undefined') && jQuery.fn.amazingslider)
{
clearInterval(AmazingSliderLoaded);
insertToHead('http://yourwebsite.com/myslider/initslider-1.js');
}
}, 500);
</script>
By using this script I'm able to run it on my website

Fancybox using multiple galleries on same page

I have a current Fancybox set up to display a youtube video or a gallery slideshow. Each is initiated by clicking on a play button (html object) containing the following links:
youtube:
<a class="youtube shadowborder" href="#youtubeDiv"><img src="$thisfolderurl$youtubePlay.png" border="0"></a>
gallery1:
<a class="fancyboxLauncher shadowborder" href="#SSGalleryDiv"><img src="$thisfolderurl$youtubePlay.png" border="0"></a>
gallery2:
<a class="fancyboxLauncher shadowborder" href="#SSHeidiDiv"><img src="$thisfolderurl$youtubePlay.png" border="0"></a>
The HTML in body is:
<div class='hidden'>
<div id="youtubeDiv">
<iframe width="853" height="480" src="https://www.youtube.com/embed/uF1qDNyg4Lw?rel=0&fs=1&autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
<div id="SSGalleryDiv" class='hidden'>
<a class="fancybox" href="$thisfolderurl$slider1_b.JPG" title="Pups have all gone to their new homes."></a>
<a class="fancybox" href="$thisfolderurl$slider2_b.JPG" title=""></a>
<a class="fancybox" href="$thisfolderurl$slider3_b.JPG" title=""></a>
</div>
<div id="SSHeidiDiv" class='hidden'>
<a class="fancybox" href="$thisfolderurl$Heidi1.jpg" title="Pups have all gone to their new homes."></a>
<a class="fancybox" href="$thisfolderurl$Heidi2.jpg" title=""></a>
<a class="fancybox" href="$thisfolderurl$Heidi3.jpg" title=""></a>
</div>
Code in head is:
<!-- Add jQuery library -->
<script type="text/javascript" src="$thisfolderurl$jquery_1.10.1.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="$thisfolderurl$jquery.mousewheel_3.0.6.pack.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="$thisfolderurl$jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="$thisfolderurl$jquery.fancybox.css?v=2.1.5" media="screen" />
<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="$thisfolderurl$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 (this is optional) -->
<link rel="stylesheet" type="text/css" href="$thisfolderurl$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 (this is optional) -->
<script type="text/javascript" src="$thisfolderurl$jquery.fancybox_media.js?v=1.0.6"></script>
<style type="text/css">
.hidden {
display: none;
}
a.shadowborder img,a.shadowborder:link,a.shadowborder:visited {
float: left;
border: none;}
a.shadowborder:hover{
border:2px solid white;
border-radius: 14px;
-webkit-box-shadow: 0 0 12px white;
box-shadow: 0 0 12px white;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".fancyboxLauncher").on("click", function(){
$(".fancybox").eq(0).trigger("click");
return false;
});
// fancybox for youtube
$(".youtube").fancybox({
padding: 0,
openEffect: 'elastic',
openSpeed: 250,
closeEffect: 'elastic',
closeSpeed: 150,
closeClick: true,
closeBtn: true,
helpers: {
overlay: {
opacity: 0.4,
css: {
'background': '#50a382'
}
}
}
});
// fancybox for images
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
padding : 0,
autoPlay: 'true',
playSpeed: 4000,
closeBtn: true,
arrows:true,
helpers: {
overlay: {
opacity: 0.4,
css: {
'background': '#50a3e2'
}
}
}
});
}); // ready
</script>
I am using V2. Now that I have added the 2nd gallery div (SSHeidiDiv) the slideshow goes through all the images in both galleries instead of just the images associated with that div. I have tried many solutions offered but can't get them to work so decided to ask for help here.
The other issue I came upon is relating to the youtube video. I set it to autoplay, which is fine for the current video but when I tested the same code using a video that had sound I discovered the video was playing in the background, i.e. you could hear the sound but the video was suppressed, no doubt by the hidden div. Have not been able to find a cure short of removing autoplay.
Any help you can offer would be appreciated.

Finally found a way to resolve my issues. The code in "head" is now
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox-trigger").click(function() {
$("a[rel='" + $(this).data('trigger-rel') + "']").eq(0).trigger('click');
return false;
});
// fancybox for youtube
$(".youtube").fancybox({
padding: 0,
openEffect: 'elastic',
openSpeed: 250,
closeEffect: 'elastic',
closeSpeed: 150,
closeClick: true,
closeBtn: true,
helpers: {
overlay: {
opacity: 0.4,
css: {
'background': '#50a382'
}
}
}
});
// fancybox for images
$(".fancybox").fancybox({
padding : 0,
autoPlay: 'true',
playSpeed: 4000,
closeBtn: true,
arrows:true,
helpers: {
overlay: {
opacity: 0.4,
css: {
'background': '#50a3e2'
}
}
}
});
}); // ready
</script>
The html is now
<div id='wrap'>
<div id="youtubeDiv" class='hidden'>
<iframe width="853" height="480" src="https://www.youtube.com/embed/uF1qDNyg4Lw?rel=0&fs=1&autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
<div id="fancyDiv" class='hidden'>
<a rel="gallery" class="fancybox" href="$thisfolderurl$slider1_b.JPG" title="Pups have all gone to their new homes."></a>
<a rel="gallery" class="fancybox" href="$thisfolderurl$slider2_b.JPG" title=""></a>
<a rel="gallery" class="fancybox" href="$thisfolderurl$slider3_b.JPG" title=""></a>
<a rel="gallery1" class="fancybox" href="$thisfolderurl$Heidi1.jpg" title="Pups have all gone to their new homes."></a>
<a rel="gallery1" class="fancybox" href="$thisfolderurl$Heidi2.jpg" title=""></a>
<a rel="gallery1" class="fancybox" href="$thisfolderurl$Heidi3.jpg" title=""></a>
</div>
</div>
The link code attached to my play button image for gallery1 is now
<a data-trigger-rel="gallery1" class="fancybox-trigger shadowborder" href="#fancyDiv"><img src="$thisfolderurl$youtubeGroup2Play.png" border="0"></a>
and my link code for gallery is
<a data-trigger-rel="gallery" class="fancybox-trigger shadowborder" href="#fancyDiv"><img src="$thisfolderurl$youtubeGroup2Play.png" border="0"></a>
Works well and I am so relieved it has finally come together. Many thanks to the clues given in the many fiddles I examined and tested.

how to create JQuery picture viewer with next and back buttons

Am Looking for help to solve this problem i would like to create a simple image viewer with the following specifications.
MySQL Fetch Images
User Click One Image to view (picture-viewer popup, selected image
shown)
User be able to see NEXT image by clicking NEXT
User be able to see PREV image by clicking PREV
On ESC picture-viewer closed
Since am not good in JavaScript Nor JQuery so i just applied the basic to produce the following code which is not able to meet minimum expectations. Instead of showing the user selected image is showing the first image from the unordered list and is not working on IE unless i apply auto start the function i don't need. NEXT/PREV picture has to be shown only if user click next/prev.
<script language="javascript">
$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
$('.ppt li:first').addClass('first');
var cur = $('.ppt li:first');
var interval;
$('#fwd').click( function() {
goFwd();
showPause();
} );
$('#back').click( function() {
goBack();
showPause();
} );
function goFwd() {
stop();
forward();
start();
}
function goBack() {
stop();
back();
start();
}
function back() {
cur.fadeOut( 1000 );
if ( cur.attr('class') == 'first' )
cur = $('.ppt li:last');
else
cur = cur.prev();
cur.fadeIn( 1000 );
}
function forward() {
cur.fadeOut( 1000 );
if ( cur.attr('class') == 'last' )
cur = $('.ppt li:first');
else
cur = cur.next();
cur.fadeIn( 1000 );
}
// close em_picture on esc press
window.document.onkeydown = function (e)
{
if (!e){
e = event;
}
if (e.keyCode == 27){
em_picture_close();
}
}
function em_picture_close(){
document.getElementById('b1').style.overflow='auto';
$("#em_picture").hide();
$("#em_viewer").hide();
$(".images_tab").show();
$("#chart").show();
}
</script>
HTML
<div id="images_container">
<div id="em_picture" style="display:none;">
<div id="loadimage">
<ul class="ppt">
<li><img src="moments/1372072563PH.png" class="imgview" border="0" id="56"></li>
<li><img src="moments/1372084261art.jpg" class="imgview" border="0" id="3"></li>
<li><img src="moments/1372084531Hot.jpg" class="imgview" border="0" id="6"></li>
<li><img src="moments/137207211166.jpg" class="imgview" border="0" id="40"></li>
</ul>
<span class="prev" id="back" style="display:none" title="prev image"></span>
<span class="next" id="fwd" style="display:none" title="next image"></span>
</div>
</div>
</div>
<!-- table where the first image can be selected to be previewed -->
<table cellpadding="0" cellspacing="0" border="0" class="imagestable">
<tr>
<td id="" class="album_image">
<span class="moments_details" style="display:none;">share . hide . delete</span>
<img src="moments/1372072563PH02053J.JPG" class="my_em_moments" border="0" id="showme">
</td>
</table>
to those who can figure out this in other ways please do so, already made working code is accepted
Thanks and regards

ok for your ease, I'm eleborating it step by step:
download the files from the link.
place the lib and source folder in another folder.
place your file in which you're coding in the same folder.
place all images in same folder or whereever you want to place them
and write the code as
<!DOCTYPE html>
<html>
<head>
<title>Picture Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="lib/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="lib/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen" />
<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>
<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>
<script type="text/javascript" src="source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('.fancybox').fancybox(); });
</script>
<style>
.fancybox-custom .fancybox-skin
{
box-shadow: 0 0 50px #222;
}
body
{
max-width: 700px;
margin: 0 auto;
}
</style>
</head>
<body>
<h3>Gallery Style 1</h3>
<p>
<a class="fancybox" href="1_b.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="1_s.jpg" alt="" /></a>
<a class="fancybox" href="2_b.jpg" data-fancybox-group="gallery" title="Etiam quis mi eu elit temp"><img src="2_s.jpg" alt="" /></a>
<a class="fancybox" href="3_b.jpg" data-fancybox-group="gallery" title="Cras neque mi, semper leon"><img src="3_s.jpg" alt="" /></a>
<a class="fancybox" href="4_b.jpg" data-fancybox-group="gallery" title="Sed vel sapien vel sem uno"><img src="4_s.jpg" alt="" /></a>
</p>
</body>
</html>

As you want to create something like picture gallery, jQuery fancybox will be the best option for it. The simple and same as your requirements. please see here.

ok try this code :
<!DOCTYPE html>
<html>
<head>
<title>Picture Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="lib/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="lib/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen" />
<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>
<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>
<script type="text/javascript" src="source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('.fancybox-buttons').fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : {
type : 'inside'
},
buttons : {}
},
afterLoad : function() {
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
}
}); });
</script>
<style>
.fancybox-custom .fancybox-skin
{
box-shadow: 0 0 50px #222;
}
body
{
max-width: 700px;
margin: 0 auto;
}
</style>
</head>
<body>
<h3>Gallery Style 1</h3>
<p>
<a class="fancybox-buttons" data-fancybox-group="button" href="1_b.jpg"><img src="1_s.jpg" alt="" /></a>
<a class="fancybox-buttons" data-fancybox-group="button" href="2_b.jpg"><img src="2_s.jpg" alt="" /></a>
<a class="fancybox-buttons" data-fancybox-group="button" href="3_b.jpg"><img src="3_s.jpg" alt="" /></a>
<a class="fancybox-buttons" data-fancybox-group="button" href="4_b.jpg"><img src="4_s.jpg" alt="" /></a>
</p>
</body>
</html>

<script type="text/javascript">
$(document).ready(function(e) {
$(".mqimg").mouseover(function()
{
$("#imgprev").animate({height: "250px",width: "70%",left: "15%"},100).html("<img src='"+$(this).attr('src')+"' width='100%' height='100%' />");
})
$(".mqimg").mouseout(function()
{
$("#imgprev").animate({height: "0px",width: "0%",left: "50%"},100);
})
});
</script>
<style>
.mqimg{ cursor:pointer;}
</style>
<div style="position:relative; width:100%; height:1px; text-align:center;">
<div id="imgprev" style="position:absolute; display:block; box-shadow:2px 5px 10px #333; width:70%; height:0px; background:#999; left:15%; bottom:15px; "></div>
</div>

Fancybox - "The requested content cannot be loaded."

I'm experiencing a problem with Fancybox on my portfolio. It works on every page but one - http://pandadol.com/candyshop.html.
Images 7, 8, 9, 11, 12, 13, 23, 24, 25, 27 give me a "requested content cannot be loaded error", and opening them up in a new tab returns "You don't have permission to access /pics/candyshop/7.jpg on this server. Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request."
All the images are definitely on the server. Here is the code -
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready(function(){
// iOS Hover Event Class Fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
$(".menu").click(function(){ // Update class to point at the head of the list
});
}
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-24042513-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
</script>
<!-- Add jQuery library -->
<script type="text/javascript" src="../lib/jquery-1.8.0.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.0"></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.0" media="screen" />
<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.3" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.3"></script>
<!-- Add Thumbnail helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.6" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.6"></script>
<!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.3"></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 : 'none',
helpers : {
title : {
type : 'over'
}
}
});
// Set custom style, close if clicked, change title type and overlay color
$(".fancybox-effects-c").fancybox({
wrapCSS : 'fancybox-custom',
closeClick : true,
openEffect : 'none',
helpers : {
title : {
type : 'inside'
},
overlay : {
css : {
'background' : 'rgba(238,238,238,0.85)'
}
}
}
});
// Remove padding, set opening and closing animations, close if clicked and disable overlay
$(".fancybox-effects-d").fancybox({
padding: 0,
openEffect : 'elastic',
openSpeed : 150,
closeEffect : 'elastic',
closeSpeed : 150,
closeClick : true,
helpers : {
overlay : null
}
});
/*
* Button helper. Disable animations, hide close button, change title type and content
*/
$('.fancybox-buttons').fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : {
type : 'inside'
},
buttons : {}
},
afterLoad : function() {
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
}
});
/*
* Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
*/
$('.fancybox-thumbs').fancybox({
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
arrows : false,
nextClick : true,
helpers : {
thumbs : {
width : 50,
height : 50
}
}
});
/*
* Media helper. Group items, disable animations, hide arrows, enable media and button helpers.
*/
$('.fancybox-media')
.attr('rel', 'media-gallery')
.fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
arrows : false,
helpers : {
media : {},
buttons : {}
}
});
/*
* Open manually
*/
$("#fancybox-manual-a").click(function() {
$.fancybox.open('1_b.jpg');
});
$("#fancybox-manual-b").click(function() {
$.fancybox.open({
href : 'iframe.html',
type : 'iframe',
padding : 5
});
});
$("#fancybox-manual-c").click(function() {
$.fancybox.open([
{
href : '1_b.jpg',
title : 'My title'
}, {
href : '2_b.jpg',
title : '2nd title'
}, {
href : '3_b.jpg'
}
], {
helpers : {
thumbs : {
width: 75,
height: 50
}
}
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</head>
<body>
<div id="wrapper">
<div class="header clear">
<h1 class="title">RACHEL SHI<br></h1>
<h1 class="title">DESIGN + ILLUSTRATION</h1>
<ul class="menu">
<li class="first">Menu<div class="droparrow"></div></li>
<li>about</li>
<li>#pandadol</li>
<li>pandadol.tumbl</li>
<li>pinterest</li>
<li>instagram</li>
<li>cv</li>
</ul>
</div>
<div class="content">
<div class="post-meta">
<h1>The Candy Shop Project</h1>
<div class="post-date"> 2012<P>
<b>Personal</b><br>
For 5 months I was a sales assistant at a candy shop. I took any lull in activity to draw customers. Here are the results.
</div>
</div>
<div class="post-content">
<p>
<a class="fancybox" href="../pics/candyshop/1.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/1.jpg" alt="" / width="600px"></a>
<a class="fancybox" href="../pics/candyshop/2.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/2_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/3.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/3_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/4.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/4_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/5.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/5_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/6.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/6_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/7.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/7_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/8.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/8_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/9.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/9_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/10.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/10_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/11.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/11_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/12.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/12_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/13.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/13_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/14.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/14_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/15.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/15_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/16.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/16_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/17.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/17_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/19.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/19_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/18.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/18_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/20.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/20_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/21.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/21_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/22.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/22_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/23.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/23_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/24.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/24_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/25.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/25_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/26.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/26_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/27.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/27_s.jpg" alt="" /></a>
<a class="fancybox" href="../pics/candyshop/28.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/28_s.jpg" alt="" /></a>
</p>
</div>
Any advice would be appreciated. Thank you!

This looks like a simple permissions error as when you try and view one of the non-loading images directly in a browser you get a 403 Forbidden response.
Image no 7 has an additional fancybox.ajax class not present on the others which is probably causing the issue you mention in your comment to your original post.

How to change the margins between the items in fisheye effect in javascript

I saw this fish eye effect rendering js and tried to use it in a site HTML.It works fine but i am unable to change the space between the items. Does anybody know how to change the space between the items?
This is the Html/js code :
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 75,
proximity: 90,
halign : 'center'
}
)
}
);
</script><div id="topbutton-container">
<div style="float:left; width:17px; margin:0px;"><img src="images/topbutton-left.jpg" /></div>
<div id="topbutton" align="center"><div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="index.html"><img src="images/home.png" alt="home" /><span>Home</span></a>
<a class="dock-item" href="projects.html"><img src="images/projects.png" alt="contact" /><span>Projects</span></a>
<a class="dock-item" href="course.html"><img src="images/course.png" alt="portfolio" /><span>Course</span></a>
<a class="dock-item" href="testimonial.html"><img src="images/music.png" alt="music" /><span>Testimonial</span></a>
<a class="dock-item" href="latest-updates.html"><img src="images/history.png" alt="history" /><span> Latest Updates</span></a>
<a class="dock-item" href="contact.html"><img src="images/contact.png" alt="calendar" /><span>Contact</span></a>
</div>
</div></div>
<div style="float:left; width:17px; margin-top:0px;"><img src="images/tobutton-right.jpg" /></div>
</div>

do you included all the supporting files?
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/interface.js"></script>
<link type="text/css" href="css/interface-fisheye.css" rel="stylesheet">