The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Clickable SlideShow

3 posters

The forum of the forums :: Miscellaneous :: Garbage

Go down

In progress Clickable SlideShow

Post by DesignersSociety April 3rd 2013, 4:17 am

I'm using this code to make a slideshow on my sites' homepage. I want to try to make the slides clickable so they redirect to certain pages on the site. If anyone knows some codes to try let me know!

Code:
<head>
<script type="text/javascript">

var x=0;

function rotate(num){
fs=document.ff.slide;
x=num%fs.length;
if(x<0) x=fs.length-1;
document.images.show.src=fs.options[x].value;
fs.selectedIndex=x;}

function auto() {
if(document.ff.fa.value == "Stop"){
rotate(++x);setTimeout("auto()", 2500);}}
</script>





</head>


<body>
<center>

<form name="ff">
<table cellpadding="2" style="border:0px black solid;border-collapse:collapse;">

<tr><td align="center">
<img src="http://i47.tinypic.com/s4mges.png" name="show">
</td></tr>
<tr><td align="center" style="border:0px black solid;">
<select name="slide" onChange="rotate(this.selectedIndex);">
<option value="http://i47.tinypic.com/s4mges.png">Society Stores</option>
<option value="http://i47.tinypic.com/2ue7fjo.png">200 Members</option>
<option value="http://i47.tinypic.com/2w39xzk.png">Coming Soon</option>
<option value="http://i49.tinypic.com/11uymah.png">News</option>
</select>
<input type="button" onclick="rotate(x-1);" value="<<" title="Last Picture" />
<input type="button" name="fa" onClick="this.value=((this.value=='Stop')?'Start':'Stop');auto();" value="Start" title="Autoplay" style="width:75px;" />
<input type="button" onclick="rotate(x+1);" value=">>" title="Next Picture" />
</td></tr></table></form>

</center>


Last edited by Sir Chivas™ on April 5th 2013, 12:09 am; edited 2 times in total (Reason for editing : Added [code] tags.)
DesignersSociety
DesignersSociety
Forumember

Female Posts : 146
Reputation : 3
Language : english

http://designerssociety.betaboard.net

Back to top Go down

In progress Re: Clickable SlideShow

Post by Sir Chivas™ April 5th 2013, 12:09 am

Hi,

I don't think you're able to add that code inside. I will try to see if I can find anything, but as far as I know you can't.
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6983
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

https://aforums.org

Back to top Go down

In progress Re: Clickable SlideShow

Post by kirk April 5th 2013, 7:31 am

You can try this. it is a bit different and don't have the little play menu but can get links in the images.
You would add your links where it says ~http://www.linkhere.com next to your image links at the top part of the code

Code:
<script type="text/javascript">
 
var ultimateshow=new Array()
 
//ultimateshow[x]=["path to image", "OPTIONAL link for image", "OPTIONAL link target"]
 
ultimateshow[0]=['http://i47.tinypic.com/s4mges.png', 'http://www.linkhere.com', '_new']
ultimateshow[1]=['http://i47.tinypic.com/2ue7fjo.png', 'http://www.linkhere.com', '_new']
ultimateshow[2]=['http://i47.tinypic.com/2w39xzk.png', 'http://www.linkhere.com', '_new']
ultimateshow[3]=['http://i49.tinypic.com/11uymah.png', 'http://www.linkhere.com', '_new']

//configure the below 3 variables to set the dimension/background color of the slideshow
 
var slidewidth="500px" //set to width of LARGEST image in your slideshow
var slideheight="350px" //set to height of LARGEST iamge in your slideshow
var slidecycles="3" //number of cycles before slideshow stops (ie: "2" or "continous")
var randomorder="no" //randomize the order in which images are displayed? "yes" or "no"
var preloadimages="yes" //preload images? "yes" or "no"
var slidebgcolor='white'
 
//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=3000
 
////Do not edit pass this line////////////////
 
var ie=document.all
var dom=document.getElementById
var curcycle=0
 
if (preloadimages=="yes"){
for (i=0;i<ultimateshow.length;i++){
var cacheimage=new Image()
cacheimage.src=ultimateshow[i][0]
}
}
 
var currentslide=0
 
function randomize(targetarray){
ultimateshowCopy=new Array()
var the_one
var z=0
while (z<targetarray.length){
the_one=Math.floor(Math.random()*targetarray.length)
if (targetarray[the_one]!="_selected!"){
ultimateshowCopy[z]=targetarray[the_one]
targetarray[the_one]="_selected!"
z++
}
}
}
 
if (randomorder=="yes")
randomize(ultimateshow)
else
ultimateshowCopy=ultimateshow
 
function rotateimages(){
curcycle=(currentslide==0)? curcycle+1 : curcycle
ultcontainer='<center>'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='<a href="'+ultimateshowCopy[currentslide][1]+'" target="'+ultimateshowCopy[currentslide][2]+'">'
ultcontainer+='<img src="'+ultimateshowCopy[currentslide][0]+'" border="0">'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='</a>'
ultcontainer+='</center>'
if (ie||dom)
crossrotateobj.innerHTML=ultcontainer
if (currentslide==ultimateshow.length-1) currentslide=0
else currentslide++
if (curcycle==parseInt(slidecycles) && currentslide==0)
return
setTimeout("rotateimages()",slidedelay)
}
 
if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')
 
function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : document.all.slidedom
rotateimages()
}
 
if (ie||dom)
window.onload=start_slider
 
</script>

preview below, The links added only come back here to forumotion support for an example Smile
Small Demonstration




Very nice, Kirk. +1 Very good ~ Sir Chivas™️
kirk
kirk
Forumaster

Male Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

In progress Re: Clickable SlideShow

Post by DesignersSociety April 6th 2013, 7:06 am

It works great, although is there a way to pause it like on hover or buttons to help?
DesignersSociety
DesignersSociety
Forumember

Female Posts : 146
Reputation : 3
Language : english

http://designerssociety.betaboard.net

Back to top Go down

In progress Re: Clickable SlideShow

Post by kirk April 9th 2013, 8:48 pm

i am not sure, i will see what else i can dig up if anything, have not really found what i was looking for? if not may be someone else has a better script Smile
kirk
kirk
Forumaster

Male Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

Back to top

- Similar topics

The forum of the forums :: Miscellaneous :: Garbage

 
Permissions in this forum:
You cannot reply to topics in this forum