0
<!DOCTYPE html PUBLIC >
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/main.css"  />
    <script src="js/jsimageslider.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href= "css/generic.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
</head>
<body>
    <div id="dm1">
        <div id="dm1Inner">

<h1 class="first">hello people</h1>
    <div id="sliderFrame">
     <div id="ribbon"></div>
        <div id="slider">
            <img src="images/sl-1.jpg" alt="Welcome to Design3d.nl"  />
            <img src="images/sl-2.jpg" alt="Customizable Transition Effects" />
            <img src="images/sl-3.jpg" alt="Easy to use" />
            <img src="images/sl-4.jpg" alt="Pure Javascript. No jQuery. No flash." />
            <img src="images/sl-5.jpg" alt="#htmlcaption" />
            <img src="images/sl-6.jpg" alt="Most light weight Image Slider"/>
            <img src="images/sl-7.jpg" alt="Fine tuned. Sleek & Smooth" />
            <img src="images/sl-8.jpg" alt="Fine tuned. Sleek & Smooth" />
            <img src="images/sl-9.jpg" alt="Fine tuned. Sleek & Smooth" />
            <img src="images/sl-10.jpg" alt="Fine tuned. Sleek & Smooth" />
            <img src="images/sl-11.jpg" alt="Fine tuned. Sleek & Smooth" />
            <img src="images/sl-12.jpg" alt="Fine tuned. Sleek & Smooth" />
            <img src="images/sl-13.jpg" alt="Fine tuned. Sleek & Smooth" />
            <img src="images/sl-14.jpg" alt="Fine tuned. Sleek & Smooth" />

        </div>


        <div id="thumbs">
            <div class="thumb"><img src="images/sl-1-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-2-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-3-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-4-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-5-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-6-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-7-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-8-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-9-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-10-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-11-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-12-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-13-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-14-96x41.jpg" /></div>

        </div>
</div>




</body>
</html>


#sliderFrame 
{
    width:1540px;
    margin:20px auto; 
    margin-top:0px;
    margin-bottom:5px;
    padding:20px;
    background:#191919;
    border:1px solid #667;
    text-align:center;

}



#slider {
    width:1520px;
    height:700px;/* Make it the same size as your images */
    background:black url(loading.gif) no-repeat 50% 50%;
    position:relative;
    margin:0 auto;/*make the image slider center-aligned */
}
#slider img {
    position:absolute ;
    border:none;
    margin:0;
    padding:0;
    visibility:hidden;
    text-align:center;

}
img { text-align: center}

/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
    z-index:2;
    display:none;position:absolute;
    top:0px;left:0px;border:0;padding:0;margin:0;
    width:100%;height:100%;
}

/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
    position:absolute;
    width:100%;
    height:auto;
    padding:10px;
    left: 20px; /*if the caption needs to be aligned from right, specify by right instead of left. i.e. right:20px;*/
    bottom: -40px;/*if the caption needs to be aligned from top, specify by top instead of bottom. i.e. top:150px;*/
    z-index:3;
    overflow:hidden;
    font-size:0;
}
div.mc-caption-bg {
    background:transparent; /*Caption background color. Can be set to "background:transparent;", or set to semi-transparent through the sliderOptions.captionOpacity setting in the javascript.*/
}
div.mc-caption {
    font:bold 13px/16px Arial;
    color:#ccc;
    z-index:4;
    text-align:center;
}
div.mc-caption a { 
    color:#66FFFF;
}


/* ------ built-in navigation bullets wrapper that is relative to the #slider ------*/
div.navBulletsWrapper  {
    display:none;
}


/*thumbnails*/
#thumbs 
{
    margin-top:50px;
    text-align:center;
    font-size:0;
}
#thumbs .thumb 
{
    display:inline-block;
    *display:inline;zoom:1;/*IE6, IE7 hack*/
    margin:0 1px;/*this determins the distance between each thumbnail*/
    border:1px solid #333;
    padding:4px;
    background:black;
}

#thumbs .thumb img{border:1px solid #555; cursor:pointer; width:70px; height:44px; opacity:0.5;filter:alpha(opacity:50);}
#thumbs .thumb-on img{border:1px solid #999; opacity:1;filter:alpha(opacity:100);}

/* --------- Others ------- */
2
Contributors
14
Replies
21
Views
4 Years
Discussion Span
Last Post by davit_91
Featured Replies
  • 1

    Your reference to the ajax file seems to be incorrect. you are missing "http:" `<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>` Also, make sure you upload the script to the js folder on the server. `<script src="js/jsimageslider.js" type="text/javascript"></script>` Read More

