<!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
on server doesn't works only #thumbs effect, main gallerys sliding effect works perffectly
JorgeM
958
Problem Solver
Team Colleague
Featured Poster
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>
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
it doesn't works anyway
JorgeM
958
Problem Solver
Team Colleague
Featured Poster
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.
davit_91
0
Newbie Poster
JorgeM
958
Problem Solver
Team Colleague
Featured Poster
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.
davit_91
0
Newbie Poster
yes i have done it. you can see it in view source and also it is possible, to go to the page http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js , from my source wich is on the server http://design3d.bugs3.com/
davit_91
0
Newbie Poster
if it is possible i can upload my files here
JorgeM
958
Problem Solver
Team Colleague
Featured Poster
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.
davit_91
0
Newbie Poster
i can't upload photos
davit_91
0
Newbie Poster
here is full
JorgeM
958
Problem Solver
Team Colleague
Featured Poster
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?
davit_91
0
Newbie Poster
davit_91
0
Newbie Poster
i thin there is something wrong with js
SanSoft InfoTec
0
Newbie Poster
if your page is hosted on https then use
<script src="https//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
else us
<script src="http//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Dani
3,501
The Queen of DaniWeb
Administrator
Featured Poster
Premium Member
if your page is hosted on https then use
<script src="https//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
else us
<script src="http//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
I think you meant https:// vs http:// (you forgot the colon)
Alternatively, you can just use
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>(which is correct without the colon) and it will use whichever scheme the URL containing that script tag has.
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.