脚本在localhost中工作，但在服务器上不工作

时间：2013-02-09 10:14:01

标签： php javascript jquery html localhost

我遇到这个问题，代码在localhost上运行，但在我上传到服务器时没有。

我想实现这个： Polaroid Photobar Gallery

这是我网站的链接： Zodiac 2013

注意：您需要转到图库标签才能查看。

编辑：请在Google Chrome中查看以获得最佳观看体验。

我尝试使用FireBug但没有帮助。利用谷歌浏览器的Inspect Element功能，我发现服务器不接受在文档中写的的javascript代码。代码有点涉及很多文件，这里主要是：

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>

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;
        }

上面的代码包含在名为style1.css的外部文件中。你可以在我的网站上找到它。 最后， 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'});
            }
        });

上面的javascript是写在body部分的代码，浏览器拒绝加载，因为它是一个内部代码，FireBug没有帮助。我已经使用以下行来包含必要的js文件（在head部分中）：

<script src="js/jquery.min.js">
</script>

这是在编写javascript代码之前的正文部分：

<script src="js/jquery.transform-0.8.0.min.js"></script>

在xampp服务器上运行时，图库似乎运行良好，但是当我将其上传到Web服务器时却没有。请帮帮我！

注意：我已经确认所有文件都已成功上传到我的网络服务器上。我是这个网站的新手，所以请原谅我有任何错误并帮助我纠正它们。

编辑：谷歌浏览器控制台向我展示了许多404图像，说它们不存在，而它们确实存在。我也检查了文件夹的权限，一切都很好，猜猜这是主要问题。请帮帮我。

1 个答案:

答案 0 :(得分：2)

似乎文件系统在服务器上区分大小写，对本地计算机不敏感。

所有带小写后缀（*.jpg）的图像都可以成功加载，但是上面的（*.JPG）失败（找不到404）。因为你的代码总是试图用小写字母来获取图像

在您的网站上：

enter image description here enter image description here

应该是：

enter image description here

相关问题
最新问题