Browse > Home / Culture + Community / CC WEEK 6

CC WEEK 6

Week 6: Web programming: Interactive slideshow

10 minutes: Brief imaging review regarding how to optimize images for web slideshows, 72 dpi, web-safe formats (JPG, PNG, GIF), and how to resize (generally under 600 x 600 pixels for viewing).

45 minutes: Slideshow tutorial in JavaScript. Download materials HERE.  View link to demo SLIDESHOW.  See code below:

<head>
<script language=”JavaScript” type=”text/JavaScript”>

thisImg = 1
imgCt = 6

function newSlide(direction) {
if (document.images) {
thisImg = thisImg + direction
if (thisImg < 1) {
thisImg=imgCt
}
if (thisImg > imgCt) {
thisImg = 1
}
document.slider.src = “slide_images/slide”+ thisImg + “.jpg”
}
}

</script>
</head>

 At left is a sample
JavaScript function
that provides the
capability to have
a user drive a
slideshow by
clicking the
forward button or
the backward
button.

Download the
Class 6 materials
folder to try this out and
see if you can
make it work in
one of your own
web pages.

30 minutes: Review/individual help with FTP, check to make sure each student has online materials for his/her website

Optional demo: Use Keynote or iPhoto to export a Quicktime movie that is a slideshow of images. Click for instructions.

Optional demo: Look at a free plugin for privately hosted wordpress blogs that enables easy image slide-shows: http://www.featuredcontentgallery.com/

>Sketch 6

1) Add a page to your website that introduces an interactive JavaScript slideshow of artwork that you have made in other SAIC classes.  (If time remains instructor may demo other JavaScript methods)

2) Upload a post to your blog that tells readers about your online slideshow and points to your SAIC HTML site.
>Reading

Webmonkey’s Javascript slideshow
http://www.webmonkey.com/webmonkey/03/18/index3a.html?tw=programming