Results 1 to 5 of 5

Thread: simplest slideshow

  1. #1
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    262
    Thanks
    42
    Thanked 24 Times in 24 Posts

    Default simplest slideshow

    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.

  2. #2
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    262
    Thanks
    42
    Thanked 24 Times in 24 Posts

    Default

    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>

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. The Following User Says Thank You to jscheuer1 For This Useful Post:

    auntnini (05-05-2015)

  5. #4
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    262
    Thanks
    42
    Thanked 24 Times in 24 Posts

    Default

    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?

  6. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Conveyor belt slideshow photos are visible outside the slideshow area.
    By chrissie in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 12-07-2012, 04:43 PM
  2. Replies: 2
    Last Post: 12-17-2010, 05:02 PM
  3. Ultimate Fade-in slideshow - need click event to restart slideshow
    By Webster in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 06-10-2010, 05:33 AM
  4. Combine Conveyor Belt Slideshow and Swiss Army Slideshow#3
    By germane in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 12-03-2009, 03:36 AM
  5. Replies: 5
    Last Post: 06-27-2006, 09:51 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •