I'm trying to make an image gallery on my site so that I can put screenshots onto blog articles where they will be relevant. After spending several hours working on a custom jquery solution using my own code and getting no help whatsoever from anywhere on the net, I caved and decided to use lightbox.
I followed the instructions to set it up on this page however, it still does nothing. Essentially all I've done is put a link to the image on my page...
Here's my code as rendered on the page (url below):
<head>
<link href="/js/lightbox/css/lightbox.css" rel="stylesheet" />
<!--[if lte IE9]>
<link href="/css/ie.css" type="text/css" rel="stylesheet" />
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="/js/lightbox/js/lightbox.min.js"></script>
<script src="/js/lightbox/js/jquery-1.11.0.min.js"></script>
</head>
<body>
<!-- skipping irrelevant content -->
<h3 id="screenshots">Screenshots</h3>
<div class="screenshots">
<a href="http://loganyoung.za.net/images/articles/logan-mvc-error-big.png" data-lightbox="image-1" data-title="My caption">Image #1</a>
<a href="http://loganyoung.za.net/images/articles/logan-mvc-error-big.png" data-lightbox="MVCError"><img src="http://www.loganyoung.za.net/images/articles/logan-mvc-error-big.png" alt="" width="150" height="150" class="alignleft" /></a>
<a href="http://loganyoung.za.net/images/articles/logan-mvc-error-small.png" data-lightbox="MVCError"><img src="http://www.loganyoung.za.net/images/articles/logan-mvc-error-small.png" alt="" width="150" height="150" class="alignleft" /></a>
</div>
<!-- skipping more irrelevant content -->
</body>
</html>
URL http://loganyoung.za.net/error-reporting-in-mvc/
If anyone can tell me what I did wrong, I'd greatly appreciate it.
Just made sure jQuery was referenced in the right place (above all the lightbox crap) woopdeedoo