Slideshow code
+2
Anime Creator
Darkness_demoN
6 posters
Page 1 of 1
Re: Slideshow code
Would like to help out but I dont get what you looking for...
An image where are buttons like 1,2,3 and when you hover your mouse the image changes?
(I'm stupid?)
An image where are buttons like 1,2,3 and when you hover your mouse the image changes?
(I'm stupid?)
Re: Slideshow code
Here is tutorials on it that functions similarly:
http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm
Here is the code that forumotion uses:
http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm
Here is the code that forumotion uses:
- Code:
<style type="text/css">
.picshow { z-index:444; position:relative; background-color:#ffffff; width: 100%; height: 135px}
.picshow_main { position: relative; width: 180px; height: 135px}
.picshow_main .imgbig { filter: progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward); width: 180px; height: 135px}
.picshow_change {position: absolute; text-align: left; bottom: 0px; height: 30px; right: 0px; left: 100px;}
.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 = 3;
img1 = new Image(); img1.src = 'http://hitskin.com/themes/13/27/62/thumb.png';
img2 = new Image(); img2.src = 'http://hitskin.com/themes/12/62/62/thumb.jpg';
img3 = new Image(); img3.src = 'http://hitskin.com/themes/13/82/61/thumb.png';
var smallImg = new Array();
smallImg[0] = 'http://i60.servimg.com/u/f60/12/10/25/45/index_10.gif';
smallImg[1] = 'http://i60.servimg.com/u/f60/12/10/25/45/index_11.gif';
smallImg[2] = 'http://i60.servimg.com/u/f60/12/10/25/45/index_12.gif';
url1 = 'http://en.hitskin.com/search-a-skin/black-gold-132762.htm';
url2 = 'http://en.hitskin.com/search-a-skin/360-elite-126262.htm';
url3 = 'http://en.hitskin.com/search-a-skin/ipvista-138261.htm';
alt1 = new Image(); alt1.alt = 'Black Gold';
alt2 = new Image(); alt2.alt = '360 Elite';
alt3 = new Image(); alt3.alt = 'IP Vista';
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("url_theme").href=url' + nn);
eval('document.getElementById("pic").alt=alt' + nn + '.alt');
if (nn == 1) {
document.getElementById("url_theme").target = "_blank";
document.getElementById("url_theme").style.cursor = "pointer";}
else {
document.getElementById("url_theme").target = "_blank"
document.getElementById("url_theme").style.cursor = "pointer"
}
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>
Last edited by Reave on September 29th 2010, 11:36 pm; edited 1 time in total
Re: Slideshow code
That worck, but with little problem:Reave wrote:Here is tutorials on it that functions similarly:
http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm
Here is the code that forumotion uses:
- Code:
<style type="text/css">
.picshow { z-index:444; position:relative; background-color:#ffffff; width: 100%; height: 135px}
.picshow_main { position: relative; width: 180px; height: 135px}
.picshow_main .imgbig { filter: progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward); width: 180px; height: 135px}
.picshow_change {position: absolute; text-align: left; bottom: 0px; height: 30px; right: 0px; left: 100px;}
.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 = 3;
img1 = new Image(); img1.src = 'http://hitskin.com/themes/13/27/62/thumb.png';
img2 = new Image(); img2.src = 'http://hitskin.com/themes/12/62/62/thumb.jpg';
img3 = new Image(); img3.src = 'http://hitskin.com/themes/13/82/61/thumb.png';
var smallImg = new Array();
smallImg[0] = 'http://i60.servimg.com/u/f60/12/10/25/45/index_10.gif';
smallImg[1] = 'http://i60.servimg.com/u/f60/12/10/25/45/index_11.gif';
smallImg[2] = 'http://i60.servimg.com/u/f60/12/10/25/45/index_12.gif';
url1 = 'http://en.hitskin.com/search-a-skin/black-gold-132762.htm';
url2 = 'http://en.hitskin.com/search-a-skin/360-elite-126262.htm';
url3 = 'http://en.hitskin.com/search-a-skin/ipvista-138261.htm';
alt1 = new Image(); alt1.alt = 'Black Gold';
alt2 = new Image(); alt2.alt = '360 Elite';
alt3 = new Image(); alt3.alt = 'IP Vista';
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("url_theme").href=url' + nn);
eval('document.getElementById("pic").alt=alt' + nn + '.alt');
if (nn == 1) {
document.getElementById("url_theme").target = "_blank";
document.getElementById("url_theme").style.cursor = "pointer";}
else {
document.getElementById("url_theme").target = "_blank"
document.getElementById("url_theme").style.cursor = "pointer"
}
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>
<div class="picshow_main">
<div>
<a id="url_theme" href="http://en.hitskin.com/search-a-skin/360-elite-126262.htm" target="_blank" style="cursor: pointer; ">
<img id="pic" class="imgbig" src="http://hitskin.com/themes/12/62/62/thumb.jpg" alt="360 Elite">
</a>
</div>
<div class="picshow_change">
<a href="javascript:changeimg(1);" id="xxjdjj1" class="axx" target="_self"><img src="./Slideshow code_files/index_10.gif"></a>
<a href="javascript:changeimg(2);" id="xxjdjj2" class="bxx" target="_self"><img src="./Slideshow code_files/index_11.gif"></a>
<a href="javascript:changeimg(3);" id="xxjdjj3" class="axx" target="_self"><img src="./Slideshow code_files/index_12.gif"></a>
</div>
</div>
Buttom slide is clone on top slide, but he dont change images ...
Last edited by Darkness_demoN on September 29th 2010, 11:58 pm; edited 2 times in total
Re: Slideshow code
Try thisDarkness_demoN wrote:
That worck, but with little problem:
Buttom slide is clone on top slide, but he dont change images ...
- Code:
<style type="text/css">
.picshow { z-index:444; position:relative; background-color:#ffffff; width: 100%; height: 135px}
.picshow_main { position: relative; width: 180px; height: 135px}
.picshow_main .imgbig { filter: progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward); width: 180px; height: 135px}
.picshow_change {position: absolute; text-align: left; bottom: 0px; height: 30px; right: 0px; left: 100px;}
.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 = 3;
img1 = new Image(); img1.src = 'http://hitskin.com/themes/13/27/62/thumb.png';
img2 = new Image(); img2.src = 'http://hitskin.com/themes/12/62/62/thumb.jpg';
img3 = new Image(); img3.src = 'http://hitskin.com/themes/13/82/61/thumb.png';
var smallImg = new Array();
smallImg[0] = 'http://i60.servimg.com/u/f60/12/10/25/45/index_10.gif';
smallImg[1] = 'http://i60.servimg.com/u/f60/12/10/25/45/index_11.gif';
smallImg[2] = 'http://i60.servimg.com/u/f60/12/10/25/45/index_12.gif';
url1 = 'http://en.hitskin.com/search-a-skin/black-gold-132762.htm';
url2 = 'http://en.hitskin.com/search-a-skin/360-elite-126262.htm';
url3 = 'http://en.hitskin.com/search-a-skin/ipvista-138261.htm';
alt1 = new Image(); alt1.alt = 'Black Gold';
alt2 = new Image(); alt2.alt = '360 Elite';
alt3 = new Image(); alt3.alt = 'IP Vista';
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("url_theme").href=url' + nn);
eval('document.getElementById("pic").alt=alt' + nn + '.alt');
if (nn == 1) {
document.getElementById("url_theme").target = "_blank";
document.getElementById("url_theme").style.cursor = "pointer";}
else {
document.getElementById("url_theme").target = "_blank"
document.getElementById("url_theme").style.cursor = "pointer"
}
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>
Re: Slideshow code
Since this thread appears to be solved, I will lock this thread and mark it as solved.
Sanket
Sanket- ForumGuru
- Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai
Similar topics
» Any site that would make a slideshow and give me a code for it?
» Caption Slideshow and Link from Slideshow
» add red slideshow or Blue Slideshow
» SlideShow
» slideshow?
» Caption Slideshow and Link from Slideshow
» add red slideshow or Blue Slideshow
» SlideShow
» slideshow?
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum