I have this problem where a code is working on localhost but not when I upload it to the server.
I want to implement this: Polaroid Photobar Gallery
Here's a link to my website: Zodiac 2013
Note: You need to go the gallery tab to view it.
EDIT: Please view it in Google Chrome for best viewing experience.
I tried using FireBug but to no help. With the Inspect Element feature of google chrome, I figured out that the server didn't accept the javascript code written inside the document. The code is kind of huge involving many files, here's the main one:
THE HTML MARKUP
<h1>Polaroid Photobar Gallery</h1>
<div id="pp_gallery" class="pp_gallery">
<div id="pp_loading" class="pp_loading"></div>
<div id="pp_next" class="pp_next"></div>
<div id="pp_prev" class="pp_prev"></div>
<div id="pp_thumbContainer">
<div class="album">
<div class="content">
<img src="../images/album1/thumbs/1.jpg" alt="../images/album1/1.jpg" />
<span>The Sixties by Tetsumo</span>
</div>
<div class="content">
<img src="../images/album1/thumbs/2.jpg" alt="../images/album1/2.jpg" />
<span>The Sixties by Tetsumo</span>
</div>
<div class="content">
<img src="../images/album1/thumbs/3.jpg" alt="../images/album1/3.jpg" />
<span>The Sixties by Tetsumo</span>
</div>
<div class="content">
<img src="../images/album1/thumbs/4.jpg" alt="../images/album1/4.jpg" />
<span>The Sixties by Tetsumo</span>
</div>
<div class="content">
<img src="../images/album1/thumbs/5.jpg" alt="../images/album1/5.jpg" />
<span>The Sixties by Tetsumo</span>
</div>
<div class="content">
<img src="../images/album1/thumbs/6.jpg" alt="../images/album1/6.jpg" />
<span>The Sixties by Tetsumo</span>
</div>
<div class="descr">
The Sixties
</div>
</div>
<div class="album">
<div class="content">
<img src="../images/album2/thumbs/1.jpg" alt="../images/album2/1.jpg" />
<span>Butterfly Girl</span>
</div>
<div class="content">
<img src="../images/album2/thumbs/2.jpg" alt="../images/album2/2.jpg" />
<span>Mmmmmmh Strawberries</span>
</div>
<div class="content">
<img src="../images/album2/thumbs/3.jpg" alt="../images/album2/3.jpg" />
<span>Polaroid in Picture</span>
</div>
<div class="content">
<img src="../images/album2/thumbs/4.jpg" alt="../images/album2/4.jpg" />
<span>Girl with brown hair</span>
</div>
<div class="content">
<img src="../images/album2/thumbs/5.jpg" alt="../images/album2/5.jpg" />
<span>Hair up</span>
</div>
<div class="content">
<img src="../images/album2/thumbs/6.jpg" alt="../images/album2/6.jpg" />
<span>Smiling Girl</span>
</div>
<div class="descr">
Portraits
</div>
</div>
<div id="pp_back" class="pp_back">Albums</div>
</div>
</div>
<div>
<span class="reference">
<a href="http://tympanus.net/codrops/2010/09/28/polaroid-photobar-gallery/">back to the Codrops tutorial</a>
</span>
</div>
THE CSS
.pp_loading{
display:none;
position:fixed;
top:50%;
left:50%;
margin:-35px 0px 0px -35px;
background:#fff url(../images/icons/loader.gif) no-repeat center center;
width:70px;
height:70px;
z-index:999;
opacity:0.7;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
.pp_next, .pp_prev{
cursor:pointer;
top:50%;
margin-top:-16px;
width:32px;
height:32px;
position:fixed;
text-align:center;
border:1px solid #111;
color:#fff;
-moz-box-shadow:0px 0px 3px #000;
-webkit-box-shadow:0px 0px 3px #000;
box-shadow:0px 0px 3px #000;
}
.pp_next{
right:-40px;
background:#222 url(../images/icons/next.png) no-repeat center center;
}
.pp_prev{
left:-40px;
background:#222 url(../images/icons/prev.png) no-repeat center center;
}
#pp_thumbContainer{
position:fixed;
bottom:0px;
left:0px;
height:65px;
width:100%;
}
#pp_thumbContainer .album{
position:absolute;
width:200px;
height:65px;
bottom:-90px;
}
.album .descr,
.pp_back{
position:absolute;
bottom:0px;
left:-16px;
background:#222;
text-align:center;
border:1px solid #111;
padding:5px;
cursor:pointer;
width:169px;
color:#fff;
cursor:pointer;
text-shadow:0px 0px 1px #fff;
-moz-box-shadow:1px 1px 4px #000;
-webkit-box-shadow:1px 1px 4px #000;
box-shadow:1px 1px 4px #000;
}
.pp_back{
text-transform:uppercase;
bottom:120px;
left:-100px;
width:80px;
}
#pp_thumbContainer .content{
position:absolute;
top:0px;
height:155px;
cursor:pointer;
}
#pp_thumbContainer img{
border:5px solid #fff;
-moz-box-shadow:1px 1px 7px #000;
-webkit-box-shadow:1px 1px 7px #000;
box-shadow:1px 1px 7px #000;
}
#pp_thumbContainer .content span{
display:none;
}
.pp_preview{
position:fixed;
top:150%;
left:50%;
}
.pp_preview img{
position:absolute;
top:0px;
left:0px;
border:10px solid #fff;
border-bottom:45px solid #fff;
-moz-box-shadow:1px 1px 7px #000;
-webkit-box-shadow:1px 1px 7px #000;
box-shadow:1px 1px 7px #000;
}
.pp_descr{
height:45px;
line-height:45px;
font-size:28px;
width:100%;
bottom:0px;
left:0px;
position:relative;
text-align:center;
color:#fff;
}
h1{
font-size:50px;
margin:50px;
color:#333;
}
span.reference{
font-family:Arial;
position:fixed;
right:10px;
top:10px;
font-size:15px;
}
span.reference a{
color:#fff;
text-transform:uppercase;
text-decoration:none;
}
The code above is included in an external file named style1.css. You can find it on my website. And, finally, THE JAVASCRIPT:
$(function() {
var ie = false;
if ($.browser.msie) {
ie = true;
}
//current album/image displayed
var enableshow = true;
var current = -1;
var album = -1;
//windows width
var w_width = $(window).width();
//caching
var $albums = $('#pp_thumbContainer div.album');
var $loader = $('#pp_loading');
var $next = $('#pp_next');
var $prev = $('#pp_prev');
var $images = $('#pp_thumbContainer div.content img');
var $back = $('#pp_back');
//we wnat to spread the albums through the page equally
//number of spaces to divide with:number of albums plus 1
var nmb_albums = $albums.length;
var spaces = w_width/(nmb_albums+1);
var cnt = 0;
//preload all the images (thumbs)
var nmb_images = $images.length;
var loaded = 0;
$images.each(function(i){
var $image = $(this);
$('<img />').load(function(){
++loaded;
if(loaded == nmb_images){
//let's spread the albums equally on the bottom of the page
$albums.each(function(){
var $this = $(this);
++cnt;
var left = spaces*cnt - $this.width()/2;
$this.css('left',left+'px');
$this.stop().animate({'bottom':'0px'},500);
}).unbind('click').bind('click',spreadPictures);
//also rotate each picture of an album with a random number of degrees
$images.each(function(){
var $this = $(this);
var r = Math.floor(Math.random()*41)-20;
$this.transform({'rotate' : r + 'deg'});
});
}
}).attr('src', $image.attr('src'));
});
function spreadPictures(){
var $album = $(this);
//track which album is opened
album = $album.index();
//hide all the other albums
$albums.not($album).stop().animate({'bottom':'-90px'},300);
$album.unbind('click');
//now move the current album to the left
//and at the same time spread its images through
//the window, rotating them randomly. Also hide the description of the album
//store the current left for the reverse operation
$album.data('left',$album.css('left'))
.stop()
.animate({'left':'0px'},500).find('.descr').stop().animate({'bottom':'-30px'},200);
var total_pic = $album.find('.content').length;
var cnt = 0;
//each picture
$album.find('.content')
.each(function(){
var $content = $(this);
++cnt;
//window width
var w_width = $(window).width();
var spaces = w_width/(total_pic+1);
var left = (spaces*cnt) - (140/2);
var r = Math.floor(Math.random()*41)-20;
//var r = Math.floor(Math.random()*81)-40;
$content.stop().animate({'left':left+'px'},500,function(){
$(this).unbind('click')
.bind('click',showImage)
.unbind('mouseenter')
.bind('mouseenter',upImage)
.unbind('mouseleave')
.bind('mouseleave',downImage);
}).find('img')
.stop()
.animate({'rotate': r+'deg'},300);
$back.stop().animate({'left':'0px'},300);
});
}
//back to albums
//the current album gets its innitial left position
//all the other albums slide up
//the current image slides out
$back.bind('click',function(){
$back.stop().animate({'left':'-100px'},300);
hideNavigation();
//there's a picture being displayed
//lets slide the current one up
if(current != -1){
hideCurrentPicture();
}
var $current_album = $('#pp_thumbContainer div.album:nth-child('+parseInt(album+1)+')');
$current_album.stop()
.animate({'left':$current_album.data('left')},500)
.find('.descr')
.stop()
.animate({'bottom':'0px'},500);
$current_album.unbind('click')
.bind('click',spreadPictures);
$current_album.find('.content')
.each(function(){
var $content = $(this);
$content.unbind('mouseenter mouseleave click');
$content.stop().animate({'left':'0px'},500);
});
$albums.not($current_album).stop().animate({'bottom':'0px'},500);
});
//displays an image (clicked thumb) in the center of the page
//if nav is passed, then displays the next / previous one of the
//current album
function showImage(nav){
if(!enableshow) return;
enableshow = false;
if(nav == 1){
//reached the first one
if(current==0){
enableshow = true;
return;
}
var $content = $('#pp_thumbContainer div.album:nth-child('+parseInt(album+1)+')')
.find('.content:nth-child('+parseInt(current)+')');
//reached the last one
if($content.length==0){
enableshow = true;
current-=2;
return;
}
}
else
var $content = $(this);
//show ajax loading image
$loader.show();
//there's a picture being displayed
//lets slide the current one up
if(current != -1){
hideCurrentPicture();
}
current = $content.index();
var $thumb = $content.find('img');
var imgL_source = $thumb.attr('alt');
var imgL_description = $thumb.next().html();
//preload the large image to show
$('<img style=""/>').load(function(){
var $imgL = $(this);
//resize the image based on the windows size
resize($imgL);
//create an element to include the large image
//and its description
var $preview = $('<div />',{
'id' : 'pp_preview',
'className' : 'pp_preview',
'html' : '<div class="pp_descr"><span>'+imgL_description+'</span></div>',
'style' : 'visibility:hidden;'
});
$preview.prepend($imgL);
$('#pp_gallery').prepend($preview);
var largeW = $imgL.width()+20;
var largeH = $imgL.height()+10+45;
//change the properties of the wrapping div
//to fit the large image sizes
$preview.css({
'width' :largeW+'px',
'height' :largeH+'px',
'marginTop' :-largeH/2-20+'px',
'marginLeft' :-largeW/2+'px',
'visibility' :'visible'
});
Cufon.replace('.pp_descr');
//show navigation
showNavigation();
//hide the ajax image loading
$loader.hide();
//slide up (also rotating) the large image
var r = Math.floor(Math.random()*41)-20;
if(ie)
var param = {
'top':'50%'
};
else
var param = {
'top':'50%',
'rotate': r+'deg'
};
$preview.stop().animate(param,500,function(){
enableshow = true;
});
}).error(function(){
//error loading image. Maybe show a message : 'no preview available'?
}).attr('src',imgL_source);
}
//click next image
$next.bind('click',function(){
current+=2;
showImage(1);
});
//click previous image
$prev.bind('click',function(){
showImage(1);
});
//slides up the current picture
function hideCurrentPicture(){
current = -1;
var r = Math.floor(Math.random()*41)-20;
if(ie)
var param = {
'top':'-150%'
};
else
var param = {
'top':'-150%',
'rotate': r+'deg'
};
$('#pp_preview').stop()
.animate(param,500,function(){
$(this).remove();
});
}
//shows the navigation buttons
function showNavigation(){
$next.stop().animate({'right':'0px'},100);
$prev.stop().animate({'left':'0px'},100);
}
//hides the navigation buttons
function hideNavigation(){
$next.stop().animate({'right':'-40px'},300);
$prev.stop().animate({'left':'-40px'},300);
}
//mouseenter event on each thumb
function upImage(){
var $content = $(this);
$content.stop().animate({
'marginTop' : '-70px'
},400).find('img')
.stop()
.animate({'rotate': '0deg'},400);
}
//mouseleave event on each thumb
function downImage(){
var $content = $(this);
var r = Math.floor(Math.random()*41)-20;
$content.stop().animate({
'marginTop' : '0px'
},400).find('img').stop().animate({'rotate': r + 'deg'},400);
}
//resize function based on windows size
function resize($image){
var widthMargin = 50
var heightMargin = 200;
var windowH = $(window).height()-heightMargin;
var windowW = $(window).width()-widthMargin;
var theImage = new Image();
theImage.src = $image.attr("src");
var imgwidth = theImage.width;
var imgheight = theImage.height;
if((imgwidth > windowW)||(imgheight > windowH)){
if(imgwidth > imgheight){
var newwidth = windowW;
var ratio = imgwidth / windowW;
var newheight = imgheight / ratio;
theImage.height = newheight;
theImage.width= newwidth;
if(newheight>windowH){
var newnewheight = windowH;
var newratio = newheight/windowH;
var newnewwidth =newwidth/newratio;
theImage.width = newnewwidth;
theImage.height= newnewheight;
}
}
else{
var newheight = windowH;
var ratio = imgheight / windowH;
var newwidth = imgwidth / ratio;
theImage.height = newheight;
theImage.width= newwidth;
if(newwidth>windowW){
var newnewwidth = windowW;
var newratio = newwidth/windowW;
var newnewheight =newheight/newratio;
theImage.height = newnewheight;
theImage.width= newnewwidth;
}
}
}
$image.css({'width':theImage.width+'px','height':theImage.height+'px'});
}
});
The javascript above is the code that written in the body section, and which the browser refuses to load, since, it is an internal code, FireBug doesn't help. I've used the following lines to include the necessary js files (in the head section):
<script src="js/jquery.min.js">
</script>
And this in the body section before writing the javascript code:
<script src="js/jquery.transform-0.8.0.min.js"></script>
The gallery seems to work perfectly when run on xampp server, but not when I upload it to the web server. Please help me!
Note: I've verified that all the files have been uploaded successfully onto my web server. I'm new to this site, so please pardon me for any mistakes and help me rectify them.
EDIT: The google chrome console shows me many 404s for the images, saying that they don't exist, while they do. I've checked the permissions of the folders too, and everything is fine, guess this is the main problem. Please help me here.
seems like that the file system is case sensitive on the server, bug insensitive on your local machine.
all images with suffix in lower case (*.jpg) could be loaded sucessfully, but upper ones (*.JPG) failed (404 not found). as your code always try to get the image with lower case
on your website:
It should be:
来源：https://stackoverflow.com/questions/14787022/script-works-in-localhost-but-not-on-server