<!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 ------- */
davit_91
0
Newbie Poster
Recommended Answers
Jump to PostYour 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>
Jump to PostDo 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.
Jump to PostThe 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 …
Jump to PostI 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.
All 16 Replies
davit_91
0
Newbie Poster
JorgeM
958
Problem Solver
Team Colleague
Featured Poster
Dani
commented:
The http part isn’t missing. It’s intentionally left out to work with either http or https
-8
davit_91
0
Newbie Poster
JorgeM
958
Problem Solver
Team Colleague
Featured Poster
davit_91
0
Newbie Poster
JorgeM
958
Problem Solver
Team Colleague
Featured Poster
davit_91
0
Newbie Poster
davit_91
0
Newbie Poster
JorgeM
958
Problem Solver
Team Colleague
Featured Poster
davit_91
0
Newbie Poster
davit_91
0
Newbie Poster
JorgeM
958
Problem Solver
Team Colleague
Featured Poster
davit_91
0
Newbie Poster
davit_91
0
Newbie Poster
SanSoft InfoTec
0
Newbie Poster
Dani
3,501
The Queen of DaniWeb
Administrator
Featured Poster
Premium Member
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.