Q:

fancybox opening on refresh not click

I've been sitting for days going through blogs, code, forum anything that would help me solve the problem.
What I'm trying to do is show a thum image on a page with a summary of information, that on click a bigger image opens in fancybox.
But I have all images in a mysql database and a php page that calls them, here's the code and scripts I'm using.
<script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<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" />

<script type="text/javascript">
$(document).ready(function() {
$.fancybox({ href: "/images/big_pic.php?id=905", type: "image"})
});
</script>

<a class="fancybox" rel="group" href="/images/big_pic.php?id=905"><img src="h/images/small_pic.php?id=905" alt="" /></a>

I have the thumb showing and on page refresh it goes to the fancybox, but on click goes to the /images/big_pic.php?id=905.
I am wanting to use fancybox on several sites and want to buy the licence, but there's no point in buying it if it won't work! Going absolutely nuts with this. 
Hoping someone can help me.

A:

1). You need to have at least this jQuery code :
<script type="text/javascript">
  $(document).ready(function() {
    $(".fancybox").fancybox({
      type: "image"
    }); 
  });
</script>

2). If you also want the link to show fancybox on page load, just trigger a click on the same selector like :
<script type="text/javascript">
 $(document).ready(function () {
     $(".fancybox").fancybox({
         type: "image"
     }).trigger("click"); // <-- show fancybox on page load. Then after every click on the link
 });
</script>

... and you will have the double functionality you are looking for.
3). On the other hand, if you have a gallery and you are triggering it on page load, use the method .eq() to make sure that the first element of the gallery will be triggered like
<script type="text/javascript">
 $(document).ready(function () {
     $(".fancybox").fancybox({
         type: "image"
     }).eq(0).trigger("click"); // <-- show fancybox on page load starting from the first element
 });
</script>

See JSFIDDLE