0

on server doesn't works only #thumbs effect, main gallerys sliding effect works perffectly

1

Your reference to the ajax file seems to be incorrect. you are missing "http:"

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Also, make sure you upload the script to the js folder on the server.

<script src="js/jsimageslider.js" type="text/javascript"></script>

Edited by JorgeM

0

Do you have the URL where this is online to take a look? You've only provide the HTML and CSS. There may be some other issues within the JS file.

0

The page does not come up. Did you fix this in your local solution and upload it to the server?

change
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

to

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

when the "http:" is not included in the URL, even the local copy that I have will not load. Once the http: is included, at least the page comes up even though I dont have access to your javascript file.

On the internet, the page doesnt come up which leads me to beleive that you havent corrected this.

0

I just tried again, and you r website online is not coming up. My browser gives me a "connection reset error". Yes, you can zip your project and upload it hear, or you can a working copy on jsfiddle.net which is really helpful as well.

Edited by JorgeM

0

i can't upload photos

Attachments
<!DOCTYPE html PUBLIC >
<html>
<head>
    <title>Design3dnl</title>
    <link rel="stylesheet" type="text/css" href="css/main.css"  />
    <script src="js/jsimageslider.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href= "css/generic.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
  

<h1 class="first">hello people</h1>
    <div id="sliderFrame">
     <div id="ribbon"></div>
        <div id="slider">
            <img src="images/sl-1.jpg" alt="Welcome to Design3d.nl"  />
            <img src="images/sl-2.jpg" alt="Customizable Transition Effects" />
            <img src="images/sl-3.jpg" alt="Easy to use" />
            <img src="images/sl-4.jpg" alt="Pure Javascript. No jQuery. No flash." />
            <img src="images/sl-5.jpg" alt="#htmlcaption" />
            <img src="images/sl-6.jpg" alt="Most light weight Image Slider"/>
            <img src="images/sl-7.jpg" alt="Fine tuned. Sleek & Smooth" />
            <img src="images/sl-8.jpg" alt="Fine tuned. Sleek & Smooth" />
            <img src="images/sl-9.jpg" alt="Fine tuned. Sleek & Smooth" />
            <img src="images/sl-10.jpg" alt="Fine tuned. Sleek & Smooth" />
            <img src="images/sl-11.jpg" alt="Fine tuned. Sleek & Smooth" />
            <img src="images/sl-12.jpg" alt="Fine tuned. Sleek & Smooth" />
            <img src="images/sl-13.jpg" alt="Fine tuned. Sleek & Smooth" />
            <img src="images/sl-14.jpg" alt="Fine tuned. Sleek & Smooth" />
            
        </div>
  
                
        <div id="thumbs">
            <div class="thumb"><img src="images/sl-1-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-2-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-3-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-4-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-5-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-6-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-7-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-8-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-9-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-10-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-11-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-12-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-13-96x41.jpg" /></div>
            <div class="thumb"><img src="images/sl-14-96x41.jpg" /></div>
    
        </div>
</div>
    
    <div id="will">
    <a href="http://wilmsag.de"><img src="images/wilmsaglogo.png"></a>
    <p>Wilms AG</p>
    <p>Frankfurter Allee 286 | 10317 Berlin</p>
    <p>Tauentzienstr. 12 | 10789 Berlin</p>
    <p>Bahnhofsplatz 8 | 15526 Bad Saarow</p>
    <p>Telefon: (030) 522 955-0 </p>
    <p>Telefax: (030) 522 955-18</p>
    <p>Oderverwenden Sie dazu unsere</p>
    <p>Kostenlose hotline:</p>
    <p>0800 522 955-0</p>
    
    
    </div>


</body>
</html>
0

When I run your site using my browser's developer's tools, I only come accross two issues.

First, you refer to a loading.gif reference in your CSS and so the browser is expecting to find this file and cannot in the CSS folder.

Secondly, since I do not have the images, the tool reports that the images are unreachable, thats fine for testing.

I went ahead and created some test images, and uploaded the site to one of my webs. The web app ran without any issues. The images I uploaded where display both in the thumbnail strip as well as in the main screen moving from one picture to the next.

There is something about your hosting, or the way you are uploading your project. You have validated that it works locally as well as I and all of your references seem to be correct with the exception of the loading.gif image.

Are you sure you are uploading the files properly into the correct structure on your hosting provider's site?

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.