SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Failed to load resource when on server?

    Hi all

    I have an example here to illustrate my problem.

    http://www.ttmt.org.uk/forum/k/

    It just a line of images, when you click them a bigger image is shown on top.

    Code:
    <!DOCTYPE html>
    <html>
      <head>
      <title>index</title>
      
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
      
      <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">
      
      <style type="text/css">
        ul#gallery {
        	margin:100px 0 0 0;
        	background:#333;
        	float:left;
        	height:550px;
        	margin-right:-20000px;
        }
        ul#gallery li{
          display:inline;
        }
        ul#gallery li img{
          float:left;
          opacity:0.5;
          height:100%;
        }
        #header{
          position:fixed;
          margin:20px 0 0 20px;
        }
        #header img,
        #header ul#info{
          float:left;
        }
        #header ul#info{
          margin:5px 0 0 50px;
        }
        #header ul#info li{
          color:#aaa;
          font:.95em/1.5em Helvetica, sans-serif;
        }
        #header ul#info li a{
          color:#aaa;
          text-decoration:none;
        }
        #header ul#info li a:hover{
          color:#333;
          color:orange;
        }
        #header select{
          margin:20px 0 0 50px;
        }
        #lightbox {
        	position:fixed; 
        	top:0; 
        	left:0; 
        	width:100%; 
        	height:100%; 
        	background:url(overlay.png) repeat; 
        	text-align:center;
        }
        #lightbox p {
        	text-align:right; 
        	color:#fff; 
        	margin-right:20px; 
        	font-size:12px; 
        }
        #lightbox img {
        	box-shadow:0 0 15px #111;
        	-webkit-box-shadow:0 0 15px #111;
        	-moz-box-shadow:0 0 15px #111;
        	max-width:940px;
        }
        #content img{
          height:90%;
          max-width:100%;
        }
        
      </style>
    
      </head>
      
    <body>
            
        <ul id="gallery">
          <li><a href="images/car01.jpg" class="lightbox_trigger"><img src="images/car01.jpg" alt="" /></a></li>
          <li><a href="images/car02.jpg" class="lightbox_trigger"><img src="images/car02.jpg" alt="" /></a></li>
          <li><a href="images/car03.jpg" class="lightbox_trigger"><img src="images/car03.jpg" alt="" /></a></li>
          <li><a href="images/car04.jpg" class="lightbox_trigger"><img src="images/car04.jpg" alt="" /></a></li>
          <li><a href="images/car05.jpg" class="lightbox_trigger"><img src="images/car05.jpg" alt="" /></a></li>
          <li><a href="images/car06.jpg" class="lightbox_trigger"><img src="images/car06.jpg" alt="" /></a></li>
          <li><a href="images/car07.jpg" class="lightbox_trigger"><img src="images/car07.jpg" alt="" /></a></li>
        </ul>
        
    <script>
    
      jQuery(document).ready(function($) {
        
        $('#gallery img').hover(function(){
          $(this).css('opacity',1);
        })
        $('#gallery img').hover(
          function () {
            $(this).css('opacity',1)
          }, 
          function () {
            $(this).css('opacity',.5);
          }
        );
        
        
      	$('.lightbox_trigger').click(function(e) {
      		e.preventDefault();
      		var image_href = $(this).attr("href");
      		if ($('#lightbox').length > 0) {
      			$('#content').html('<img src="' + image_href + '" />');
      			$('#lightbox').fadeIn('1000');
      		}
      		else { 
      			var lightbox = 
      			'<div id="lightbox">' +
      				'<div id="content">' + 
      					'<img src="' + image_href +'" />' +
      				'</div>' +	
      			'</div>';
      			$('body').append(lightbox);
      		}
    
      	});
    
      	$('#lightbox').live('click', function() { 
      		$('#lightbox').hide();
      	});
      	
    
      });
      </script>
    </body>
    
    </html>

    Everything is working here but I wanted the images to be random.

    I have an example here where the images are added randomly from an array using this javascript

    Code:
      <script type="text/javascript">
      
        var numImages = 6;
      
        var images_Arr = ['images/car01.jpg','images/car02.jpg','images/car03.jpg','images/car04.jpg','images/car05.jpg',
        'images/car06.jpg','images/car07.jpg','images/car08.jpg','images/car09.jpg','images/car10.jpg']
        
        function firstImg(){
          for(i=1; i<numImages; i++){
            var ranNum = Math.floor(Math.random()*images_Arr.length);
            var img = images_Arr[ranNum];
            document.write("<li><a href=" +img+ " class='lightbox_trigger'><img src=" +img+ "/></a></li>");
            images_Arr.splice(ranNum,1);
          }
        }    
        
      </script>

    http://www.ttmt.org.uk/forum/k/index1.html

    In this example the images don't load but if you click the blocks the larger image loads.

    Locally this works fine.

    The Error Console in Safari says - Failed to load resource: the server responded with a status of 404 (Not Found)

    Can anyone see why it's working locally but not on a server?

    Code:
    <!DOCTYPE html>
    <html>
      <head>
      <title>index</title>
      
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
      
      <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">
      
      <style type="text/css">
        ul#gallery {
        	margin:100px 0 0 0;
        	background:#333;
        	float:left;
        	height:550px;
        	margin-right:-20000px;
        }
        ul#gallery li{
          display:inline;
        }
        ul#gallery li img{
          float:left;
          opacity:0.5;
          height:100%;
        }
        #header{
          position:fixed;
          margin:20px 0 0 20px;
        }
        #header img,
        #header ul#info{
          float:left;
        }
        #header ul#info{
          margin:5px 0 0 50px;
        }
        #header ul#info li{
          color:#aaa;
          font:.95em/1.5em Helvetica, sans-serif;
        }
        #header ul#info li a{
          color:#aaa;
          text-decoration:none;
        }
        #header ul#info li a:hover{
          color:#333;
          color:orange;
        }
        #header select{
          margin:20px 0 0 50px;
        }
        #lightbox {
        	position:fixed; 
        	top:0; 
        	left:0; 
        	width:100%; 
        	height:100%; 
        	background:url(overlay.png) repeat; 
        	text-align:center;
        }
        #lightbox p {
        	text-align:right; 
        	color:#fff; 
        	margin-right:20px; 
        	font-size:12px; 
        }
        #lightbox img {
        	box-shadow:0 0 15px #111;
        	-webkit-box-shadow:0 0 15px #111;
        	-moz-box-shadow:0 0 15px #111;
        	max-width:940px;
        }
        #content img{
          height:90%;
          max-width:100%;
        }
        
      </style>
      
      
      <script type="text/javascript">
      
        var numImages = 6;
      
        var images_Arr = ['images/car01.jpg','images/car02.jpg','images/car03.jpg','images/car04.jpg','images/car05.jpg',
        'images/car06.jpg','images/car07.jpg','images/car08.jpg','images/car09.jpg','images/car10.jpg']
        
        function firstImg(){
          for(i=1; i<numImages; i++){
            var ranNum = Math.floor(Math.random()*images_Arr.length);
            var img = images_Arr[ranNum];
            document.write("<li><a href=" +img+ " class='lightbox_trigger'><img src=" +img+ "/></a></li>");
            images_Arr.splice(ranNum,1);
          }
        }    
        
      </script>
    
      </head>
      
    <body>
        <div id="header">
          
          
        </div>
            
        <ul id="gallery">
          <script type="text/javascript">
            window.onload = firstImg();
          </script>
        </ul>
        
    <script>
    
      jQuery(document).ready(function($) {
        
        $('#gallery img').hover(function(){
          $(this).css('opacity',1);
        })
        $('#gallery img').hover(
          function () {
            $(this).css('opacity',1)
          }, 
          function () {
            $(this).css('opacity',.5);
          }
        );
        
        
      	$('.lightbox_trigger').click(function(e) {
      		e.preventDefault();
      		var image_href = $(this).attr("href");
      		if ($('#lightbox').length > 0) {
      			$('#content').html('<img src="' + image_href + '" />');
      			$('#lightbox').fadeIn('1000');
      		}
      		else { 
      			var lightbox = 
      			'<div id="lightbox">' +
      				'<p>Click to close</p>' +
      				'<div id="content">' + 
      					'<img src="' + image_href +'" />' +
      				'</div>' +	
      			'</div>';
      			$('body').append(lightbox);
      		}
    
      	});
    
      	$('#lightbox').live('click', function() { 
      		$('#lightbox').hide();
      	});
      	
    
      });
      </script>
    </body>
    
    </html>

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't get that error. Are you still getting the problem?
    Tab-indentation is a crime against humanity.

  3. #3
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry I fixed it, should have updated here


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •