脚本在localhost中运行，但不在服务器上运行 [英] Script works in localhost but not on server
本文介绍了脚本在localhost中运行，但不在服务器上运行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有这个问题，代码在本地主机上工作，但没有上传到服务器。
我想实现这个：
< a href =http://tympanus.net/Tutorials/PolaroidPhotobarGallery/ =nofollow> Polaroid Photobar Gallery
这里是我的链接网站：
2013年黄道带
注意：您需要到图库标签才能查看它。
编辑：请在Google Chrome浏览器中查看最好的观看体验。
我尝试过使用FireBug，但没有任何帮助。使用谷歌浏览器的检查元素功能，我发现服务器不接受在文档内写入的JavaScript代码。代码有很多涉及很多文件，这是主要的：
HTML标记
< h1> Polaroid Photobar Gallery< / h1>
< div id =pp_galleryclass =pp_gallery>
< div id =pp_loadingclass =pp_loading>< / div>
< div id =pp_nextclass =pp_next>< / div>
< div id =pp_prevclass =pp_prev>< / div>
< div id =pp_thumbContainer>
< div class =album>
< div class =content>
< img src =../ images / album1 / thumbs / 1.jpgalt =../ images / album1 / 1.jpg/>
< span> 60年代Tetsumo< / span>
< / div>
< div class =content>
< img src =../ images / album1 / thumbs / 2.jpgalt =../ images / album1 / 2.jpg/>
< span> 60年代Tetsumo< / span>
< / div>
< div class =content>
< img src =../ images / album1 / thumbs / 3.jpgalt =../ images / album1 / 3.jpg/>
< span> 60年代Tetsumo< / span>
< / div>
< div class =content>
< img src =../ images / album1 / thumbs / 4.jpgalt =../ images / album1 / 4.jpg/>
< span> 60年代Tetsumo< / span>
< / div>
< div class =content>
< img src =../ images / album1 / thumbs / 5.jpgalt =../ images / album1 / 5.jpg/>
< span> 60年代Tetsumo< / span>
< / div>
< div class =content>
< img src =../ images / album1 / thumbs / 6.jpgalt =../ images / album1 / 6.jpg/>
< span> 60年代Tetsumo< / span>
< / div>
< div class =descr>
60年代
< / div>
< / div>
< div class =album>
< div class =content>
< img src =../ images / album2 / thumbs / 1.jpgalt =../ images / album2 / 1.jpg/>
< span>蝴蝶女郎< / span>
< / div>
< div class =content>
< img src =../ images / album2 / thumbs / 2.jpgalt =../ images / album2 / 2.jpg/>
< span> mmmmmh草莓< / span>
< / div>
< div class =content>
< img src =../ images / album2 / thumbs / 3.jpgalt =../ images / album2 / 3.jpg/>
< span> Polaroid in Picture< / span>
< / div>
< div class =content>
< img src =../ images / album2 / thumbs / 4.jpgalt =../ images / album2 / 4.jpg/>
< span>棕发女孩< / span>
< / div>
< div class =content>
< img src =../ images / album2 / thumbs / 5.jpgalt =../ images / album2 / 5.jpg/>
< span>抬头< / span>
< / div>
< div class =content>
< span>微笑女孩< / span>
< / div>
< div class =descr>
肖像
< / div>
< / div>
< div id =pp_backclass =pp_back>相簿< / div>
< / div>
< / div>
< div>
< span class =reference>
< a href =http://tympanus.net/codrops/2010/09/28/polaroid-photobar-gallery/>回到Codrops教程< / a>
< / span>
< / div>
CSS
.pp_loading {
display：none;
位置：固定;
top：50％;
剩下：50％;
margin：-35px 0px 0px -35px;
background：#fff url（../ images / icons / loader.gif）no-repeat center center;
width：70px;
height：70px;
z-index：999;
不透明度：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;
位置：固定;
text-align：center;
border：1px solid＃111;
颜色：#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）无重复中心;
}
.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;
宽度：100％;
}
#pp_thumb容器.album {
位置：绝对;
width：200px;
height：65px;
bottom：-90px;
}
.album .descr，
.pp_back {
position：absolute;
bottom：0px;剩余
：-16px;
背景：＃222;
text-align：center;
border：1px solid＃111;
padding：5px;
光标：指针;
width：169px;
颜色：#fff;
光标：指针;
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;剩余
：-100px;
width：80px;
}
#pp_thumbContainer .content {
position：absolute;
top：0px;
height：155px;
光标：指针;
}
#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％;
剩下：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;
宽度：100％;
bottom：0px;
left：0px;
职位：亲属;
text-align：center;
颜色：#fff;
}
h1 {
font-size：50px;
保证金：50px;
颜色：＃333;
}
span.reference {
font-family：Arial;
位置：固定;
right：10px;
top：10px;
font-size：15px;
}
span.reference a {
color：#fff;
text-transform：大写;
text-decoration：none;
}
上面的代码包含在名为style1.css的外部文件中。你可以在我的网站上找到它。
最后， JAVASCRIPT ：
$（function（）{
var ie = false;
if（$ .browser.msie）{
ie = true;
}
//显示当前相册/图片
var enableshow = true;
var current = -1;
var album = -1;
//窗口宽度
var w_width = $（window）.width（）;
//缓存
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'）;
//我们可以通过页面同样地传播相册
//空格的数目除以：专辑数量加上1
var nmb_albums = $ albums.length;
var spaces = w_width /（nmb_albums + 1）;
var cnt = 0;
//预先加载所有图片（大拇指）
var nmb_images = $ images.length;
var loaded = 0;
$ images.each（function（i）{
var $ image = $（this）;
$（'< img />'）。load（function（）{
++ loaded;
if（loaded == nmb_images）{
//让我们在页面底部平均分配专辑
$ albums.each（function（）{
var $ this = $（this）;
++ cnt;
var left = spaces * cnt - $ this.width（）/ 2;
$ this.css（'左'，左+'px'）;
$ this.stop（）。animate（{'bottom'：'0px'}，500）;
}）。unbind（'click'）。bind （'click'，spreadPictures）;
//也可以随机旋转一张相册的每张图片
$ images.each（function（）{
var $ this = $（这个） ;
var r = Math.floor（Math.random（）* 41）-20;
$ this.transform（{'rotate'：r +'deg'}）;
}）;
}
}）。attr（'src'，$ image.attr（'src'））;
}）;
function spreadPictures（）{
var $ album = $（this）;
//跟踪哪个相册被打开
album = $ album.index（）;
//隐藏所有其他相册
$ albums.not（$ album）.stop（）。animate（{'bottom'：' - 90px'}，300）;
$ album.unbind（'click'）;
//现在将当前相册移动到左边
//并且同时通过
//窗口传播其图像，随机旋转它们。同时隐藏相册的描述
//存储当前左侧的相反操作
$ 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;
//每张图片
$ album.find（'。content'）
.each（function（）{
var $ content = $（this）;
++ cnt;
//窗口宽度
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（'点击'）
.bind（'click'，showImage）
.unbind（'mouseenter'）
.bind（'mouseenter'，upImage）
.unbind（'mouseleave' ）
.bind（鼠标离开，downImage）;
}）。find（'img'）
.stop（）
.animate（{'rotate'：r +'deg'}，300）;
$ back.stop（）。animate（{'left'：'0px'}，300）;
}）;
}
//返回相册
//当前相册获得其最初的左位置
//所有其他相册都滑动
//当前图像滑出
$ back.bind（'click'，function（）{
$ back.stop（）。animate（{'left'：' - 100px'}，300）;
hideNavigation（）;
//显示一张图片
//让当前图片滑动
if（current！= -1）{
hideCurrentPicture（） ;
$ b $ 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（{底部： 0像素}，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）;
}）;
//在页面中心显示一个图像（点击的拇指）
//如果nav被传递，则显示
//当前的下一个/前一个album
function showImage（nav）{
if（！enableshow）return;
enableshow = false;
if（nav == 1）{
//达到第一个
if（current == 0）{
enableshow = true;
return;
var $ content = $（'＃pp_thumbContainer div.album：nth-child（'+ parseInt（album + 1）+'）'）
.find（'。content：第n个孩子（ '+ parseInt函数（电流）+'）'）;
//最后一个
if（$ content.length == 0）{
enableshow = true;
current- = 2;
return;
}
}
else
var $ content = $（this）;
//显示ajax载入图片
$ loader.show（）;
//显示图片
//让当前图片滑动
if（current！= -1）{
hideCurrentPicture（）;
}
current = $ content.index（）;
var $ thumb = $ content.find（'img'）;
var imgL_source = $ thumb.attr（'alt'）;
var imgL_description = $ thumb.next（）。html（）;
//预载大图显示
$（'< img style =/>'）。load（function（）{
var $ imgL = $（this） ;
//根据窗口大小调整图像的大小
resize（$ imgL）;
//创建一个元素以包含大图像
//及其描述
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;
//改变包装div的属性
//以适应大图像尺寸
$ preview.css（{
'width'：largeW +'px'，
'height'：largeH +'px'，
'marginTop'：-largeH / 2-20 +'px'，
'marginLeft'：-largeW / 2 +'px'，
'能见度'：'可见'
}）;
Cufon.replace（'。pp_descr'）;
//显示导航
showNavigation（）;
//隐藏ajax图片加载
$ loader.hide（）;
//向上（旋转）大图像
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（）{
//加载图片时出错，可能会显示一条消息：'无法预览'？
}）。attr（'src'，imgL_source）;
//点击下一张图片
$ next.bind（'click'，function（）{
current + = 2;
showImage（1 ）;
}）;
$ b // //点击上一张图片
$ prev.bind（'click'，function（）{
showImage（1）;
}）;
//向上滑动当前图片
函数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（）;
}）;
}
//显示导航按钮
function showNavigation（）{
$ next.stop（）。animate（{'right'：'0px'} ，100）;
$ prev.stop（）。animate（{'left'：'0px'}，100）;
//隐藏导航按钮
函数hideNavigation（）{
$ next.stop（）。animate（{'right'：' - 40px' }，300）;
$ prev.stop（）。animate（{'left'：' - 40px'}，300）;
//每个拇指的鼠标事件
function upImage（）{
var $ content = $（this）;
$ content.stop（）。animate（{
'marginTop'：'-70px'
}，400）.find（'img'）
.stop（）
.animate（{'rotate'：'0deg'}，400）;
//每个拇指的mouseleave事件
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）;
}
//基于窗口大小调整大小函数
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; （（imgwidth> windowW）||（imgheight> windowH））{
if（imgwidth> imgheight）{
var newwidth = windowW;
if
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;
$ b $ image.css（{'width'：theImage.width +'px'，'height'：theImage.height +'px'}）;
}
}）;
上面的javascript是写在body部分的代码，浏览器拒绝加载，因为它是一个内部代码，FireBug没有帮助。我已经使用了以下几行来包含必要的js文件（在头部分）：
< script src = JS / jquery.min.js>
< / script>
以及在编写javascript代码前的正文部分：
< script src =js / jquery.transform-0.8.0.min.js>< / script>
该图库在xampp服务器上运行时似乎可以很好地工作，但在将图片上传到网络时无法正常运行服务器。请帮助我！
注意：我已验证所有文件已成功上传到我的网络服务器。我是这个网站的新手，请原谅我的任何错误，并帮助我纠正它们。
我为这些图像提供了许多404，说他们不存在，而他们却是这样。我也检查了文件夹的权限，并且一切正常，猜测这是主要问题。请帮助我。解决方案
似乎文件系统在服务器上区分大小写，在本地计算机上对bug不敏感。所有带小写后缀（ *。jpg ）的图片都可以成功加载，但上面的图片（
> code> * .JPG ）失败（404找不到）。因为你的代码总是试图在你的网站上以小写形式获取图像
：
它应该是：
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:
这篇关于脚本在localhost中运行，但不在服务器上运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
