[b]Slideshow with unique double-gum-effect. You may add a link and comment for each slide (image)[/b]
[b]credits:[/b]
[spoiler]Peter Gehrig and Urs Dudli
www.freewebknowledge.com
bro. simpleMe
sir Ephemeral
ME..
[/spoiler]
[b]step 1[/b]
[b]Save this as .html[/b]
[b]edit teh bolded parts on your own[/b]
[spoiler]<html>
<head>
<script>
// CREDITS:
// Gum Slideshow 3.11
// By Peter Gehrig
// Copyright (c) 2004 Peter Gehrig and Urs Dudli. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at
http://www.freewebknowledge.com/jscodes.php
var slideurl=new Array()
var slidecomment=new Array()
var slidelink=new Array()
var slidetarget=new Array()
///////////////////////////////////////////////////////////////////////////
// EDIT-ZONE STARTS HERE
//////////////////////////////////////////////////////////////////////////
// Set the URLs of your slides (images)
slideurl[0]="[b]IMAGE URL HERE[/b]"
slideurl[1]="[b]IMAGE URL HERE[/b]"
slideurl[2]="[b]IMAGE URL HERE[/b]"
slideurl[3]="[b]IMAGE URL HERE[/b]"
// Add a link for each slide
// If you don't want to link a slide type "[b]#[/b]" instead
slidelink[0]="[b]LINK HERE[/b]"
slidelink[1]="[b]LINK HERE[/b]"
slidelink[2]="[b]LINK HERE[/b]"
slidelink[3]="[b]LINK HERE[/b]"
// Add a target for each link
// Allowed values are: "_blank", "_top", "_parent", "_self" or the name of a frame
slidetarget[0]="[b]_blank[/b]"
slidetarget[1]="[b]_blank[/b]"
slidetarget[2]="[b]_top[/b]"
slidetarget[3]="[b]_blank[/b]"
// Add a comment for each slide
slidecomment[0]="[b]COMMENT HERE[/b]"
slidecomment[1]="[b]COMMENT HERE[/b]"
slidecomment[2]="[b]COMMENT HERE[/b]"
slidecomment[3]="[b]COMMENT HERE[/b]"
// Set the font for the comments
var slidefont="Australian Sunrise"
// Set the fontcolor for the comments
var slidefontcolor="green"
// Set the fontsize for the comments (HTML-values ranging form 1 - 6)
var slidefontsize=5
// Set the width of the pictures (pixels)
var slidewidth=237
// Set the height of the pictures (pixels)
var slideheight=130
// Set the pause between the pictures (seconds)
var pause=3
///////////////////////////////////////////////////////////////////////////
// EDIT-ZONE ENDS HERE
//////////////////////////////////////////////////////////////////////////
var preloadedimages=new Array()
for (i=0;i<slideurl.length;i++){
preloadedimages[i]=new Image()
preloadedimages[i].src=slideurl[i]
}
var ns4=document.layers?1:0
var ns6=document.getElementById&&!document.all?1:0
var ie=document.all?1:0
var imgpreload=new Array()
for (i=0;i<=slideurl.length-1;i++) {
imgpreload[i]=new Image()
imgpreload[i].src=slideurl[i]
}
var pos_left=0
var pos_top=0
var speed=20
var step=10
var i_loop=0
var i_image1=0
var i_image2=1
var i_space=""
var all_space=""
var max_space=20
var content=""
var i_slide=0
pause*=1000
function stretchimage() {
if (i_loop<=slidewidth) {
if (ie) {
imgcontainer1.innerHTML="<a href='"+slidelink[i_image1]+"' target='"+slidetarget[i_image1]+"'><img width='"+i_loop+"' height='"+slideheight+"' src='"+slideurl[i_image1]+"' border='0'></a>"
document.all.imgcontainer2.style.posLeft=document.all.imgcontainer1.style.posLeft+i_loop
imgcontainer2.innerHTML="<a href='"+slidelink[i_image2]+"' target='"+slidetarget[i_image2]+"'><img width='"+(slidewidth-i_loop)+"' height='"+slideheight+"' src='"+slideurl[i_image2]+"' border='0'></a>"
}
if (ns6) {
document.getElementById('imgcontainer1').innerHTML="<a href='"+slidelink[i_image1]+"' target='"+slidetarget[i_image1]+"'><img width='"+i_loop+"' height='"+slideheight+"' src='"+slideurl[i_image1]+"' border='0'></a>"
document.getElementById('imgcontainer2').style.left=parseInt(document.getElementById('imgcontainer1').style.left)+i_loop
document.getElementById('imgcontainer2').innerHTML="<a href='"+slidelink[i_image2]+"' target='"+slidetarget[i_image2]+"'><img width='"+(slidewidth-i_loop)+"' height='"+slideheight+"' src='"+slideurl[i_image2]+"' border='0'></a>"
}
i_loop=i_loop+step
var timer=setTimeout("stretchimage()",speed)
}
else {
clearTimeout(timer)
var imgcontent="<a href='"+slidelink[i_image1]+"' target='"+slidetarget[i_image1]+"'><img width='"+i_loop+"' height='"+slideheight+"' src='"+slideurl[i_image1]+"' border='0'></a><br><font face='"+slidefont+"' size="+slidefontsize+" color='"+slidefontcolor+"'>"+slidecomment[i_image1]+"</font>"
if (ie) {
imgcontainer1.innerHTML=imgcontent
document.all.imgcontainer2.style.posLeft=document.all.imgcontainer1.style.posLeft+i_loop
imgcontainer2.innerHTML=""
}
if (ns6) {
document.getElementById('imgcontainer1').innerHTML=imgcontent
document.getElementById('imgcontainer2').style.left=parseInt(document.getElementById('imgcontainer1').style.left)+i_loop
document.getElementById('imgcontainer2').innerHTML=""
}
changeimage()
}
}
function changeimage() {
i_loop=0
i_image1++
if (i_image1>slideurl.length-1) {i_image1=0}
i_image2=i_image1-1
if (i_image2>slideurl.length-1) {i_image2=0}
if (i_image2<0) {i_image2=slideurl.length-1}
if (ie) {
document.all.imgcontainer2.style.posLeft=document.all.imgcontainer1.style.posLeft
}
if (ns6) {
document.getElementById('imgcontainer2').style.left=parseInt(document.getElementById('imgcontainer2').style.left)
}
var timer=setTimeout("stretchimage()",pause)
}
function simpleslideshow() {
i_slide++
if (i_slide>=slideurl.length) {i_slide=0}
document.slideimage.src=preloadedimages[i_slide].src
simpleslideshowcomment()
var fadetimer=setTimeout("simpleslideshow()",pause)
}
function simpleslideshowcomment() {
if (i_space>=0){
all_space=""
content=""
for (i=0;i<i_space;i++) {
all_space+=" "
}
for (i=0;i<slidecomment[i_slide].length;i++) {
var thisletter=slidecomment[i_slide].substring(i,i+1)
thisletter=thisletter+all_space
content+=thisletter
}
window.status=content
i_space--
var fadetimer=setTimeout("simpleslideshowcomment()",20)
}
else {
clearTimeout(fadetimer)
i_space=max_space
}
}
function simpleslideshowjump() {
if (slidetarget[i_slide]=="_self") {
document.location.href=slidelink[i_slide]
}
else if (slidetarget[i_slide]=="_blank") {
codepopup=window.open(slidelink[i_slide], "code", "status=yes,location=yes,toolbar=yes,menubar=yes,resizable=yes,scrollbars=yes,width=780,height=580,top=10,left=10");
}
else if (slidetarget[i_slide]=="_top") {
top.location.href=slidelink[i_slide]
}
else if (slidetarget[i_slide]=="_parent") {
parent.location.href=slidelink[i_slide]
}
else {
var jumpto=eval("parent."+slidetarget[i_slide])
jumpto.location.href=slidelink[i_slide]
}
}
if (ie || ns6) {
var slideh=slideheight+30
document.write("<div style=\"position:relative;width:"+slidewidth+"px;height:"+slideh+"px;overflow:hidden\">")
document.write("<div id=\"imgcontainer1\" style=\"position:absolute;width:"+slidewidth+"px;height:"+slideh+"px;top:0px;left:0px\"><img src=\""+slideurl[0]+"\"></div>")
document.write("<div id=\"imgcontainer2\" style=\"position:absolute;width:"+slidewidth+"px;height:"+slideh+"px;top:0px;left:0px\"><img src=\""+slideurl[1]+"\"></div>")
document.write("</div>")
window.onload=stretchimage
}
else {
document.write("<a href=\"javascript:simpleslideshowjump()\"><img name=\"slideimage\" src=\""+slideurl[0]+"\" border=0></a>")
window.onload=simpleslideshow
}
</script>
</head>
</html>[/spoiler]
[b]step 2 [/b]
[b]save this on your js[/b]
[b]edit teh bolded part[/b]
[spoiler][quote]if (!attachOnLoadHandler(function(){GumSlideshowShoutOut()})) window.onload = function(){GumSlideshowShoutOut()};
function GumSlideshowShoutOut(){
var artmann = "<iframe id=\"tickermain\" src=\"[color=#FF0000][b]Link of your GumSlideShow.html here[/color]\[/b]" width=\"100%\" height=\"160px\" marginwidth=\"0\" marginheight=\"0\" hspace=\"0\" vspace=\"0\" frameborder=\"0\" scrolling=\"no\"></iframe>";
document.getElementById('cpShoutoutBox').style.height='160px';
document.getElementById('cpShoutoutBox').style.overflowY='hidden';
document.getElementById('cpShoutoutBox').innerHTML = "<table width='100%'><tr><td align='center'>"+artmann+"</td></tr></table>";
}setTimeout("GumSlideshowShoutOut()",4000);[/quote]
[b]or like this..[/b]
[quote]if (!attachOnLoadHandler(function(){GumSlideshowShoutOut()})) window.onload = function(){GumSlideshowShoutOut()};
function GumSlideshowShoutOut(){
var artmann = "<iframe id=\"tickermain\" src=\"[color=#FF0000][b]Link of your GumSlideShow.html here[/color]\[/b]" width=\"100%\" height=\"160px\" marginwidth=\"0\" marginheight=\"0\" hspace=\"0\" vspace=\"0\" frameborder=\"0\" scrolling=\"no\"></iframe>";
document.getElementById('cpShoutoutBox').style.height='160px';
document.getElementById('cpShoutoutBox').style.overflowY='hidden';
document.getElementById('cpShoutoutBox').innerHTML = "<table width='100%'><tr><td align='center'>"+artmann+"</td></tr></table>";
}[/quote]
[/spoiler]
or use like this instead
put teh codes inside ur onload handler, look teh bolded part
[spoiler]function onProfileLoad() {
//onload handler
[b]var artmann = "<iframe id=\"tickermain\" src=\"[/b][color=#FF0000][b]Link of your GumSlideShow.html here[/color]\[/b][b]" width=\"100%\" height=\"160px\" marginwidth=\"0\" marginheight=\"0\" hspace=\"0\" vspace=\"0\" frameborder=\"0\" scrolling=\"no\"></iframe>";
document.getElementById('cpShoutoutBox').style.height='160px';
document.getElementById('cpShoutoutBox').style.overflowY='hidden';
document.getElementById('cpShoutoutBox').innerHTML = "<table width='100%'><tr><td align='center'>"+artmann+"</td></tr></table>";[/b]
}
if (!attachOnLoadHandler(function(){onProfileLoad()})) window.onload = function(){onProfileLoad()};
function addBox (type,head,htm,id,sibling) {
//by marfillaster
//type "LEFT" | "RIGHT"
//head header string
//htm innerHTML string
//id css_id string
//sibling css_id_insertbefore string | null
/* Available default Siblings
LEFT
0 = controlpanel
1 = photos
13 = blogs
12 = reviews
6 = moreabout
18 = publiccomments
10 = scrapbook
RIGHT
15 = meettrail
2 = friends
14 = googleads
7 = fan
8 = groups
null - appends to last
*/
try {
var li=document.createElement("li");
} catch(e) {
var li=document.createElement("<li>");
}
if(type=="LEFT") {
var ul=document.getElementById("0").parentNode.parentNode;
htm="<div class='boxcontent'>"+htm+"</div>";
}
else var ul=document.getElementById("2").parentNode.parentNode;
li.innerHTML="<div id='"+id+"' class='commonbox "+id+"'>"+
"<h2>"+head+"</h2>"+
"<div id='content_"+id+"'>"+
htm+
"</div>"+
"</div>";
if(sibling==null) ul.appendChild(li);
else {
sibling=document.getElementById(sibling).parentNode;
ul.insertBefore(li,sibling);
}
}[/spoiler]
[spoiler][align=center][color=blue][b]2010,2011,2012,2013,2014,2015,2016,2017,2018,2019,2020 - forever
kakaibang Pilipinas makikita ng buong mundo....
Philippines: As A First World Country
Filipino Missionaries will be the next great missionary force in the world
Bansang may pagmamahal at tunay na takot sa Diyos
maunlad at mgandang pamumuhay
mas masayang pamilyang Filipino
sumasabay o mas mahusay na teknolohiya sa mundo..
Malinis na election
mga tapat at mahuhusay na Leader ng Bansa
at marame pang iba[/b][/color][/align][/spoiler]
[align=center][b]screenshot[/b]
[img]http://i26.tinypic.com/2ldxamf.jpg[/img][/align]
Last edited by mabuhay (2009-07-13 06:27:30)