Imageslider - unwanted loading

kvnwpts · June 10, 2012, 7:58pm

Hey.

So I have an Imageslider on my website wich is good except that after it slides through a couple of pictures it slides and no picture shows up and It’s just loading.
Try yourself chaning pictures and after some pictures you will se that no picture shows up and it justs load http://www.wbm-fleninge.com/

I have no idea why this is happening.

Any ideas?

HTML CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WBM-Fleninge</title>
<link href="css/styles.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="css/demo.css"></head>


<meta name="description" content="WBM-Fleninge.">

  <meta name="keywords" content="WBM Fleninge,WBM Fleninge,WBM WILHELMSSON AB, WILHELMSSON AB, Wilhelmssons bil och Maskin, WBM, Fleninge, Kompressor, Stubbfräs
Högtryckstvätt, Moped, Golfmaskiner, Golfbil, Honda, (Howard Price turf equipment),Lövblåsar, Sopmaskin,
Trädgårdsmaskiner, Lövsugar, Skog, Sågverk, Utombordare, Terränggående fordon, Park och Trädgårdsmaskiner
Elverk, Gräsklippare, Vertikalskärare, Motorsågar, Rotorgräsklippare, Häcksaxar, Röjsågar, Grästrimmer
Traktorer, Vedklyv, Vedkap, Vagn, Service, Kompostkvarn, Klimatanläggning, Ac, Aircondition, Entreprenad,
Beskärning, Pumpar, Flishugg, Åkgräsklippare, Klippo, Tanaka, Jonsered, Trädgårdsredskap, Hitachi, Snöslungor,
Fyrhjulingar, Röjare, Städmaskiner, Kyltekniker, Värmepumpar, Lantbruksmaskiner, Skogsbruksmaskiner, Reservdelar,
Tillbehör, Slåtter, Ryggblås, Skogsvagnar, Bilsläp, Kedjegrävare, Kapmaskin, Lövlastare, Vertikalskärare,
Mossrivare, Sandspridare, Saltspridare, Motor, Hydralik, Reperationer,">
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />


<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic' rel='stylesheet' type='text/css'>


	<link rel="stylesheet" href="orbit-1.2.3/orbit-1.2.3.css">

		<script type="text/javascript" src="orbit-1.2.3/jquery-1.5.1.min.js"></script>
		<script type="text/javascript" src="orbit-1.2.3/jquery.orbit-1.2.3.min.js"></script>	
		
		<script type="text/javascript">
			$(window).load(function() {
				$('#featured').orbit();
			});
		</script>




<body>


<div id="upper">

<div id="bgupper"><div id="iupper"><img id="logo" src="images/logo.png" width="142" height="166" /><div id="right">

<ul class="social">
  <li>
  <li>

<li><a href="images/swedac.PNG"></a><img src="images/aaaaaaaaaaaaaa.PNG" width="110" height="133" /></li>


<li><img id="swedac" src="images/mrf logga.jpg" width="142" height="120" /><a href="https://www.facebook.com/pages/WBM-Wilhelmsson-AB-i-Fleninge/439698779382425"><img src="images/facebook-logo.png" width="32" height="32" border="0" /></a></li>
</ul>
</div></div></div>




</div>

<div id="header-wrapper">
  <div class="wrapper">
		  <ul class="nav">
		    <li class="navigation"><a href="index.html">WBM-Fleninge</a></li>
				<li class="navigation"><a href="atv.html">ATV</a></li>
                		<li class="navigation"><a href="utv.html">UTV</a></li>
				<li class="navigation"><a href="sortiment.html">Sortiment</a></li>
                			<li class="navigation"><a href="robotklippare.html">Robotklippare</a></li>

				<li class="navigation"><a href="ac.html">AC</a></li>
                <li class="navigation"><a href="finanser.html">Finanser</a></li>
                   <li class="navigation"><a href="begagnat.html">Begagnat</a> </li>



                <li class="navigation"><a href="kartor.html">Kartor</a></li>

                   <li class="navigation"><a href="kontakt.html">Kontakta oss</a></li>

		  </ul>
  </div>
</div>



<div id="wrapper">


