IhavethisproblemwhereacodeisworkingonlocalhostbutnotwhenIuploadittotheserver.我有这
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
这里有一个链接到我的网站:Zodiac 2013。
Note: You need to go the gallery tab to view it.
注意:您需要到gallery选项卡查看它。
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:
我试着使用FireBug，但没有帮助。通过对谷歌chrome的检查元素特性，我发现服务器不接受在文档中编写的Javascript代码。这段代码涉及很多文件，主要是:
THE HTML MARKUP
HTML标记
Polaroid Photobar Gallery
THE CSS
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:
上面的代码包含在名为style1.css的外部文件中。你可以在我的网站上找到。最后,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);
$('![]()
').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
$('![]()
').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 = $('',{
'id' : 'pp_preview',
'className' : 'pp_preview',
'html' : ''+imgL_description+'
',
'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):
上面的Javascript代码是写在body部分的代码，而浏览器拒绝加载，因为它是一个内部代码，FireBug没有帮助。我使用了以下几行来包含必要的js文件(在head部分):
And this in the body section before writing the Javascript code:
在编写Javascript代码之前，在body部分中:
The gallery seems to work perfectly when run on xampp server, but not when I upload it to the web server. Please help me!
当在xampp服务器上运行时，这个库似乎运行得很好，但是当我把它上传到web服务器上时，它就没有效果了。请帮助我!
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.
注意:我已经确认所有文件都已成功上传至我的web服务器。我是这个网站的新手，所以请原谅我的错误，帮我改正。
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.
编辑:谷歌的chrome控制台给我看了很多404s的图片，说它们不存在，而它们确实存在。我也检查了文件夹的权限，一切都很好，这是主要问题。请帮我在这里。
1 个解决方案
The Sixties by Tetsumo
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有 
