/* Scrolling Image ScriptLance project 1182184589 Matt McMinn matt.mcminn@gmail.com 6/22/07 Version 1.0 This JS file provides functions for displaying a scrollable image set. */ /** Sets the number of images to display at a time. */ var NUM_DISPLAYED_IMAGES = 5; /** Sets the width of the table cells containing the image. */ var CELL_WIDTH=77; /** Sets the width and height of the image. */ var IMG_WIDTH=75; var IMG_HEIGHT=70; /** Defines the code used to begin the table, through the close of the first 'tr' tag. */ var TABLE_HEADER = ""; /** Defines the code used to end the table and the 'tr' tag. */ var TABLE_FOOTER = "
"; /** Defines the ID of the div tag to place the scrolling table in. */ var TABLE_DIV = "scrollImgDiv"; /** Provides a default object, which is used if a picture can't be retrieved from the 'images' array for some reason. */ var DEFAULT_IMG_OBJECT = new ImageObj("/images/inspiration/cleveland.jpg", "http://www.youtube.com/watch?v=ysmLA5TqbIY", "Cleveland Tourism", "http://www.youtube.com/watch?v=ysmLA5TqbIY", "Cleveland", "http://www.youtube.com/watch?v=ysmLA5TqbIY"); /** The array that stores the image objects. The size of the array should be set to the number of images that are in the image set. When defining images, note that the array is 0 based: the first image object should have an index of 0, and the last should have an index of (number of images in the set - 1). */ var images = new Array(7); /** To define an image, simply create a new ImageObj, and pass it - the url of the image to use - the url that the image should link to - the text of the first line - the url the first line should link to - the text of the second line - the url the second line should link to */ images[0] = new ImageObj("/images/inspiration/conflict.jpg", "http://www.kubidehkitchen.com/", "conflict kitchen", "http://www.kubidehkitchen.com/", "Pittsburg", "http://www.kubidehkitchen.com/"); images[1] = new ImageObj("/images/inspiration/bowen.jpg", "http://www.designboom.com/weblog/cat/10/view/10560/david-bowen-tele-present-wind.html", "tele-present", "http://www.designboom.com/weblog/cat/10/view/10560/david-bowen-tele-present-wind.html", "Minneapolis", "http://www.designboom.com/weblog/cat/10/view/10560/david-bowen-tele-present-wind.html"); images[2] = new ImageObj("/images/inspiration/1bit.jpg", "http://www.designboom.com/weblog/cat/16/view/10654/tristan-perich-1-bit-symphony.html", "1-bit symphony", "http://www.designboom.com/weblog/cat/16/view/10654/tristan-perich-1-bit-symphony.html", "New York", "http://www.designboom.com/weblog/cat/16/view/10654/tristan-perich-1-bit-symphony.html"); images[3] = new ImageObj("/images/inspiration/crowds.jpg", "http://mocoloco.com/archives/017160.php", "alone in a crowd", "http://mocoloco.com/archives/017160.php", "Basel", "http://mocoloco.com/archives/017160.php"); images[4] = new ImageObj("/images/inspiration/tape.jpg", "http://www.designboom.com/weblog/cat/8/view/10593/dmy-2010-award-winner-forusenumen.html", "tape sculpture", "http://www.designboom.com/weblog/cat/8/view/10593/dmy-2010-award-winner-forusenumen.html", "Berlin", "http://www.designboom.com/weblog/cat/8/view/10593/dmy-2010-award-winner-forusenumen.html"); images[5] = new ImageObj("/images/inspiration/signals.jpg", "http://www.designboom.com/weblog/cat/10/view/10522/daniel-schulze-for-those-who-see.html", "smoke signals", "http://www.designboom.com/weblog/cat/10/view/10522/daniel-schulze-for-those-who-see.html", "Berlin", "http://www.designboom.com/weblog/cat/10/view/10522/daniel-schulze-for-those-who-see.html"); images[6] = new ImageObj("/images/inspiration/evacuate.jpg", "http://myloveforyou.typepad.com/my_love_for_you/2010/05/evacuate-kate-mccgwire.html", "evacuate", "http://myloveforyou.typepad.com/my_love_for_you/2010/05/evacuate-kate-mccgwire.html", "England", "http://myloveforyou.typepad.com/my_love_for_you/2010/05/evacuate-kate-mccgwire.html"); images[7] = new ImageObj("/images/inspiration/pancakes.jpg", "http://www.jimspancakes.com/", "3D Pancakes", "http://www.jimspancakes.com/", "Berlin", "http://www.jimspancakes.com/"); images[8] = new ImageObj("/images/inspiration/damaged.jpg", "http://myloveforyou.typepad.com/my_love_for_you/2010/04/thomas-doyle-collateral-damage.html", "damaged", "http://myloveforyou.typepad.com/my_love_for_you/2010/04/thomas-doyle-collateral-damage.html", "LA", "http://myloveforyou.typepad.com/my_love_for_you/2010/04/thomas-doyle-collateral-damage.html"); images[9] = new ImageObj("/images/inspiration/graffomat.jpg", "http://www.juicedmagazine.com/2010/04/22/graffomat-2/", "Graffomat", "http://www.juicedmagazine.com/2010/04/22/graffomat-2/", "Columbia", "http://www.juicedmagazine.com/2010/04/22/graffomat-2/"); images[10] = new ImageObj("/images/inspiration/wages.jpg", "http://blackyogurt.org/2010/04/08/minimum-wage-machine-makes-you-work/", "wages", "http://blackyogurt.org/2010/04/08/minimum-wage-machine-makes-you-work/", "New York", "http://blackyogurt.org/2010/04/08/minimum-wage-machine-makes-you-work/"); images[11] = new ImageObj("/images/inspiration/seedbomb.jpg", "http://thecommonstudio.com/index.php?/project/greenaid/", "Seed Bombs", "http://thecommonstudio.com/index.php?/project/greenaid/", "Los Angeles", "http://thecommonstudio.com/index.php?/project/greenaid/"); images[12] = new ImageObj("/images/inspiration/chickentikka.jpg", "http://www.woostercollective.com/2010/03/fresh_stuff_from_slinkachu_chicken_tikka.html", "Chicken Tikka", "http://www.woostercollective.com/2010/03/fresh_stuff_from_slinkachu_chicken_tikka.html", "London", "http://www.woostercollective.com/2010/03/fresh_stuff_from_slinkachu_chicken_tikka.html"); images[13] = new ImageObj("/images/inspiration/toiletjapan.jpg", "http://www.abitare.it/highlights/absolute-arrows/", "Public Toilet", "http://www.abitare.it/highlights/absolute-arrows/", "Hiroshima", "http://www.abitare.it/highlights/absolute-arrows/"); images[14] = new ImageObj("/images/inspiration/robotdrummers.jpg", "http://www.popsci.com/technology/article/2010-02/wiimote-controlled-robot-drum-circle-makes-human-hippies-obsolete", "Robot Drummers", "http://www.popsci.com/technology/article/2010-02/wiimote-controlled-robot-drum-circle-makes-human-hippies-obsolete", "Berkley", "http://www.popsci.com/technology/article/2010-02/wiimote-controlled-robot-drum-circle-makes-human-hippies-obsolete"); images[15] = new ImageObj("/images/inspiration/minigolf.jpg", "http://mocoloco.com/archives/014549.php", "Mini Golf", "http://mocoloco.com/archives/014549.php", "Milan", "http://mocoloco.com/archives/014549.php"); images[16] = new ImageObj("/images/inspiration/birdmusic.jpg", "http://www.geekologie.com/2010/02/theyre_so_talented_little_bird.php", "Bird Music", "http://www.geekologie.com/2010/02/theyre_so_talented_little_bird.php", "France", "http://www.geekologie.com/2010/02/theyre_so_talented_little_bird.php"); images[17] = new ImageObj("/images/inspiration/fishmarket.jpg", "http://www.designboom.com/weblog/cat/9/view/9028/gad-besiktas-fish-market-istanbul.html", "Fish Market", "http://www.designboom.com/weblog/cat/9/view/9028/gad-besiktas-fish-market-istanbul.html", "Istanbul", "http://www.designboom.com/weblog/cat/9/view/9028/gad-besiktas-fish-market-istanbul.html"); images[18] = new ImageObj("/images/inspiration/skilodge.jpg", "http://www.designboom.com/weblog/cat/8/view/8820/stone-designs-el-portillo-cabin.html", "Ski Lodge", "http://www.designboom.com/weblog/cat/8/view/8820/stone-designs-el-portillo-cabin.html", "Spain", "http://www.designboom.com/weblog/cat/8/view/8820/stone-designs-el-portillo-cabin.html"); images[19] = new ImageObj("/images/inspiration/garbagemusic.jpg", "http://www.woostercollective.com/2010/01/shit_were_diggin_david_ellis_and_roberto.html", "Garbage Music", "http://www.woostercollective.com/2010/01/shit_were_diggin_david_ellis_and_roberto.html", "Charlottesville", "http://www.woostercollective.com/2010/01/shit_were_diggin_david_ellis_and_roberto.html"); images[20] = new ImageObj("/images/inspiration/calatravawine.jpg", "http://www.elastika.org/2010/01/bodega-ysios/", "Calatrava", "http://www.elastika.org/2010/01/bodega-ysios/", "Spain", "http://www.elastika.org/2010/01/bodega-ysios/"); images[21] = new ImageObj("/images/inspiration/okgo.jpg", "http://www.youtube.com/watch?v=UJKythlXAIY", "OK Go", "http://www.youtube.com/watch?v=UJKythlXAIY", "Chicago", "http://www.youtube.com/watch?v=UJKythlXAIY"); images[22] = new ImageObj("/images/inspiration/stringgarden.jpg", "http://www.stringgardens.com/index.php", "String Garden", "http://www.stringgardens.com/index.php", "Belgium", "http://www.stringgardens.com/index.php"); images[23] = new ImageObj("/images/inspiration/furniture.jpg", "http://www.designboom.com/weblog/cat/9/view/8677/rocker-lange-architects-urban-adapter.html", "urban adapter", "http://www.designboom.com/weblog/cat/9/view/8677/rocker-lange-architects-urban-adapter.html", "Hong Kong", "http://www.designboom.com/weblog/cat/9/view/8677/rocker-lange-architects-urban-adapter.html"); images[24] = new ImageObj("/images/inspiration/kidstepee.jpg", "http://www.archdaily.com/43809/fireplace-for-children-haugenzohar-arkitekter/", "Fireplace", "http://www.archdaily.com/43809/fireplace-for-children-haugenzohar-arkitekter/", "Norway", "http://www.archdaily.com/43809/fireplace-for-children-haugenzohar-arkitekter/"); images[25] = new ImageObj("/images/inspiration/gorillagardener.jpg", "http://www.archdaily.com/43809/fireplace-for-children-haugenzohar-arkitekter/", "Gardener", "http://www.archdaily.com/43809/fireplace-for-children-haugenzohar-arkitekter/", "Canada", "http://www.archdaily.com/43809/fireplace-for-children-haugenzohar-arkitekter/"); images[26] = new ImageObj("/images/inspiration/bodies.jpg", "http://www.youtube.com/watch?v=z-eBvR-YwY0", "Urban Bodies", "http://www.youtube.com/watch?v=z-eBvR-YwY0", "Philadelphia", "http://www.youtube.com/watch?v=z-eBvR-YwY0"); images[27] = new ImageObj("/images/inspiration/mcgrath.jpg", "http://www.booooooom.com/2009/12/09/sculptures-by-artist-elizabeth-mcgrath/", "Liz McGrath", "http://www.booooooom.com/2009/12/09/sculptures-by-artist-elizabeth-mcgrath/", "Los Angeles", "http://www.booooooom.com/2009/12/09/sculptures-by-artist-elizabeth-mcgrath/"); images[28] = new ImageObj("/images/inspiration/lulamae.jpg", "http://www.homelife.com.au/blogs/insideout/article/lulamae-breathe/", "Lulamae", "http://www.homelife.com.au/blogs/insideout/article/lulamae-breathe/", "Melbourne", "http://www.homelife.com.au/blogs/insideout/article/lulamae-breathe/"); images[29] = new ImageObj("/images/inspiration/genexis.jpg", "http://www.designboom.com/weblog/cat/9/view/8361/genexis-theater-fusionopolis-by-arupwoha.html", "genexis", "http://www.designboom.com/weblog/cat/9/view/8361/genexis-theater-fusionopolis-by-arupwoha.html", "Singapore", "http://www.designboom.com/weblog/cat/9/view/8361/genexis-theater-fusionopolis-by-arupwoha.html"); images[30] = new ImageObj("/images/inspiration/zimoun.jpg", "http://vimeo.com/7235817", "Sculpt Sound", "http://vimeo.com/7235817", "Switzerland", "http://vimeo.com/7235817"); images[31] = new ImageObj("/images/inspiration/kimm.jpg", "http://www.archdaily.com/39375/graduate-aerospace-laboratories-john-friedman-alice-kimm-architects/", "Laboratories", "http://www.archdaily.com/39375/graduate-aerospace-laboratories-john-friedman-alice-kimm-architects/", "Pasadena", "http://www.archdaily.com/39375/graduate-aerospace-laboratories-john-friedman-alice-kimm-architects/"); images[32] = new ImageObj("/images/inspiration/allen.jpg", "http://www.youtube.com/watch?v=PH6xCT2aTSo", "Bag Monsters", "http://www.youtube.com/watch?v=PH6xCT2aTSo", "New York", "http://www.youtube.com/watch?v=PH6xCT2aTSo"); images[33] = new ImageObj("/images/inspiration/flies.jpg", "http://www.youtube.com/watch?v=ldC7FQiUJ6s&feature=player_embedded", "Fly Ad Men", "http://www.youtube.com/watch?v=ldC7FQiUJ6s&feature=player_embedded", "Frankfurt", "http://www.youtube.com/watch?v=ldC7FQiUJ6s&feature=player_embedded"); images[34] = new ImageObj("/images/inspiration/institute.jpg", "http://www.designboom.com/weblog/cat/9/view/7989/peddle-thorp-architects-fluid-amphibian-pavilion.html", "Amphibian", "http://www.designboom.com/weblog/cat/9/view/7989/peddle-thorp-architects-fluid-amphibian-pavilion.html", "Korea", "http://www.designboom.com/weblog/cat/9/view/7989/peddle-thorp-architects-fluid-amphibian-pavilion.html"); images[35] = new ImageObj("/images/inspiration/storyteller.jpg", "http://storyteller.allesblinkt.com/", "Storyteller", "http://storyteller.allesblinkt.com/", "Berlin", "http://storyteller.allesblinkt.com/"); images[36] = new ImageObj("/images/inspiration/tones.jpg", "http://www.designboom.com/weblog/cat/10/view/7930/joshua-kirsch-sympathetic-resonance.html", "Resonance", "http://www.designboom.com/weblog/cat/10/view/7930/joshua-kirsch-sympathetic-resonance.html", "New Jersey", "http://www.designboom.com/weblog/cat/10/view/7930/joshua-kirsch-sympathetic-resonance.html"); images[37] = new ImageObj("/images/inspiration/garage.jpg", "http://ow.ly/panV", "Erik Inkala", "http://ow.ly/panV", "Minneapolis", "http://ow.ly/panV"); images[38] = new ImageObj("/images/inspiration/murakami.jpg", "http://ow.ly/panA", "Murakami Rug", "http://ow.ly/panA", "India", "http://ow.ly/panA"); images[39] = new ImageObj("/images/inspiration/xylophone.jpg", "http://ow.ly/ptpn", "Xylophone Can", "http://ow.ly/ptpn", "UK", "http://ow.ly/ptpn"); images[40] = new ImageObj("/images/inspiration/vinyard.jpg", "http://www.designboom.com/weblog/cat/9/view/7592/diamond-schmitt-architects-southbrook-vineyards.html", "Southbrook", "http://www.designboom.com/weblog/cat/9/view/7592/diamond-schmitt-architects-southbrook-vineyards.html", "Canada", "http://www.designboom.com/weblog/cat/9/view/7592/diamond-schmitt-architects-southbrook-vineyards.html"); images[41] = new ImageObj("/images/inspiration/teahouse.jpg", "http://ow.ly/oGin", "Tea House", "http://ow.ly/oGin", "Alabama", "http://ow.ly/oGin"); images[42] = new ImageObj("/images/inspiration/saipua.jpg", "http://thescoutmag.com/retail/floral/603/saipua", "Saipua", "http://thescoutmag.com/retail/floral/603/saipua", "Brooklyn", "http://thescoutmag.com/retail/floral/603/saipua"); images[43] = new ImageObj("/images/inspiration/jarmund.jpg", "http://www.designboom.com/weblog/cat/9/view/7255/jarmundvigsnaes-architecture-svalbard-science-centre.html", "Jarmund", "http://www.designboom.com/weblog/cat/9/view/7255/jarmundvigsnaes-architecture-svalbard-science-centre.html", "Norway", "http://www.designboom.com/weblog/cat/9/view/7255/jarmundvigsnaes-architecture-svalbard-science-centre.html"); images[44] = new ImageObj("/images/inspiration/faletstudio.jpg", "http://www.dailytonic.com/feeling-felt-architonics-selection/", "Felt Walls", "http://www.dailytonic.com/feeling-felt-architonics-selection/", "Los Angeles", "http://www.dailytonic.com/feeling-felt-architonics-selection/"); images[45] = new ImageObj("/images/inspiration/pianos.jpg", "http://www.nytimes.com/2009/07/11/arts/design/11pianos.html?_r=1&ref=design", "Random Pianos", "http://www.nytimes.com/2009/07/11/arts/design/11pianos.html?_r=1&ref=design", "London", "http://www.nytimes.com/2009/07/11/arts/design/11pianos.html?_r=1&ref=design"); images[46] = new ImageObj("/images/inspiration/dumpster.jpg", "http://www.inhabitat.com/2009/07/10/dive-into-a-dumpster-guerrilla-pool/shippingcontainerpools132", "Dumpster Pool", "http://www.inhabitat.com/2009/07/10/dive-into-a-dumpster-guerrilla-pool/shippingcontainerpools132", "Brooklyn", "http://www.inhabitat.com/2009/07/10/dive-into-a-dumpster-guerrilla-pool/shippingcontainerpools132/"); images[47] = new ImageObj("/images/inspiration/saijo.jpg", "http://www.yatzer.com/1773_primitive_living_in_saijo,_hiroshima", "M Tanijiri", "http://www.yatzer.com/1773_primitive_living_in_saijo,_hiroshima", "Hiroshima", "http://www.yatzer.com/1773_primitive_living_in_saijo,_hiroshima"); images[48] = new ImageObj("/images/inspiration/baupiloten.jpg", "http://www.designboom.com/weblog/cat/9/view/6756/die-baupiloten-erika-mann-elementary-school-ii.html", "Baupiloten", "http://www.designboom.com/weblog/cat/9/view/6756/die-baupiloten-erika-mann-elementary-school-ii.html", "Berlin", "http://www.designboom.com/weblog/cat/9/view/6756/die-baupiloten-erika-mann-elementary-school-ii.html"); images[49] = new ImageObj("/images/inspiration/highline-01.jpg", "http://gothamist.com/2009/06/08/ribbon_officially_cut_at_the_high_l.php?gallery0Pic=1#gallery", "the High Line", "http://gothamist.com/2009/06/08/ribbon_officially_cut_at_the_high_l.php?gallery0Pic=1#gallery", "New York", "http://gothamist.com/2009/06/08/ribbon_officially_cut_at_the_high_l.php?gallery0Pic=1#gallery"); images[50] = new ImageObj("/images/inspiration/muralsforlibraries-01.jpg", "http://pentagram.com/en/new/2009/03/murals-for-the-library-initiat.php", "Library Murals", "http://pentagram.com/en/new/2009/03/murals-for-the-library-initiat.php", "New York", "http://pentagram.com/en/new/2009/03/murals-for-the-library-initiat.php"); images[51] = new ImageObj("/images/inspiration/containerfood.jpg", "http://www.inhabitat.com/2009/06/12/muvbox-fast-food-shipping-container-restaurant/", "Container Food", "http://www.inhabitat.com/2009/06/12/muvbox-fast-food-shipping-container-restaurant/", "Montreal", "http://www.inhabitat.com/2009/06/12/muvbox-fast-food-shipping-container-restaurant/"); images[52] = new ImageObj("/images/inspiration/solarbirdhouse.jpg", "http://www.oooms.nl/solar-birdhouse/", "oooms", "http://www.oooms.nl/solar-birdhouse/", "Netherlands", "http://www.oooms.nl/solar-birdhouse/"); images[53] = new ImageObj("/images/inspiration/popupstore-01.jpg", "http://www.weheartstuff.co.uk/?p=706", "Pop-Up Stpre", "http://www.weheartstuff.co.uk/?p=706", "London", "http://www.weheartstuff.co.uk/?p=706"); images[54] = new ImageObj("/images/inspiration/museumlinz.jpg", "http://www.swiss-miss.com/2009/05/14737.html", "Ars Electronica", "http://www.swiss-miss.com/2009/05/14737.html", "Austria", "http://www.swiss-miss.com/2009/05/14737.html"); images[55] = new ImageObj("/images/inspiration/kkprojects.jpg", "http://invisiblered.blogspot.com/2009/04/kk-projects.html", "KK Projects", "http://invisiblered.blogspot.com/2009/04/kk-projects.html", "New Orleans", "http://invisiblered.blogspot.com/2009/04/kk-projects.html"); images[56] = new ImageObj("/images/inspiration/cleveland.jpg", "http://www.youtube.com/watch?v=ysmLA5TqbIY", "Tourism Vid", "http://www.youtube.com/watch?v=ysmLA5TqbIY", "Cleveland", "http://www.youtube.com/watch?v=ysmLA5TqbIY"); /** Global variable the stores the index of the first picture in the table. */ var imgIndex = 0; /** ImageObj class, which stores the data about a particular image in the data set. imgUrl - the url of the image to use imgLinkUrl - the url that the image should link to line1Text - the text of the first line line1Url - the url the first line should link to line2Text - the text of the second line line2Url - the url the second line should link to */ function ImageObj(imgUrl, imgLinkUrl, line1Text, line1Url, line2Text, line2Url) { this.imgUrl = imgUrl; this.imgLinkUrl = imgLinkUrl; this.line1Text = line1Text; this.line1Url = line1Url; this.line2Text = line2Text; this.line2Url = line2Url; } /** Builds the HTML for a single table cell. If things need to be changed in the HTML for a table cell (for example, the class of a line of text), this is the function to change it in. imageObj - the image object to use to build the table cell. returns an HTML string containing a 'td' tag, the image, two lines of text, and links for all of the above. */ function getTableCell(imageObj) { var html = ""; html += "
"; html += "" + imageObj.line1Text + "
"; html += "" + imageObj.line2Text + ""; return html; } /** Builds the image table, and sets the HTML in the web page, at the location of 'TABLE_DIV'. */ function refreshImages() { var imgHtml = TABLE_HEADER; for(var x = 0;x < NUM_DISPLAYED_IMAGES;x++) { var idx = x + imgIndex; if(idx < 0) idx = images.length + (idx % images.length); if(idx >= images.length) idx = idx % images.length; var imageObj = images[idx]; if(imageObj == null) imageObj = DEFAULT_IMG_OBJECT; imgHtml += getTableCell(imageObj); } imgHtml += TABLE_FOOTER; document.getElementById(TABLE_DIV).innerHTML = imgHtml; } /** Updates the image index, and calls 'refreshImages' to update the table. */ function scrollImgLeft() { imgIndex--; refreshImages(); } /** Updates the image index, and calls 'refreshImages' to update the table. */ function scrollImgRight() { imgIndex++; refreshImages(); }