Log in

View Full Version : HTML5 help



john123a
06-18-2011, 05:12 AM
Ok basically im trying to make this http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm but what i want it todo is be a list of about 4 or 5 of these that would show pictures of the featured post of my forum. i would put the images in manually but i dont know how to make them click able and able to go to the post i specify it to go to and how would i get them into a box where they look neat and just click able all this would go on the portal of my forum im trying to explain it the best i can

auntnini
06-23-2011, 01:33 AM
I'm not good enough to do this myself, but here is JavaScriptKit code from http://www.jacquimorgan.com/ that adds link to array.



/* Flexible Image Slideshow- By JavaScriptKit.com (http://www.javascriptkit.com)
For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/ This notice must stay intact for use */
/*see forum http://www.codingforums.com/showthread.php?t=143543 for adding caption/title August08 and onMouseOver PAUSE Aug08*/

var ultishow=new Array()

//ultishow[x]=["path to image", "OPTIONAL image link", "OPTIONAL target", "caption/Title"]
ultishow[0]=['miscImages/mostlyNude.jpg', 'life/index.html', '', 'Book Cover']
ultishow[1]=['book300/page23.jpg', 'life/index.html', '', 'Page 23 Darlene and Pinky 2007 16x18']
ultishow[2]=['book300/page25.jpg', 'life/index.html', '', 'Page 25 Kika Hiding from the Spotlight 2009 22x15']
ultishow[3]=['book300/page27.jpg', 'life/index.html', '', 'Page 27 A Quiet Moment 2008 11x14']
ultishow[4]=['book300/page29.jpg', 'life/index.html', '', 'Page 29 Dauphine 2007 11x15']
<!--ultishow[5]=['still/43SantaAnaVineyard.jpg', 'other/index.html', '', 'Santa Ana Vineyard New Year Card'] -->

//configure below 3 variables to set the dimension/background color of slideshow
var slidewidth="500px" //set to width of LARGEST image in slideshow
var slideheight="525px" //set to height of LARGEST iamge in slideshow
var slidecycles="3" //number of cycles before slideshow stops (ie: "2" or "continous")
var randomorder="yes" //randomize order in which images are displayed? "yes" or "no"
var preloadimages="yes" //preload images? "yes" or "no"
var slidebgcolor='transparent'
//configure below variable to determine delay between image rotations (in miliseconds)
var slidedelay=3000
var timer=null //for PAUSE

////Do not edit pass this line////////////////
var ie=document.all
var dom=document.getElementById
var curcycle=0

if (preloadimages=="yes"){
for (i=0;i<ultishow.length;i++){
var cacheimage=new Image()
cacheimage.src=ultishow[i][0]
}
}

var currentslide=0

function randomize(targetarray){
ultishowCopy=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!"){
ultishowCopy[z]=targetarray[the_one]
targetarray[the_one]="_selected!"
z++
}
}
}

if (randomorder=="yes")
randomize(ultishow)
else
ultishowCopy=ultishow

function rotateimages(){
curcycle=(currentslide==0)? curcycle+1 : curcycle
ultcontainer='<center>'

if (ultishowCopy[currentslide][1]!="")
ultcontainer+='<a href="'+ultishowCopy[currentslide][1]+'" target="'+ultishowCopy[currentslide][2]+'">'
ultcontainer+='<img src="'+ultishowCopy[currentslide][0]+'" border="0" onmouseover="clearTimeout(timer)" onmouseout="rotateimages()">' //timer for PAUSE>'
if (ultishowCopy[currentslide][1]!="")
ultcontainer+='</a>'

if(ultishowCopy[currentslide][3]){
ultcontainer+='<p>'+ultishowCopy[currentslide][3]+'</p>'
}/*see August08 forum http://www.codingforums.com/showthread.php?t=143543 */

ultcontainer+='</center>'

if (ie||dom)
crossrotateobj.innerHTML=ultcontainer
if (currentslide==ultishow.length-1) currentslide=0
else currentslide++
if (curcycle==parseInt(slidecycles) && currentslide==0)
return
timer=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

auntnini
06-23-2011, 01:43 AM
I think you query should go under "DD Scripts
-- Dynamic Drive scripts help"

llllllllll00
06-30-2011, 12:42 AM
thanks. I learned a lot to your post.