<div id="featured">
			<div class="content">
		
			</div><img src="images/slider/10.PNG" width="980" height="300" /><img src="images/slider/1.jpg" width="980" height="300" /><img src="images/slider/2.png" width="980" height="300" />		<img src="images/slider/3.jpg" width="980" height="300" /><img src="images/slider/4.jpg" width="980" height="300" /><img src="images/slider/5.jpg" width="980" height="300" /><img src="images/slider/6.jpg" width="980" height="300" /><img src="images/slider/7.jpg" width="980" height="300" /><img src="images/slider/8.jpg" width="980" height="300" /></div>






<div id="om">

<div id="col1">
 <p class="oppet"><a href="https://www.facebook.com/pages/WBM-Wilhelmsson-AB-i-Fleninge/439698779382425">WBM Fleninge på Facebook</a></p>
<iframe id="FACEBOOK" src="https://www.facebook.com/plugins/like.php?href=https://www.facebook.com/pages/WBM-Wilhelmsson-AB-i-Fleninge/439698779382425"
        scrolling="no" frameborder="0"
        style="border:none; width:600Px; height:60px"></iframe>

<h1 class="inledning">Välkommen till WBM!</h1><br /><br />

<p class="text">WBM den kombinerade affären för trädgårdsredskap, redskapsbärare, entreprenadmaskiner samt ATV-fyrhjulingar, för både proffs och privat bruk. Som "Proffs på markvård skräddarsyr vi maskinparken efter Era behov".<br /><br />                                               Vår serviceverkstad har utbildning för de maskiner som används för gräsklippning, snöröjning och annan markvård.

Kontakta oss på service för information om service, serviceavtal för bästa ekonomi för er maskinpark.

Här finns också ackrediterade kyltekniker som installerar och gör service på klimat-anläggningar för personbilar, lastbilar, entreprenadmaskiner.<br /><br />

WBM Wilhelmsson AB är en återförsäljare som arbetar med ett komplett program av moderna proffsmaskiner för hela året.



VÄLKOMNA ATT BOKA DEMO</p>


<p class="text">WBM den kombinerade affären för trädgårdsredskap, redskapsbärare, entreprenadmaskiner samt ATV-fyrhjulingar, för både proffs och privat bruk. Som "Proffs på markvård skräddarsyr vi maskinparken efter Era behov".<br /><br />                                               Vår serviceverkstad har utbildning för de maskiner som används för gräsklippning, snöröjning och annan markvård.

Kontakta oss på service för information om service, serviceavtal för bästa ekonomi för er maskinpark.

Här finns också ackrediterade kyltekniker som installerar och gör service på klimat-anläggningar för personbilar, lastbilar, entreprenadmaskiner.<br />
</p>
<div class="pics"></div>
  <div class="pics2"></div>
   <div class="pics3"></div>

 </div>





<div id="col2">



  <div id="öppettider">
  <p class="oppet">Öppettider</p><br />

<p class="text">Måndag-Fredag          <b> 7:15-17:00</b><br /><br />


Lördagar                           <b>   10:00-13:00</b><br /><br />
<b>31/3 - 30/6 </b>varje lördag resterande månader den sista lördagen i månaden.<br /><br />


Verkstaden                                      Måndag-Fredag                 <b>   7:15-16:00</b>
</p><br /><hr />

<p class="text">Telefon:<b> 042-204900</b><br />
  <br />
Fax: <b>042-205249</b><br />
<br />
info@wbm-fleninge.com</p>



</div>



<img id="ar" src="images/samarbete_40ar.png" width="200" height="150" />

</div>


</div>

</div>


</div>


<div id="footer">

<div id="footeri">
<div class="footercol">   <p class="överskrift">wbm fleninge</p>

    <img id="wbmlogo" src="images/wbm.jpg" width="292" height="58" />

    </div>
<div class="footercol">
  <p class="överskrift">HITTA OSS</p>

<iframe width="300" height="170" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.se/maps?f=q&amp;source=s_q&amp;hl=sv&amp;geocode=&amp;q=Djurhagshusv%C3%A4gen+325++254+77+%C3%96d%C3%A5kra&amp;aq=&amp;sll=61.606396,21.225586&amp;sspn=37.146142,135.263672&amp;ie=UTF8&amp;hq=&amp;hnear=Djurhagshusv%C3%A4gen+325,+260+35+%C3%96d%C3%A5kra&amp;ll=56.10018,12.812099&amp;spn=0.010269,0.033023&amp;t=m&amp;z=14&amp;output=embed"></iframe><br />
</div>
<div class="footercol">
 <p class="överskrift">SORTIMENT</p>

 <img src="images/Untitled-3 copy.png" width="272" height="167" />




 </div>


</div>




</div>



</body>
</html>

Thanks.

PaulOB · June 10, 2012, 8:31pm

You are linking to this:

http://www.wbm-fleninge.com/images/slider/1.jpg

But the image is called this:

http://www.wbm-fleninge.com/images/slider/1.JPG

Some servers are case sensitive so always name your files with lower case and don’t use any strange characters.

kvnwpts · June 10, 2012, 9:37pm

Hi.

Thanks for the answer, what’s still happening is that there is a gap between the first and last picture, so between those the blank picture occurs, and it’s only loading as you probably saw.
So the problem isnt solved.

TechnoBear · June 10, 2012, 9:46pm

You haven’t corrected the problem that Paul pointed out. One of your images is not loading because you have given the filename incorrectly in your HTML.

kvnwpts · June 10, 2012, 9:53pm

I have done so all my files in my HTML is spelled with lower case letters. That’s all I did and it didnt fix it.

   <img src="images/slider/10.png" width="980" height="300" />
            <img src="images/slider/1.jpg" width="980" height="300" />
            <img src="images/slider/2.png" width="980" height="300" />		
            <img src="images/slider/3.jpg" width="980" height="300" />
            <img src="images/slider/4.jpg" width="980" height="300" />
            <img src="images/slider/5.jpg" width="980" height="300" />
            <img src="images/slider/6.jpg" width="980" height="300" />
            <img src="images/slider/7.jpg" width="980" height="300" />
            <img src="images/slider/8.jpg" width="980" height="300" />

TechnoBear · June 10, 2012, 9:56pm

[FONT=Verdana]No, it doesn’t fix it because in your HTML you have

  <img src="images/slider/1.jpg" width="980" height="300" />

but the image file is called 1.JPG. You need to change the name of your image file to match the HTML.
[/FONT]

kvnwpts · June 10, 2012, 10:00pm

Is there any way around to change the file without having to open it in photoshop and save it again?

TechnoBear:

[FONT=Verdana]No, it doesn’t fix it because in your HTML you have
  <img src="images/slider/1.jpg" width="980" height="300" />
            
but the image file is called 1.JPG. You need to change the name of your image file to match the HTML.
[/FONT]

TechnoBear · June 10, 2012, 10:14pm

Just rename it - or change your HTML so it matches the filename.

PaulOB · June 11, 2012, 8:07am

As mentioned above just link to this image in the html:

http://www.wbm-fleninge.com/images/slider/1.JPG

If you click that link you will see it loads the required image. (You can always type the full path to the image in the address bar just to see if the image exists.)

This is why you should get into the habit of saving all your files and images without using special characters and all in lower case and the you won’t have this problem

kvnwpts · June 11, 2012, 12:45pm

I have acutally fixed it, but It dosent work.

http://www.wbm-fleninge.com/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WBM-Fleninge</title>
<link href="css/styles.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="css/demo.css"></head>


<meta name="description" content="WBM-Fleninge.">

  <meta name="keywords" content="WBM Fleninge,WBM Fleninge,WBM WILHELMSSON AB, WILHELMSSON AB, Wilhelmssons bil och Maskin, WBM, Fleninge, Kompressor, Stubbfräs 
Högtryckstvätt, Moped, Golfmaskiner, Golfbil, Honda, (Howard Price turf equipment),Lövblåsar, Sopmaskin,
Trädgårdsmaskiner, Lövsugar, Skog, Sågverk, Utombordare, Terränggående fordon, Park och Trädgårdsmaskiner
Elverk, Gräsklippare, Vertikalskärare, Motorsågar, Rotorgräsklippare, Häcksaxar, Röjsågar, Grästrimmer
Traktorer, Vedklyv, Vedkap, Vagn, Service, Kompostkvarn, Klimatanläggning, Ac, Aircondition, Entreprenad,
Beskärning, Pumpar, Flishugg, Åkgräsklippare, Klippo, Tanaka, Jonsered, Trädgårdsredskap, Hitachi, Snöslungor,
Fyrhjulingar, Röjare, Städmaskiner, Kyltekniker, Värmepumpar, Lantbruksmaskiner, Skogsbruksmaskiner, Reservdelar,
Tillbehör, Slåtter, Ryggblås, Skogsvagnar, Bilsläp, Kedjegrävare, Kapmaskin, Lövlastare, Vertikalskärare,
Mossrivare, Sandspridare, Saltspridare, Motor, Hydralik, Reperationer,">
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />


