Allt Beag is a stone-built, Victorian house in the beautiful coastal village of Tighnabruaich, Argyll & Bute.
The house was purchased by Adrian and his family in late 2005 and substantially renovated in the months that followed. The website itself dates from around 2009, when attempts were made to rent out Allt Beag for holiday lets, following the purchase of Ascog Farm on the Isle of Bute the previous year.
Adrian was always particularly pleased with the image shuffling array on the Allt Beag website, enabled with the following code.
<!--- serve the right image for the section --->
<cfif listcontains("house,interior,garden,sea,surround", section, ",") is 0>
<!--- choose a section at random --->
<cfset section_number = randrange(1,4)>
<cfset section = listgetat("house,interior,garden,sea,surround", section_number, ",")>
<cfelse>
<!--- we are fine --->
</cfif>
<!--- shuffle the order of the images --->
<!--- FROM http://www.bennadel.com/blog/280-Randomly-Sort-A-ColdFusion-Array-Updated-Thanks-Mark-Mandel.htm --->
<cfset arrayImageNumbers = ListToArray(
"001,002,003,004,005,006,007,008"
) />
<!--- Shuffle it (ie. randomly sort it). --->
<cfset CreateObject(
"java",
"java.util.Collections"
).Shuffle(
arrayImageNumbers
) />
<!--- <cfoutput>#arraytolist(arrayImageNumbers)#</cfoutput><br /><br /> --->
<!--- output the images --->
<cfoutput>
<div id="leftcolumn">
<div class="innertube">
<!--- images in the golden rectangle configuration with mouseovers --->
<IMG STYLE="position:absolute; TOP: 0px; LEFT: 0px; WIDTH:450px; HEIGHT:450px" SRC="images/#section#_#arrayImageNumbers[1]#_a.jpg" NAME="image_a">
<IMG STYLE="position:absolute; TOP:450px; LEFT: 0px; WIDTH:278px; HEIGHT:278px" SRC="images/#section#_#arrayImageNumbers[2]#_a.jpg" NAME="image_b" onMouseOver="document.image_a.src='images/#section#_#arrayImageNumbers[2]#_a.jpg';document.image_b.src='images/#section#_#arrayImageNumbers[1]#_b.jpg';" onMouseOut="document.image_a.src='images/#section#_#arrayImageNumbers[1]#_a.jpg';document.image_b.src='images/#section#_#arrayImageNumbers[2]#_b.jpg';">
<IMG STYLE="position:absolute; TOP:556px; LEFT:278px; WIDTH:172px; HEIGHT:172px" SRC="images/#section#_#arrayImageNumbers[3]#_a.jpg" NAME="image_c" onMouseOver="document.image_a.src='images/#section#_#arrayImageNumbers[3]#_a.jpg';document.image_c.src='images/#section#_#arrayImageNumbers[1]#_c.jpg';" onMouseOut="document.image_a.src='images/#section#_#arrayImageNumbers[1]#_a.jpg';document.image_c.src='images/#section#_#arrayImageNumbers[3]#_c.jpg';">
<IMG STYLE="position:absolute; TOP:450px; LEFT:344px; WIDTH:106px; HEIGHT:106px" SRC="images/#section#_#arrayImageNumbers[4]#_a.jpg" NAME="image_d" onMouseOver="document.image_a.src='images/#section#_#arrayImageNumbers[4]#_a.jpg';document.image_d.src='images/#section#_#arrayImageNumbers[1]#_d.jpg';" onMouseOut="document.image_a.src='images/#section#_#arrayImageNumbers[1]#_a.jpg';document.image_d.src='images/#section#_#arrayImageNumbers[4]#_d.jpg';">
<IMG STYLE="position:absolute; TOP:450px; LEFT:278px; WIDTH: 66px; HEIGHT: 66px" SRC="images/#section#_#arrayImageNumbers[5]#_a.jpg" NAME="image_e" onMouseOver="document.image_a.src='images/#section#_#arrayImageNumbers[5]#_a.jpg';document.image_e.src='images/#section#_#arrayImageNumbers[1]#_e.jpg';" onMouseOut="document.image_a.src='images/#section#_#arrayImageNumbers[1]#_a.jpg';document.image_e.src='images/#section#_#arrayImageNumbers[5]#_e.jpg';">
<IMG STYLE="position:absolute; TOP:516px; LEFT:278px; WIDTH: 40px; HEIGHT: 40px" SRC="images/#section#_#arrayImageNumbers[6]#_a.jpg" NAME="image_f" onMouseOver="document.image_a.src='images/#section#_#arrayImageNumbers[6]#_a.jpg';document.image_f.src='images/#section#_#arrayImageNumbers[1]#_f.jpg';" onMouseOut="document.image_a.src='images/#section#_#arrayImageNumbers[1]#_a.jpg';document.image_f.src='images/#section#_#arrayImageNumbers[6]#_f.jpg';">
<IMG STYLE="position:absolute; TOP:516px; LEFT:318px; WIDTH: 26px; HEIGHT: 26px" SRC="images/#section#_#arrayImageNumbers[7]#_a.jpg" NAME="image_g" onMouseOver="document.image_a.src='images/#section#_#arrayImageNumbers[7]#_a.jpg';document.image_g.src='images/#section#_#arrayImageNumbers[1]#_g.jpg';" onMouseOut="document.image_a.src='images/#section#_#arrayImageNumbers[1]#_a.jpg';document.image_g.src='images/#section#_#arrayImageNumbers[7]#_g.jpg';">
<IMG STYLE="position:absolute; TOP:542px; LEFT:318px; WIDTH: 14px; HEIGHT: 14px" SRC="images/#section#_#arrayImageNumbers[8]#_a.jpg" NAME="image_h" onMouseOver="document.image_a.src='images/#section#_#arrayImageNumbers[8]#_a.jpg';document.image_h.src='images/#section#_#arrayImageNumbers[1]#_h.jpg';" onMouseOut="document.image_a.src='images/#section#_#arrayImageNumbers[1]#_a.jpg';document.image_h.src='images/#section#_#arrayImageNumbers[8]#_h.jpg';">
<!--- tiny image in centre for contact info --->
<IMG STYLE="position:absolute; TOP:542px; LEFT:332px; WIDTH: 12px; HEIGHT: 14px" SRC="images/allt_beag_tiny.jpg" NAME="image_i" ALT="information" onMouseOver="document.image_a.src='images/allt_beag_main.jpg';document.image_i.src='images/allt_beag_tiny.jpg';" onMouseOut="document.image_a.src='images/#section#_#arrayImageNumbers[1]#_a.jpg';document.image_i.src='images/allt_beag_tiny.jpg';">
</div>
</div>
</cfoutput>
Although written in ColdFusion this logic could easily be adapted to PHP or many other programming languages. A simple macro for Adobe Photoshop was used to resize square images into the many different pixel dimensions used to fill the image matrix.
Allt Beag was eventually sold in late 2009 and, while the house still stands, it seems to have changed a lot recently. Another dwelling has been built in the gardens and a new conservatory put up.
Whether the old place is available for holiday lets any more is unknown but Tighnabruaich is a beautiful place to visit.
Get there if you can…