So i just finished a website using a twitter-bootstrap template and stumbled upon a little problem. While running the page locally, it all works perfectly, but after uploading the page to the virtual server, prettyPhoto refuses to show half of the pictures on the website, saying: The requested URL /img/gallery/gallery-04.jpg was not found on this server.
As i said, everything works perfectly when i run the page locally. I checked and double checked all the necessary scripts, and everything seems to be in order. In any case, this is my code:
<div class="span6 YDCOZA usability packaging">
<div class="single-item">
<div class="img-box">
<img src="img/gallery/gallery-04.jpg" alt="Alt Text" width="960"; height="720"; >
<div class="single-navigation">
<a class="fullimage" rel="prettyPhoto" href="img/gallery/gallery-04.jpg">
<div class="full-image">
</div>
</a>
</div>
<!-- .single-navigation -->
</div>
<!-- .img-box -->
</div>
<!-- .single-item -->
</div>
<!-- Footer Scripts -->
<script src="js/libs/bootstrap/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/jquery.hoverIntent.minified.js"></script>
<script src="js/plugins.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/script.js"></script>
<!-- Header Scripts -->
<link rel="stylesheet" href="css/prettyphoto.css">
<script src="js/libs/jquery-1.7.2.min.js"></script>
I found the problem. The problem was: the file paths were image.jpg, and the file names where image.JPG. So it was actually a matter a lower/uppercase in the file extension. Now i feel stupid. Oh well. We live, we learn.