<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic' rel='stylesheet' type='text/css'>

    
	<link rel="stylesheet" href="orbit-1.2.3/orbit-1.2.3.css">

		<script type="text/javascript" src="orbit-1.2.3/jquery-1.5.1.min.js"></script>
		<script type="text/javascript" src="orbit-1.2.3/jquery.orbit-1.2.3.min.js"></script>	
		
		<script type="text/javascript">
			$(window).load(function() {
				$('#featured').orbit();
			});
		</script>




<body>


<div id="upper">

<div id="bgupper"><div id="iupper"><img id="logo" src="images/logo.png" width="142" height="166" /><div id="right">

<ul class="social">
  <li>
  <li>

<li><a href="images/swedac.PNG"></a><img src="images/aaaaaaaaaaaaaa.PNG" width="110" height="133" /></li>


<li><img id="swedac" src="images/mrf logga.jpg" width="142" height="120" /><a href="https://www.facebook.com/pages/WBM-Wilhelmsson-AB-i-Fleninge/439698779382425"><img src="images/facebook-logo.png" width="32" height="32" border="0" /></a></li>
</ul>
</div></div></div>




</div>

<div id="header-wrapper">
  <div class="wrapper">
		  <ul class="nav">
		    <li class="navigation"><a href="index.html">WBM-Fleninge</a></li>
				<li class="navigation"><a href="atv.html">ATV</a></li>
                		<li class="navigation"><a href="utv.html">UTV</a></li>
				<li class="navigation"><a href="sortiment.html">Sortiment</a></li>
                			<li class="navigation"><a href="robotklippare.html">Robotklippare</a></li>

				<li class="navigation"><a href="ac.html">AC</a></li>
                <li class="navigation"><a href="finanser.html">Finanser</a></li>
                   <li class="navigation"><a href="begagnat.html">Begagnat</a> </li>
                   
          
                
                <li class="navigation"><a href="kartor.html">Kartor</a></li>
                
                   <li class="navigation"><a href="kontakt.html">Kontakta oss</a></li>

		  </ul>
  </div>
</div>



<div id="wrapper">


<div id="featured"> 
			<div class="content">
		
			</div>
            <img src="images/slider/1.jpg" width="980" height="300" />
             <img src="images/slider/2.png" width="980" height="300" />
              <img src="images/slider/3.jpg" width="980" height="300" />
               <img src="images/slider/4.jpg" width="980" height="300" />
                <img src="images/slider/5.jpg" width="980" height="300" />
                 <img src="images/slider/6.jpg" width="980" height="300" />
                  <img src="images/slider/7.jpg" width="980" height="300" />
                   <img src="images/slider/8.jpg" width="980" height="300" />
                    <img src="images/slider/10.png" width="980" height="300" /></div>






<div id="om">

<div id="col1">
 <p class="oppet"><a href="https://www.facebook.com/pages/WBM-Wilhelmsson-AB-i-Fleninge/439698779382425">WBM Fleninge på Facebook</a></p>
<iframe id="FACEBOOK" src="https://www.facebook.com/plugins/like.php?href=https://www.facebook.com/pages/WBM-Wilhelmsson-AB-i-Fleninge/439698779382425"
        scrolling="no" frameborder="0"
        style="border:none; width:600Px; height:60px"></iframe>

<h1 class="inledning">Välkommen till WBM!</h1><br /><br />

<p class="text">WBM den kombinerade affären för trädgårdsredskap, redskapsbärare, entreprenadmaskiner samt ATV-fyrhjulingar, för både proffs och privat bruk. Som "Proffs på markvård skräddarsyr vi maskinparken efter Era behov".<br /><br />                                               Vår serviceverkstad har utbildning för de maskiner som används för gräsklippning, snöröjning och annan markvård.

Kontakta oss på service för information om service, serviceavtal för bästa ekonomi för er maskinpark.

Här finns också ackrediterade kyltekniker som installerar och gör service på klimat-anläggningar för personbilar, lastbilar, entreprenadmaskiner.<br /><br />

