java script slide show
2 posters
Page 1 of 1
java script slide show
hi can someone please tell me how i can have a slide show like the one you have where it says pick your theme i want one for my homepage but bigger !!!!
millers- Forumember
- Posts : 299
Reputation : 0
Language : uk
Location : Lancashire
Re: java script slide show
first of all i need the html script so i can test it on my forum so i can get the right size then am going to make the pics to put on it!! and i dont want it to have urls and just want it to be a slide show, do you have the html code ?
millers- Forumember
- Posts : 299
Reputation : 0
Language : uk
Location : Lancashire
Re: java script slide show
Here you go, millers...
This is modified to work with 6 unlinked images
This is modified to work with 6 unlinked images
- Code:
<center><style type="text/css">
.picshow_main { position: relative; width: 360px; height: 270px}
.picshow_main .imgbig { filter: progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward); width: 360px; height: 270px}
.picshow_change {display:none;}
img{border:0px;}
</style>
<SCRIPT language=javascript>
var counts = 6;
img1 = new Image();
img1.src = 'Your Image Url #1.png';
img2 = new Image();
img2.src = 'Your Image Url #2.png';
img3 = new Image();
img3.src = 'Your Image Url #3.png';
img4 = new Image();
img4.src = 'Your Image Url #4.png';
img5 = new Image();
img5.src = 'Your Image Url #5.png';
img6 = new Image();
img6.src = 'Your Image Url #6.png';
var smallImg = new Array();
alt1 = new Image();
alt1.alt = 'Your Image Title #1';
alt2 = new Image();
alt2.alt = 'Your Image Title #2';
alt3 = new Image();
alt3.alt = 'Your Image Title #3';
alt4 = new Image();
alt4.alt = 'Your Image Title #4';
alt5 = new Image();
alt5.alt = 'Your Image Title #5';
alt6 = new Image();
alt6.alt = 'Your Image Title #6';
var nn = 1;
var key = 0;
function change_img() {
if (key == 0) {
key = 1;
} else if (document.all) {
document.getElementById("pic").filters[0].Apply();
document.getElementById("pic").filters[0].Play(duration = 2);
}
eval('document.getElementById("pic").src=img' + nn + '.src');
eval('document.getElementById("pic").alt=alt' + nn + '.alt');
if (nn == 1)
for ( var i = 1; i <= counts; i++) {
document.getElementById("xxjdjj" + i).className = 'axx';
}
document.getElementById("xxjdjj" + nn).className = 'bxx';
nn++;
if (nn > counts) {
nn = 1;
}
tt = setTimeout('change_img()', 7000);
}
function changeimg(n) {
nn = n;
window.clearInterval(tt);
change_img();
}
function ImageShow() {
document.write('<div class="picshow_main">');
document.write('<div><a id="url_theme"><img id="pic" class="imgbig" /></a></div>');
document.write('<div class="picshow_change">');
for ( var i = 0; i < counts; i++) {
document.write('<a href="javascript:changeimg(' + (i + 1)
+ ');" id="xxjdjj' + (i + 1)
+ '" class="axx" target="_self"><img src="' + smallImg[i]
+ '"></a>');
}
document.write('</div></div>');
change_img();
}
</SCRIPT>
<SCRIPT language="javascript" type="text/javascript">
ImageShow();
</SCRIPT></center>
Re: java script slide show
thanks wich one is for the width and hight beacuse there is two, is it the first one ? plus there are no numbers on it like the pick your theme one on the right >>
millers- Forumember
- Posts : 299
Reputation : 0
Language : uk
Location : Lancashire
Re: java script slide show
Edit both .picshow_main and .picshow_main .imgbig dimensions
I've added 6 image change buttons to this
here: .picshow_change {position:
I've added 6 image change buttons to this
- Code:
<center><style type="text/css">
.picshow { z-index:444; position:relative; background-color:#ffffff; width: 100%; height: 270px}
.picshow_main { position: relative; width: 360px; height: 270px}
.picshow_main .imgbig { filter: progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward); width: 360px; height: 270px}
.picshow_change {position: absolute; text-align: left; bottom: 0px; height: 55px; right: 0px; left: 215px;}
.picshow_change img {width:15px; height: 15px}
.picshow_change a { border: 1px solid; display: block; float: left; margin-right: 5px; -display: inline}
a.axx { border-color: #555}
a.axx:hover {border-color: #000}
a.axx img { filter: alpha(opacity=40); opacity: 0.4; -moz-opacity: 0.4}
a.axx:hover img {filter: alpha(opacity=100); opacity: 1.0; -moz-opacity: 1.0}
a.bxx { border-color: #000}
a.bxx:hover {border-color: #000}
img{
border:0px}
</style>
<SCRIPT language=javascript>
var counts = 6;
img1 = new Image();
img1.src = 'Your Image Url #1.png';
img2 = new Image();
img2.src = 'Your Image Url #2.png';
img3 = new Image();
img3.src = 'Your Image Url #3.png';
img4 = new Image();
img4.src = 'Your Image Url #4.png';
img5 = new Image();
img5.src = 'Your Image Url #5.png';
img6 = new Image();
img6.src = 'Your Image Url #6.png';
var smallImg = new Array();
smallImg[0] = 'http://i69.servimg.com/u/f69/13/49/98/52/index_21.png';
smallImg[1] = 'http://i69.servimg.com/u/f69/13/49/98/52/index_22.png';
smallImg[2] = 'http://i69.servimg.com/u/f69/13/49/98/52/index_23.png';
smallImg[3] = 'http://i69.servimg.com/u/f69/13/49/98/52/index_24.png';
smallImg[4] = 'http://i69.servimg.com/u/f69/13/49/98/52/index_25.png';
smallImg[5] = 'http://i69.servimg.com/u/f69/13/49/98/52/index_26.png';
alt1 = new Image();
alt1.alt = 'Your Image Title #1';
alt2 = new Image();
alt2.alt = 'Your Image Title #2';
alt3 = new Image();
alt3.alt = 'Your Image Title #3';
alt4 = new Image();
alt4.alt = 'Your Image Title #4';
alt5 = new Image();
alt5.alt = 'Your Image Title #5';
alt6 = new Image();
alt6.alt = 'Your Image Title #6';
var nn = 1;
var key = 0;
function change_img() {
if (key == 0) {
key = 1;
} else if (document.all) {
document.getElementById("pic").filters[0].Apply();
document.getElementById("pic").filters[0].Play(duration = 2);
}
eval('document.getElementById("pic").src=img' + nn + '.src');
eval('document.getElementById("pic").alt=alt' + nn + '.alt');
if (nn == 1) {
document.getElementById("url_theme").style.cursor = ""
}
for ( var i = 1; i <= counts; i++) {
document.getElementById("xxjdjj" + i).className = 'axx';
}
document.getElementById("xxjdjj" + nn).className = 'bxx';
nn++;
if (nn > counts) {
nn = 1;
}
tt = setTimeout('change_img()', 7000);
}
function changeimg(n) {
nn = n;
window.clearInterval(tt);
change_img();
}
function ImageShow() {
document.write('<div class="picshow_main">');
document.write('<div><a id="url_theme"><img id="pic" class="imgbig" /></a></div>');
document.write('<div class="picshow_change">');
for ( var i = 0; i < counts; i++) {
document.write('<a href="javascript:changeimg(' + (i + 1)
+ ');" id="xxjdjj' + (i + 1)
+ '" class="axx" target="_self"><img src="' + smallImg[i]
+ '"></a>');
}
document.write('</div></div>');
change_img();
}
</SCRIPT>
<SCRIPT language="javascript" type="text/javascript">
ImageShow();
</SCRIPT></center>
here: .picshow_change {position:
Re: java script slide show
the buttons our still not showing how come thats happend ?
edit:
i think it's just my laptop if you upload the buttons on imageshack.us it works on my laptop and my pc
edit:
i think it's just my laptop if you upload the buttons on imageshack.us it works on my laptop and my pc
millers- Forumember
- Posts : 299
Reputation : 0
Language : uk
Location : Lancashire
Re: java script slide show
I went as far as number 10 -creating those.
In case you want more than 6... here they are
(re-name & re-host)
1 - https://2img.net/h/oi47.tinypic.com/t9tyro.jpg
2 - https://2img.net/h/oi47.tinypic.com/24o5yy0.jpg
3 - https://2img.net/h/oi49.tinypic.com/9lfr5e.jpg
4 - https://2img.net/h/oi46.tinypic.com/k53hqs.jpg
5 - https://2img.net/h/oi47.tinypic.com/27x0axu.jpg
6 - https://2img.net/h/oi45.tinypic.com/2814xfn.jpg
7 - https://2img.net/h/oi50.tinypic.com/zy8sjo.jpg
8 - https://2img.net/h/oi45.tinypic.com/28hkbcx.jpg
9 - https://2img.net/h/oi46.tinypic.com/10px8x1.jpg
10 - https://2img.net/h/oi50.tinypic.com/347i5qd.jpg
In case you want more than 6... here they are
(re-name & re-host)
1 - https://2img.net/h/oi47.tinypic.com/t9tyro.jpg
2 - https://2img.net/h/oi47.tinypic.com/24o5yy0.jpg
3 - https://2img.net/h/oi49.tinypic.com/9lfr5e.jpg
4 - https://2img.net/h/oi46.tinypic.com/k53hqs.jpg
5 - https://2img.net/h/oi47.tinypic.com/27x0axu.jpg
6 - https://2img.net/h/oi45.tinypic.com/2814xfn.jpg
7 - https://2img.net/h/oi50.tinypic.com/zy8sjo.jpg
8 - https://2img.net/h/oi45.tinypic.com/28hkbcx.jpg
9 - https://2img.net/h/oi46.tinypic.com/10px8x1.jpg
10 - https://2img.net/h/oi50.tinypic.com/347i5qd.jpg
Since the issue appears to be resolved, this topic is closed. Locked!RoNo |
General rules Tricks & Tips FAQ listing | For founders who lost their passwords About support requests by PM Announcements & Updates |
Similar topics
» [JAVA script]How to set a countdown script to forum/portal?
» slide script
» Java script
» Help in Java script
» Java Script
» slide script
» Java script
» Help in Java script
» Java Script
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum