I need a very SIMPLE slideshow for a beginner HTML/CSS student. Not sure if a JavaScript would be simpler than CSS, but this is for a very beginner so the simplest the best. Just need to show a few images on student's home page.
Printable View
I need a very SIMPLE slideshow for a beginner HTML/CSS student. Not sure if a JavaScript would be simpler than CSS, but this is for a very beginner so the simplest the best. Just need to show a few images on student's home page.
Found this old JS script, but not sure how to clean it up? Not sure if this is SIMPLEST?
Code:<script type="text/javascript" language="javascript">
<!-- <![CDATA[
function showPic (whichpic) {
if (document.getElementById) {
document.getElementById('picHolder').src = whichpic.href;
if (whichpic.title) {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
} else {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}
return false;
} else {
return true;
}
}
// ]]> -->
</script><!--in body <a onclick="return showPic(this)" href="summer06/carolineRed.gif" title="Quick charcoal sketches summer'06">carolineRed animated gif</a> -->
<!-- BEGIN Content from FIT-->
<script language="Javascript">
<!--
contentWidth = getInsideWindowWidth() - widthMargin;
contentHeight = getInsideWindowHeight() - heightMargin;
mainWidth = contentWidth - contentWidthMargin;
mainHeight = contentHeight - contentHeightMargin;
document.write('<div width="'+contentWidth+'">');
//document.close();
//-->
</script>
<script type="text/javascript" language="javascript">
<!-- <![CDATA[
// K.Neely's continuous SLIDE SHOW CG215
var myPix = new Array()
myPix[0]="f_00.gif";
myPix[1]="../chanit/things/AnemonaesWC.jpg";
myPix[2]="../chanit/things/burningCandle.jpg";
myPix[3]="../chanit/things/cosmicAnemones.jpg";
myPix[4]="../chanit/things/floralApples.jpg";
myPix[5]="../chanit/things/floralRecycle.jpg";
myPix[6]="../chanit/things/floristDozen.jpg";
myPix[7]="../chanit/things/lilac.jpg";
myPix[8]="../chanit/things/moreAnemonaes.jpg";
myPix[9]="../chanit/things/Neighbors.jpg";
myPix[10]="../chanit/things/Parsimon.jpg";
myPix[11]="../chanit/things/peoniesOil.jpg";
myPix[12]="../chanit/things/primaryColors.jpg";
myPix[13]="../chanit/things/purpleArrange.jpg";
myPix[14]="../chanit/things/romance.jpg";
myPix[15]="../chanit/things/roseOnYellow.jpg";
myPix[16]="../chanit/things/whiteRose.jpg";
myPix[17]="../chanit/things/youngOldAnamonae.jpg";
thisPic = 0;
imgCt = myPix.length -1 ;
function chgSlide(direction) {
if (document.images) {
thisPic = thisPic + direction ;
if (thisPic > imgCt) {
thisPic= 0 ;
}
if (thisPic < 0) {
thisPic = imgCt
}
document.picHolder.src = myPix[thisPic] ;
} // end if document.images
}
// ]]> -->
</script>
Doesn't get much simpler than this:
Code:<!DOCTYPE html>
<html>
<head>
<title>Simple Slideshow</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#slideshow { /* set to dimensions of the images - best for images all of the same dimensions */
width: 140px;
height: 225px;
}
#slideshow img {
display: block;
position: absolute;
}
</style>
</head>
<body>
<div id="slideshow">
<img src="photo1.jpg" alt="original image" title="">
<img src="photo2.jpg" alt="original image" title="">
<img src="photo3.jpg" alt="original image" title="">
<img src="photo4.jpg" alt="original image" title="">
</div>
<script type="text/javascript">
var ssdiv = document.getElementById('slideshow');
var howlong = 3000;
function rotateimages(){
ssdiv.appendChild(ssdiv.getElementsByTagName('img')[0]);
setTimeout(rotateimages, howlong);
}
rotateimages();
</script>
</body>
</html>
Thanks a million. My "tutees" should be able to handle this script. I imagine it does not have to be position:absolute;?? Or does it?
The slideshow div itself isn't positioned at all but can be. The position absolute in the style section which merely positions the images within the slideshow div absolutely, that style must remain.