PDA

View Full Version : JavaScript Slide show



hebisr
Dec 2nd, 2002, 04:42 PM
hi there i was on CNN and came cross this javascript application (slide show).

See link http://www.cnn.com/
look at the main story > then select (interactive) = slide show should appear.



I am creating a site with several images and would like to create a timeline/slideshow similar to this this one.


Does anyone know where i can find such a source code?

any help would be greatly appreciated:


:o

Steven_Smith
Dec 2nd, 2002, 05:02 PM
HI. I couldn' t find the slide show at CNN, but try this link

http://sitelevel.whatUseek.com/query.go?crid=0c521e0c5dfcffa3&query=slideshow&slice_title=&page=&domain=&exclude=&autocustomize=

lots of slide shows

also

http://www.dynamicdrive.com

Steve

Mr J
Dec 2nd, 2002, 07:00 PM
Here's a simple one .... change the pics for your own




<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<SCRIPT language="javascript">
<!--
// Realised by Apachejeff
//www.huntingground.freeserve.co.uk
contents=new Array()
contents[contents.length]=new Array("epic1.jpg","http://www.dynamicdrive.com")
contents[contents.length]=new Array("epic2.jpg","http://wsabstract.com")
contents[contents.length]=new Array("epic3.jpg","http://www.geocities.com")
contents[contents.length]=new Array("epic4.jpg","0")
contents[contents.length]=new Array("epic5.jpg","0")
contents[contents.length]=new Array("epic6.jpg","0")
contents[contents.length]=new Array("epic7.jpg","0")

var preloadpics=new Array() // preloads images
for (i=0;i<=contents.length-1;i++) {
preloadpics[i]=new Image()
preloadpics[i].src=contents[i][0]
}

newTrans=new Array()
newTrans[newTrans.length] = "progid:DXImageTransform.Microsoft.Slide(bands = 1, slideStyle = 'push')";

var tranSpeed = 1.0; // how long transition takes in seconds
var pause = 2000 // in milliseconds
var advance = (tranSpeed*1000)+pause //
var i=0
var picnum=1
var loc=picnum-1

function RunMe(){
divA.style.filter = newTrans[i];
divA.filters[0].apply();
divA.innerHTML = "<img src='"+contents[picnum][0]+"'width='"+document.all.divA.style.width+"'height='"+document.all.divA.style.height+"'>"
divA.filters[0].play(tranSpeed);

loc=picnum

if(i==newTrans.length-1){
i=-1}

if(picnum==contents.length-1){
picnum=-1}

i++
picnum++
setTimeout("RunMe()",advance)
}

function where(){
if(contents[loc][1]==0){return}
doc=contents[loc][1]
window.open(doc) // comment out if using the line below
//window.open(doc,'','left=200,top=200,width=200,height=200') // use for specific size and positioned window
}
setTimeout("RunMe()",(tranSpeed*1000)+pause)
// -->
</SCRIPT>
</HEAD>
<BODY>

<DIV id=divA style="position:absolute; left:200; top:100; width:100; height:100; font-size:35; text-align:center; filter(); border:5 inset blue;cursor:hand" onclick="where()"><img src="epic1.gif" width=100 height=100></DIV>

</BODY>
</HTML>

valeria_vi
Dec 2nd, 2002, 09:08 PM
go to http://www.chalcedony.com/javascript/scripts/index.html and look through chapter3: fun with images