Le script fonctionne dans localhost mais pas sur le serveur

Question

J'ai ce problème où un code fonctionne sur localhost mais pas quand je le télécharge sur le serveur.

Je veux mettre en œuvre ceci: Polaroid Photobar Gallery

Voici un lien vers mon site: Zodiac 2013

Note: Vous devez aller dans l'onglet galerie pour la visualiser.

EDIT: S'il vous plaît le voir dans Google Chrome pour une meilleure expérience de visualisation.

J'ai essayé d'utiliser FireBug mais sans aide. Avec la fonctionnalité Inspect Element de google chrome, j'ai compris que le serveur n'acceptait pas le code javascript écrit dans le document. Le code est un peu énorme impliquant de nombreux fichiers, voici le principal:

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

Le code ci-dessus est inclus dans un externe fichier nommé style1.css. Vous pouvez le trouver sur mon site Web. Et, enfin, LE 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'}); 
      } 
     }); 

Le javascript ci-dessus est le code qui écrit dans la section du corps, et que le navigateur refuse de charger, depuis, il est un code interne, Firebug ne le fait pas Aidez-moi. Je l'ai utilisé les lignes suivantes pour inclure les fichiers js nécessaires (dans la section de la tête):

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

Et cela dans la section du corps avant d'écrire le code javascript:

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

La galerie semble fonctionne parfaitement lorsqu'il est exécuté sur le serveur xampp, mais pas quand je le télécharge sur le serveur Web. Aidez-moi, s'il vous plaît!

Remarque: J'ai vérifié que tous les fichiers ont bien été téléchargés sur mon serveur Web. Je suis nouveau sur ce site, alors s'il vous plaît pardonnez-moi pour toute erreur et aidez-moi à les rectifier.

EDIT: La console google chrome me montre beaucoup de 404 pour les images, disant qu'elles n'existent pas, alors qu'elles le font. J'ai aussi vérifié les permissions des dossiers, et tout va bien, devinez que c'est le problème principal. S'il vous plaît aidez-moi ici.

Answer 1

semble que le système de fichiers est sensible à la casse sur le serveur, insensible aux bugs sur votre machine locale.

toutes les images avec suffixe en minuscule (*.jpg) ont pu être chargées avec succès, mais les images supérieures (*.JPG) ont échoué (404 non trouvé).comme votre code toujours essayer d'obtenir l'image avec les minuscules

sur votre site:

Il devrait être: