Help
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Country House Occasions - weddings</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<link href="font_styles.css" rel="stylesheet" type="text/css" />
<meta name="Keywords" content="weddings, wedding venues, wedding organisation, wedding flowers, wedding catering, wedding photographers, wedding photography, catering, flowers, organisation, planning, accommodation, stress free wedding organisation" />
<meta name="description" content="Country House Occasions - stress free wedding organisation throughout the West Midlands" />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1535585-7']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<link href="layout3.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="thumbnailviewer2.js">
/***********************************************
* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
</head>
<body>
<div id="outer">
<div id="header"><img src="images/header_logo_strapline.jpg" alt="country house occasions logo" width="800" height="100" /></div>
<ul id="navigation">
<li><a href="index.html"index.html>home</a></li>
<li><a href="weddings.html">weddings</a></li>
<li ><a href="food_for_thought.html">food for thought</a></li>
<li><a href="events.html">events</a></li>
<li><a href="venues.html">venues</a></li>
<li><a href="contact2.html">contact</a></li>
</ul>
<div id="main">
<div id="loadarea" style="width: 600px"></div>
<a href="images/aug_2011_wedding/J-C4-53.CR2.p.jpg" rel="enlargeimage" rev="targetdiv:loadarea"></a><br />
<a href="images/aug_2011_wedding/J-C4-155.CR2.p.jpg" rel="enlargeimage" rev="targetdiv:loadarea,link:http://dynamicdrive.com"></a><br />
</div>
<br /><br />
<div id="loadarea2"><a href="images/aug_2011_wedding/J-C4-53.CR2.p.jpg" rel="enlargeimage" rev="targetdiv:loadarea2,trigger:click,preload:yes,fx:reveal"></a><br />
<a href="images/aug_2011_wedding/J-C4-155.CR2.p.jpg" rel="enlargeimage" rev="targetdiv:loadarea2,trigger:click,preload:yes,fx:reveal"></a><br /></div>
</div>
<div id="footer"> <img name="footer" src="images/footer.jpg" width="850" height="60" border="0" id="footer2" usemap="#m_footer" alt="" />
<map name="m_footer" id="m_footer">
<area shape="rect" coords="775,9,811,42" href="http://www.facebook.com/home.php#!/annewh.countryhouseoccasions" alt="" />
<area shape="rect" coords="696,8,773,43" href="http://www.linkedin.com/profile/view?id=107604686&authType=NAME_SEARCH&authToken=VKNl&locale=en_US&srchid=4b7db669-af66-42d1-884b-95ab3f8b29e6-0&srchindex=1&srchtotal=1&goback=.fps_PBCK_anne+worralo*5hickman_*1_*1_*1_*1_*1_*1_*2_*1_Y_*1_*1_*1_false_1_R_tr" alt="" />
<area shape="rect" coords="604,7,693,42" href="http://www.hwchamber.co.uk" alt="" />
</map>
</div>
</div>
<p align="center">© Country House Occasions 2011. All rights reserved<br />
site designed by Business Angel: frances@business-angel.co.uk<br />
Click for <a href="pdfs/privacy_policy.pdf">privacy policy</a> and <a href="pdfs/terms_and_conditions.pdf">terms and conditions</a></p>
</body></html>
The external js file is as follows:
/*Image Thumbnail Viewer II (May 19th, 2010)
* This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/
//Last updated: Sept 26th, 2010: http://www.dynamicdr...ead.php?t=57892
jQuery.noConflict()
jQuery.thumbnailviewer2={
loadmsg: '<img src="images/aug_2011_wedding/J-C4-53.CR2.p.jpg" /><br />Loading Large Image...'
loadmsg: '<img src="images/aug_2011_wedding/J-C4-155.CR2.p.jpg" /><br />Loading Large Image...', //HTML for loading message. Make sure image paths are correct
/////NO NEED TO EDIT BEYOND HERE////////////////
dsetting: {trigger:'mouseover', preload:'yes', fx:'fade', fxduration:500, enabletitle:'yes'}, //default settings
buildimage:function($, $anchor, setting){
var imghtml='<img src="'+$anchor.attr('href')+'" style="border-width:0" />'
if (setting.link)
imghtml='<a href="'+setting.link+'">'+imghtml+'</a>'
imghtml='<div>'+imghtml+((setting.enabletitle!='no' && $anchor.attr('title')!='')? '<br />'+$anchor.attr('title') : '')+'</div>'
return $(imghtml)
},
showimage:function($image, setting){
$image.stop()[setting.fxfunc](setting.fxduration, function(){
if (this.style && this.style.removeAttribute)
this.style.removeAttribute('filter') //fix IE clearType problem when animation is fade-in
})
}
}
jQuery.fn.addthumbnailviewer2=function(options){
var $=jQuery
return this.each(function(){ //return jQuery obj
if (this.tagName!="A")
return true //skip to next matched element
var $anchor=$(this)
var s=$.extend({}, $.thumbnailviewer2.dsetting, options) //merge user options with defaults
s.fxfunc=(s.fx=="fade")? "fadeIn" : "show"
s.fxduration=(s.fx=="none")? 0 : parseInt(s.fxduration)
if (s.preload=="yes"){
var hiddenimage=new Image()
hiddenimage.src=this.href
}
var $loadarea=$('#'+s.targetdiv)
var $hiddenimagediv=$('<div />').css({position:'absolute',visibility:'hidden',left:-10000,top:-10000}).appendTo(document.body) //hidden div to load enlarged image in
var triggerevt=s.trigger+'.thumbevt' //"click" or "mouseover"
$anchor.unbind(triggerevt).bind(triggerevt, function(){
if ($loadarea.data('$curanchor')==$anchor) //if mouse moves over same element again
return false
$loadarea.data('$curanchor', $anchor)
if ($loadarea.data('$queueimage')){ //if a large image is in the queue to be shown
$loadarea.data('$queueimage').unbind('load') //stop it first before showing current image
}
$loadarea.html($.thumbnailviewer2.loadmsg)
var $hiddenimage=$hiddenimagediv.find('img')
if ($hiddenimage.length==0){ //if this is the first time moving over or clicking on the anchor link
var $hiddenimage=$('<img src="'+this.href+'" />').appendTo($hiddenimagediv) //populate hidden div with enlarged image
$hiddenimage.bind('loadevt', function(e){ //when enlarged image has fully loaded
var $targetimage=$.thumbnailviewer2.buildimage($, $anchor, s).hide() //create/reference actual enlarged image
$loadarea.empty().append($targetimage) //show enlarged image
$.thumbnailviewer2.showimage($targetimage, s)
})
$loadarea.data('$queueimage', $hiddenimage) //remember currently loading image as image being queued to load
}
if ($hiddenimage.get(0).complete)
$hiddenimage.trigger('loadevt')
else
$hiddenimage.bind('load', function(){$hiddenimage.trigger('loadevt')})
return false
})
})
}
jQuery(document).ready(function($){
var $anchors=$('a[rel="enlargeimage"]') //look for links with rel="enlargeimage"
$anchors.each(function(i){
var options={}
var rawopts=this.getAttribute('rev').split(',') //transform rev="x:value1,y:value2,etc" into a real object
for (var i=0; i<rawopts.length; i++){
var namevalpair=rawopts[i].split(/
?!\/\/)/) //avoid spitting ":" inside "http://blabla"options[jQuery.trim(namevalpair[0])]=jQuery.trim(namevalpair[1])
}
$(this).addthumbnailviewer2(options)
})
})