WBM Wilhelmsson AB är en återförsäljare som arbetar med ett komplett program av moderna proffsmaskiner för hela året. 

 

VÄLKOMNA ATT BOKA DEMO</p>


<p class="text">WBM den kombinerade affären för trädgårdsredskap, redskapsbärare, entreprenadmaskiner samt ATV-fyrhjulingar, för både proffs och privat bruk. Som "Proffs på markvård skräddarsyr vi maskinparken efter Era behov".<br /><br />                                               Vår serviceverkstad har utbildning för de maskiner som används för gräsklippning, snöröjning och annan markvård.

Kontakta oss på service för information om service, serviceavtal för bästa ekonomi för er maskinpark.

Här finns också ackrediterade kyltekniker som installerar och gör service på klimat-anläggningar för personbilar, lastbilar, entreprenadmaskiner.<br />
</p>
<div class="pics"></div>
  <div class="pics2"></div>
   <div class="pics3"></div>

 </div>
 
 
 
 

<div id="col2">


        
  <div id="öppettider">
  <p class="oppet">Öppettider</p><br />

<p class="text">Måndag-Fredag          <b> 7:15-17:00</b><br /><br />


Lördagar                           <b>   10:00-13:00</b><br /><br />
<b>31/3 - 30/6 </b>varje lördag resterande månader den sista lördagen i månaden.<br /><br />


Verkstaden                                      Måndag-Fredag                 <b>   7:15-16:00</b>
</p><br /><hr />

<p class="text">Telefon:<b> 042-204900</b><br />
  <br />
Fax: <b>042-205249</b><br />
<br />
info@wbm-fleninge.com</p>



</div>



<img id="ar" src="images/samarbete_40ar.png" width="200" height="150" />

</div>


</div>

</div>


</div>


<div id="footer">

<div id="footeri">
<div class="footercol">   <p class="överskrift">wbm fleninge</p>

    <img id="wbmlogo" src="images/wbm.jpg" width="292" height="58" />

    </div>
<div class="footercol">
  <p class="överskrift">HITTA OSS</p>

<iframe width="300" height="170" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.se/maps?f=q&amp;source=s_q&amp;hl=sv&amp;geocode=&amp;q=Djurhagshusv%C3%A4gen+325++254+77+%C3%96d%C3%A5kra&amp;aq=&amp;sll=61.606396,21.225586&amp;sspn=37.146142,135.263672&amp;ie=UTF8&amp;hq=&amp;hnear=Djurhagshusv%C3%A4gen+325,+260+35+%C3%96d%C3%A5kra&amp;ll=56.10018,12.812099&amp;spn=0.010269,0.033023&amp;t=m&amp;z=14&amp;output=embed"></iframe><br />
</div>
<div class="footercol">
 <p class="överskrift">SORTIMENT</p>
 
 <img src="images/Untitled-3 copy.png" width="272" height="167" />
 
 
 
 
 </div>


</div>




</div>



</body>
</html>

ralphm · June 11, 2012, 12:56pm

The slider works ok in my browser. Make sure to refresh your page/ clear your cache. What browser are you using?

kvnwpts · June 11, 2012, 12:59pm

Firefox, I tried with chrome too.

There is still a gap between the picture - first and last.

TechnoBear · June 11, 2012, 1:01pm

The slider works OK, but in both Chromium and Firefox there’s a pause between the last image and the cycle starting over again. I think that’s a JavaScript issue. In any case, you might want to adjust the slider. As it is, the images change too quickly for anybody to be able to read the text, and there’s no pause button.

PaulOB · June 11, 2012, 1:14pm

The image is working now.

The blank element is while the carousel loads this empty div.


<div id="featured">
 [B]<div class="content"> </div>
[/B]		<img

Is that empty div supposed to have content? What is it there for? The slider does not have that div in its setup. If you remove it (<div class=“content”> </div>) there will be no gap in the display of the slider.

kvnwpts · June 11, 2012, 1:19pm

THANKS!

You are my hero.
I make some bad mistakes sometimes.

Paul_O_B:

The image is working now.

The blank element is while the carousel loads this empty div.
<div id="featured">
 [B]<div class="content"> </div>
[/B]		<img
Is that empty div supposed to have content? What is it there for? The slider does not have that div in its setup. If you remove it (<div class=“content”> </div>) there will be no gap in the display of the slider.

system · October 8, 2014, 2:31am