I'm trying to show a list of images through fancybox. When each image is clicked, the image initially always appears in top right corner of the browser window. On the second click of the object, the image positions itself correctly. But in both cases the popped-up image is not styled with the usual border and close-symbol.
I followed the tutorial from: http://tutvid.com/webdesign/dreamweaver/how-to-use-fancybox-jquery-tutorial/ And the result just doesn't add up.
How can I make the fancybox command work straight away from the first mouse click?
<script type="text/javascript">
$(document).ready(function(){
$(".fancybox").fancybox();
});
</script>
<head>
<link rel="stylesheet" href="js/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="type/javascrript" src="js/fancybox/source/jquery.fancybox.pack.js"> </script>
<script type="text/javascript" async="" src="https://apis.google.com/js/plusone.js" gapi_processed="true"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/fancyBox/source/jquery.fancybox.pack.js"> </script>
</head>
<body>
<a class="fancybox" href="images/atnight/image11.jpg">
<img src="images/atnight/image11.jpg" width="620" /></a>
<a class="fancybox" href="images/atnight/image10.jpg">
<img src="images/atnight/image10.jpg" width="620" /></a>
</body>
Hope somebody can help :-)
