Call me!
cell: 612-730-9540

JavaScript Carousel

Project Fall 2013:

Build a JavaScript carousel

Originally I started this as a part of my Dakota County Technical College class - Introduction to JavaScript, Lesson 7, Building a Picture Carousel. The images below are a sample of my paintings from the last two years.

The Code Reveal:

First: The HTML


<div class="carousel">
    <img src="myArt01.jpg" alt="Homage to Chuck Close, 18in x 24in, Fall 2013" id="bigpic">
    <div class="thumbs clearfix">
        <img src="LeftArrow.png" alt="Previous" onclick="calcslide(-1)" >
        <img src="myArt01.jpg" id="myArt01" alt="Homage to Chuck Close, 18in x 24in, Fall 2013" onclick="showbig(this.src);altText()">
        <img src="myArt02.jpg" id="myArt02" alt="Homage to Willem Dekooning, 18in x 24in, Summer 2013" onclick="showbig(this.src);altText()">
        <img src="myArt03.jpg" id="myArt03" alt="Blue Abstract, 18in x 24in, Spring 2013" onclick="showbig(this.src);altText()">
        <img src="myArt04.jpg" id="myArt04" alt="Orange, 18in x 24in, Fall 2012" onclick="showbig(this.src);altText()">
        <img src="myArt05.jpg" id="myArt05" alt="September 26, 18in x 24in, Fall 2013" onclick="showbig(this.src);altText()">
        <img src="RightArrow.png" alt="Next" onclick="calcslide(1)">
    </div>
    <p><strong>Title: </strong>
    <script>
        function altText() {
            document.bigpic.alt='Homage to Willem Dekooning, 18in x 24in, Summer 2013';
        }
        var alt = document.getElementById("bigpic").alt;
        document.write(alt);
    </script>
    </p>
</div>

Right-click the images as they come up in my slider to download them to whatever folder you want them on you desktop.

Next: The Script


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
	var maximages = 5;
	var startpath = "myArt"
	var extension = ".jpg"
	function calcslide(x) {
		var currentimage = document.getElementById("bigpic").src;
		var dotat = currentimage.indexOf(extension);
		var stringnumber = currentimage.substr(dotat - 2, 2);
		var nextnum = parseInt(stringnumber) + x;
		if (nextnum < 1) {
		nextnum = maximages;
	}
	if (nextnum > maximages) {
		nextnum = 1;
	}
	var twodigitnum = ("0" + nextnum).slice(-2);
	var showimg = startpath + twodigitnum +extension;
	showbig(showimg);
	}
	function showbig(pic) {
		document.getElementById("bigpic").src = pic;
	}
</script>

Place the script inbetween the <head> </head> tags.

Lastly: The CSS


/* start javascript-carousel */
.carousel { text-align: center; }
    #bigpic { background-color: white; border-color: black; border-style: double; display: inline-block; padding: 16px; }
    .thumbs { padding: 15px 0; }
        .thumbs img { display: inline; width: 10%; cursor: pointer; }
/* end javascript-carousel */

(The Title is supposed to dynamically change by pulling in the image alt value. Haven't figured it out yet and I don't want to use a javascript array.)

(Also, the images in the navigational element below the larger image become very small in smartphones. The navigational arrows help but the touch area becomes too small to be accessible. The solution for this problem is being put on the back burner though.)

Contact me

If you would like to speak with me more about my qualifications, experiences and what I can do for you please feel free to contact me.