Javascript Image Carousel Help

Irish_Tom · 1 Jul 2012 at 12:56

Hi everyone,

I've built a website for a friend of mine:

http://www.leightonpaull.co.uk

I know nothing about Javascript so I found a free carousel script online and hacked it around until it did what I wanted it to do.

I'm now trying to improve the site and yesterday I set out to increase the Google Page Speed score. I've done everything I can apart from 'serve scaled images'.

The carousel only requires one instance of each image in the HTML and then it re-sizes the image for the thumbnail and full-size version. This is where the Page Speed is being hammered but I don't understand the Javascript well enough to change it so that it references a thumbnail for the carousel and the full-size image separately.

Could anyone point me in the right direction? Thanks for any help you can give me.

Here's the HTML (using the HTML5 Boilerplate):

Code:

<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Leighton Paull – Specialist in Traditional Cornish Hedging, Dry Stone Walling and Fencing</title>
  <meta name="description" content="Leighton Paull — specialist in traditional Cornish hedging, dry stone walling and fencing.">

 <meta name="viewport" content="width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes"/>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/image-slider.css" type="text/css" />

  <script src="js/libs/modernizr-1.7.min.js"></script>
</head>
<body>
  <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
 <div id="container">
      <div id="header_back">
      <header>
        <div class="left">
          <h2>Leighton Paull</h2>
          <h1>Traditional Cornish Hedging &amp; Fencing</h1>
        </div><!--! end of .left -->
        <div class="right">
          <h3>Call for a FREE estimate</h3>
          <h4>01726 833123 | 07967 424525</h4>
        </div><!--! end of .right -->
      </header>
    </div><!--! end of #header_back -->
      <div id="main" role="main">
      <div class="body_left">
        <p><span style="font-size:48px">I</span> specialise in traditional Cornish hedging, dry stone walling and fencing.</p>
        
        <p>I’m accredited by the Guild of Cornish Hedgers which means I only use locally sourced materials and traditional techniques. My work is professional, long lasting and quality is guaranteed.<sup>*</sup></p>

        <p>I work on newbuilds, repairs and restorations. If groundwork is required I can do that too; including retaining walls, excavation and earth removal.</p> 
        
        <p>I also have facilities to erect agricultural and residential fencing.</p>

        <p>See the image gallery below for some of my recent work. Give me a call or use my contact form to arrange a free estimate.</p>

        <p><sub>*3 year warranty as standard on work and materials</sub></p>
      </div><!--! end of .body_left -->
      <div class="body_right">
        <div id="form_back">
          <span class="call">or let me call you:</span>
          <form method="POST" action="mailer.php">
            <div class="form"><input name="name" type="text" size="25" placeholder="Name" required></div>
            <div class="form"><input name="telephone" type="text" maxlength="25" size="25" placeholder="Phone Number" required></div>
            <div class="form"><textarea name="message" rows="5" cols="22" wrap="physical">Details about your enquiry</textarea></div>
            <div class="form"><button id="submit" type="submit" value="Submit">Submit</button></div>
          </form>
        </div>
      </div><!--! end of .body_right -->
      <div id="slider">
              <div>
                  <img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-01.jpg" />
              </div>
              <div>
                  <img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-02.jpg" />
              </div>
              <div>
                  <img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-03.jpg" />
              </div>
              <div>
                  <img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-04.jpg" />
              </div>
              <div>
                  <img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-05.jpg" />
              </div>
              <div>
                  <img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-06.jpg" />
              </div>
              <div>
                  <img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-07.jpg" />
              </div>
              <div>
                  <img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-08.jpg" />
              </div>
              <div>
                  <img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-09.jpg" />
              </div>
              <div>
                  <img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-10.jpg" />
              </div>
              <div>
                  <img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-11.jpg" />
              </div>
              <div>
                  <img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-12.jpg" />
              </div>
              <div>
                  <img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-13.jpg" />
              </div>
              <div>
                  <img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-14.jpg" />
              </div>
              <div>
                  <img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-15.jpg" />
              </div>
              <div>
                  <img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-16.jpg" />
              </div>
              <div>
                  <img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-17.jpg" />
              </div>
              <div>
                  <img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-18.jpg" />
              </div>
              <div>
                  <img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-19.jpg" />
              </div>
              <div>
                  <img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-20.jpg" />
              </div>
              <div>
                  <img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-21.jpg" />
              </div>
              <div>
                  <img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-22.jpg" />
              </div>
              <div>
                  <img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-23.jpg" />
              </div>
              <div>
                  <img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-24.jpg" />
              </div>
               <div>
                  <img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-25.jpg" />
              </div>
               <div>
                  <img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-26.jpg" />
              </div>
               <div>
                  <img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-27.jpg" />
              </div>
               <div>
                  <img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-28.jpg" />
              </div>
               <div>
                  <img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-29.jpg" />
              </div>
          </div><!--! end of #slider -->
      </div><!--! end of #main -->
    <footer>
      <img id="guild" src="img/guild.png" alt="Guild of Cornish Hedgers" />
      <h6>Leighton Paull, Coombe Farm, Fowey, Cornwall, PL23 1HW | 01726 833123 | 07967 424525</h6>
      </footer>
    <div id="sub">
      <span class="legal">© 2011 Leighton Paull | site by <a href="http://www.mc2gd.com" style="color:#fff">Mc2gd</a></span>
    </div>
  </div> <!--! end of #container -->


  <!-- JavaScript at the bottom for fast page loading -->

  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
  <script>window.jQuery || document.write("<script src='js/libs/jquery-1.5.1.min.js'>\x3C/script>")</script>


  <!-- scripts concatenated and minified via ant build script-->
  <script src="js/plugins.js"></script>
  <script src="js/script.js"></script>
  <script src="js/image-slider.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
        $('#slider').slider({ speed: 500 });

    });

  </script>

  <!-- end scripts-->


  <!--[if lt IE 7 ]>
    <script src="js/libs/dd_belatedpng.js"></script>
    <script>DD_belatedPNG.fix("img, .png_bg"); // Fix any <img> or .png_bg bg-images. Also, please read goo.gl/mZiyb </script>
  <![endif]-->


  <!-- mathiasbynens.be/notes/async-analytics-snippet Change UA-XXXXX-X to be your site's ID -->
  <script>
    var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"]];
    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
    g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
    s.parentNode.insertBefore(g,s)}(document,"script"));
  </script>

</body>
</html>

Here's the Javascript:

Code:

(function($) {
    $.fn.extend({
        slider: function(options) {
            var settings = $.extend({
                speed: 500
            }, options);
            return this.each(function() {
                var slidercontents = $(this).addClass('image-slider-contents');
                var slider = $('<div/>').addClass('image-slider').attr('id', slidercontents.attr('id'));
                var backbutton = $('<div/>').addClass('image-slider-back');
                var forwardbutton = $('<div/>').addClass('image-slider-forward');
                slidercontents.removeAttr('id');
                slidercontents.before(slider);
                slider.append(backbutton);
                slider.append(slidercontents);
                slider.append(forwardbutton);
                var total = $('> div', slidercontents).length;
                var left = 0;
                var w;
                var width;
                var maxScroll;
                slider.append($('<div/>').css('display', 'none').addClass('preview').append($('<div/>').addClass('img-large')
                                                                                                       .append($('<div/>').html('&nbsp').click(function(e) {
                                                                                                           e.stopPropagation();
                                                                                                           e.stopImmediatePropagation();
                                                                                                           //display previous image
                                                                                                           var img = $(this).parent().find('img');
                                                                                                           var index = parseInt(img.attr('class'));
                                                                                                           img.removeAttr('class');
                                                                                                           if (index > 1) {
                                                                                                               index--;
                                                                                                               var src = $('.' + index + ' div img').attr('src');
                                                                                                               var txt = $('.' + index + ' div a').html();
                                                                                                               $('.preview').find('.label').html(txt);
                                                                                                               $('.preview').find('img').addClass('' + (index) + '').css('opacity', '0').attr('src', src).stop(false, true).animate({ opacity: 1 }, 1000);
                                                                                                           }
                                                                                                           else
                                                                                                               $('.preview').find('img').addClass('' + (index) + '');
                                                                                                       }).addClass('left').css('opacity', '0.5').hover(function() { $(this).css('opacity', '1') }, function() { $(this).css('opacity', '0.5') }))
                                                                                                       .append($('<div/>').html('&nbsp').click(function(e) {
                                                                                                           e.stopPropagation();
                                                                                                           e.stopImmediatePropagation();
                                                                                                           //display next image
                                                                                                           var img = $(this).parent().find('img');
                                                                                                           var index = parseInt(img.attr('class'));
                                                                                                           img.removeAttr('class');
                                                                                                           if (index < total) {
                                                                                                               index++;
                                                                                                               var src = $('.' + index + ' div img').attr('src');
                                                                                                               var txt = $('.' + index + ' div a').html();
                                                                                                               $('.preview').find('.label').html(txt);
                                                                                                               $('.preview').find('img').addClass('' + (index) + '').css('opacity', '0').attr('src', src).stop(false, true).animate({ opacity: 1 }, 1000);
                                                                                                           }
                                                                                                           else
                                                                                                               $('.preview').find('img').addClass('' + (index) + '')
                                                                                                       }).addClass('right').css('opacity', '0.5').hover(function() { $(this).css('opacity', '1') }, function() { $(this).css('opacity', '0.5') }))
                                                                                                       .append($('<img/>'))).append($('<div/>').addClass('label').css('opacity', '0.8'))
                                                                                                       .append($('<div/>').addClass('close').click(function(e) {
                                                                                                           $(this).parent().fadeOut("slow");
                                                                                                       })));
                $(document).click(function(e) {
                    if ($('.preview').css('display') == 'block')
                        $('.preview').fadeOut("slow");
                });
                function initialize() {
                    var tempElements = $('> div', slidercontents);
                    var allElements = new Array();
                    tempElements.each(function(index, el) {
                        allElements.push($('<div/>').addClass('' + (index + 1) + '').addClass('outer').append(el));
                    });

                    allElements = $(allElements);
                    $('> div', slidercontents).remove();
                    var wrapper = $('<div/>').addClass('contents-wrapper');
                    allElements.each(function(index, el) {

                        wrapper.append($(el));
                    });
                    slidercontents.append(wrapper);
                    var w = $('.outer:eq(0)', slidercontents).outerWidth() + parseFloat($('.outer:eq(0)', slidercontents).css('margin-left')) + parseFloat($('.outer:eq(0)', slidercontents).css('margin-right'));
                    var width = (total+1) * w;
                    var maxScroll = width - $('.image-slider-contents').outerWidth();
                    wrapper.css({ width: width });
                    $('> div > div', slidercontents).css('display', '');
                    $('.outer', slidercontents).each(function(index) {
                      
                    });
$('.outer a').click(function(e){
							 e.stopPropagation();
							 e.stopImmediatePropagation();
							 
							 });
                    $('.outer').hover(function() { $(this).addClass('active'); }, function() { $(this).removeClass('active'); }).click(
                                                     function(e) {
                                                         e.stopPropagation();
                                                         e.stopImmediatePropagation();
                                                         var cls = $(this).attr('class').split(' ')[0];
                                                         var p = $(this).find('div');
                                                         var img = p.find('img').attr('src');
                                                         var preview = $('.preview');
                                                         var l = $('.image-slider').width()/2 - preview.outerWidth() / 2;
                                                         var t = (p.offset().top - preview.height());
                                                         t -= t / 2;
                                                         preview.css({ left: l, top: t });
                                                         var text = p.find('a').html();
                                                         preview.find('img').attr('src', img).addClass(cls);
                                                         preview.find('.label').html(text);
                                                         preview.fadeIn("slow");

                                                     });

                    forwardbutton.click(function() {
                        left -= w;
                        if (left + maxScroll >= 0) {
                            $('.contents-wrapper').stop(false, true).animate({ left: '-=' + w }, settings.speed);
                        }
                        else
                            left += w;
                    });
                    backbutton.click(function() {
                        if (left < 0) {
                            left += w;
                            $('.contents-wrapper').stop(false, true).animate({ left: '+=' + w }, settings.speed);
                        }
                    });
                }
                initialize();

                function getDimensions(value) {
                    return value + 'px';
                }

            });
        }
    });
})(jQuery);

Here's the slider CSS:

Code:

#slider
        {
            margin: 0 auto;
			padding:0 auto;
			text-align:center;
			clear:both;
			position:relative;
			top:25px;
        }

#slider div a{
	position: relative;
	font-size: 12px;
	color: white;
	font-weight: bold;
	float:left;
	padding:10px;
	text-decoration:none;
}	

#slider div a:hover{color:#F1D5CA;}	

		
.image-slider
{
	z-index:1;
	position: relative;
	margin:0 auto;
	padding:0 auto;
	clear:both;
	width: 888px;
	height: 276px;
	background: #483212; /* Old browsers */
	background: -moz-linear-gradient(top, #483212 0%, #251a09 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#483212), color-stop(100%,#251a09)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #483212 0%,#251a09 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #483212 0%,#251a09 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #483212 0%,#251a09 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#483212', endColorstr='#251a09',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #483212 0%,#251a09 100%); /* W3C */
	border: solid 1px #251a09;
	font-family:Helvetica, Arial, Tahoma, sans-serif;

}
.image-slider-back, .image-slider-forward
{
	z-index:5;
	position:relative;
	width:37px;
	height:45px;
	cursor: pointer;
}
.image-slider-back
{
	float: left;
	background-image: url(../img/arrow-left.png);
	background-repeat: no-repeat;
	background-position: left;
	left:5px;
	top:100px;
}
.image-slider-forward
{
	float: right;
	background-image: url(../img/arrow-right.png);
	background-repeat: no-repeat;
	background-position: right;
	right:5px;
	top:-150px;
}
.image-slider-contents
{
	z-index:2;
	width: 850px;
	height: 250px;
	position: relative;
	left:-20px;
	overflow: hidden;
}

.image-slider-contents .contents-wrapper
{
	position: relative;
	padding-top: 25px;
}

.image-slider-contents .outer
{
	float: left;
	width: 376px;
	height: 250px;
	cursor:pointer;
	margin-right:15px;
}

.image-slider-contents .outer > div img
{
	position:relative;
	left:-160px;
	width: 376px;
	height: 250px;
}

.image-slider-contents img
{
	width: 376px;
	height: 250px;
}

.hidden
{
	display: none;
}
.visible
{
	display: block;
}
.thumbnail-active
{
	filter: alpha(opacity=100);
	opacity: 1.0;
	cursor: pointer;
}
.thumbnail-inactive
{
	filter: alpha(opacity=20);
	opacity: 0.2;
	cursor: pointer;
}

.preview
{
	position: absolute !important;
	top:-166px !important;
	left:75px !important;
	z-index:6;
	width: 740px;
	height: 500px;
	background-color: #fff;
}
.preview .img-large
{
	position:relative;
	top:-35px;
	left:10px;
	width:720px;
	height:479px;
	z-index: 60;
}
.preview .img-large .left
{
	position:relative;
	top:250px;
	width:37px;
	height:45px;
	z-index: 5;
	background: url(../img/arrow-left.png);
	cursor:pointer;
}
.preview .img-large .right
{
	position: relative;
	top:250px;
	z-index: 5;
	width:37px;
	height:45px;
	background: url(../img/arrow-right.png);
	cursor:pointer;
}
.preview .close
{
	position: relative;
	top:-490px;
	left:10px;
	width: 32px;
	height: 34px;
	background: url(../img/close.png);
	float: right;
	cursor: pointer;
	z-index: 70;
}
.preview .img-large img
{
	position:relative;
	z-index:0;
	width:720px;
	height:479px;

}

/*.outer.active
{
	border: solid 1px #B56161;
	background-color: #F1D5CA;
}
.outer.active div span
{
	color: #F1D5CA;
}*/

Here's the main site CSS:

Code:

vhtml, body, div, span, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, 
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary, 
time, mark, audio, video{ margin:0;  padding:0;  border:0;  font-size:100%;  font:inherit;  vertical-align:baseline}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section{ display:block}

blockquote, q{quotes:none}

blockquote:before, blockquote:after, 
q:before, q:after{content:""; content:none}

ins{background-color:#ff9; color:#000; text-decoration:none}

mark{background-color:#ff9; color:#000; font-style:italic; font-weight:bold}

del{text-decoration:line-through}

abbr[title], dfn[title]{border-bottom:1px dotted; cursor:help}

table{border-collapse:collapse; border-spacing:0}

hr{display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0}

input, select{vertical-align:middle}

body{font:13px/1.231 sans-serif; *font-size:small}

select, input, textarea, button{font:99% sans-serif}

pre, code, kbd, samp{font-family:monospace,sans-serif}

html{overflow-y:scroll}

a:hover, a:active{outline:none}

ul, ol{margin-left:2em}
ol{list-style-type:decimal}

nav ul, nav li{margin:0; list-style:none; list-style-image:none}

small{font-size:85%}
strong, th{font-weight:bold}

td{vertical-align:top}

sub, sup{font-size:75%; line-height:0; position:relative}
sup{top:-0.5em}
sub{bottom:-0.25em}

pre{  white-space:pre; white-space:pre-wrap; word-wrap:break-word;  padding:15px}

textarea{overflow:auto}

.ie6 legend, .ie7 legend{margin-left:-7px}

input[type="radio"]{vertical-align:text-bottom}
input[type="checkbox"]{vertical-align:bottom}
.ie7 input[type="checkbox"]{vertical-align:baseline}
.ie6 input{vertical-align:text-bottom}

label, input[type="button"], input[type="submit"], input[type="image"], button{cursor:pointer}

button, input, select, textarea{margin:0}

input:valid, textarea:valid{}
input:invalid, textarea:invalid{ border-radius:1px; -moz-box-shadow:0px 0px 5px red; -webkit-box-shadow:0px 0px 5px red; box-shadow:0px 0px 5px red}
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid{background-color:#f0dddd}


::-moz-selection{background:#FF5E99; color:#fff; text-shadow:none}
::selection{background:#FF5E99; color:#fff; text-shadow:none}

a:link{-webkit-tap-highlight-color:orange}

button{ width:auto; overflow:visible}

.ie7 img{-ms-interpolation-mode:bicubic}

body, select, input, textarea{  color:#444}

h1, h2, h3, h4, h5, h6{font-weight:bold}

a, a:active, a:visited{color:#607890}
a:hover{color:#036}

body{background-color:#222; min-width:1100px}

#container{width:100%; height:1000px; background:#5d5c5c; background:-moz-linear-gradient(top,#5d5c5c 0%,#222 100%); background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#5d5c5c),color-stop(100%,#222)); background:-webkit-linear-gradient(top,#5d5c5c 0%,#222 100%); background:-o-linear-gradient(top,#5d5c5c 0%,#222 100%); background:-ms-linear-gradient(top,#5d5c5c 0%,#222 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d5c5c',endColorstr='#222',GradientType=0 ); background:linear-gradient(top,#5d5c5c 0%,#222 100%); /* W3C */}

 #header_back{width:100%; height:150px; background:#5d5c5c; background-image:url('../img/slate.png'),-moz-linear-gradient(top,#5d5c5c 0%,#222 100%); background-image:url('../img/slate.png'),-webkit-gradient(linear,left top,left bottom,color-stop(0%,#5d5c5c),color-stop(100%,#222)); background-image:url('../img/slate.png'),-webkit-linear-gradient(top,#5d5c5c 0%,#222 100%); background-image:url('../img/slate.png'),-o-linear-gradient(top,#5d5c5c 0%,#222 100%); background-image:url('../img/slate.png'),-ms-linear-gradient(top,#5d5c5c 0%,#222 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d5c5c',endColorstr='#222',GradientType=0 ); background-image:url('../img/slate.png'),linear-gradient(top,#5d5c5c 0%,#222 100%); /* W3C */}

 header, #main{margin:0 auto; padding:0 auto; width:960px}

 footer{clear:both; margin:0 auto; padding:0 auto; width:890px; height:75px; position:relative; top:75px; background:#483212; background:-moz-linear-gradient(top,#483212 0%,#251a09 100%); background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#483212),color-stop(100%,#251a09)); background:-webkit-linear-gradient(top,#483212 0%,#251a09 100%); background:-o-linear-gradient(top,#483212 0%,#251a09 100%); background:-ms-linear-gradient(top,#483212 0%,#251a09 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#483212',endColorstr='#251a09',GradientType=0 ); background:linear-gradient(top,#483212 0%,#251a09 100%); /* W3C */-webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px}

 h1, h2, h3, h4, h5, h6, p, .call {
 	font-family:Georgia, "Times New Roman", Times, serif;
 	font-weight:normal;
 }

h1, h4, h5, h6, p, .call {
	color:#fff;
}

h2, h3 {
	color:#ff8b00; 
	text-shadow:0 -1px 1px #000,0px 1px 1px #999;
}

 h1 {
 	font-style:italic; 
 	font-size:24px; 
 	padding-left:35px;
 }

 h2 {
 	font-size:58px; 
 	font-weight:bold; 
 	padding:15px 0 0 35px
 }

 h3 {
 	font-size:32px; 
 	float:right; 
 	padding:40px 35px 0 0;
}

 h4 {
 	font-size:26px; 
 	float:right; 
 	padding:0 35px 0 0;
}

 h5 {
 	padding:25px 25px 15px 25px; 
 	font-size:20px;
}

 h6 {
 	font-size:19px; 
 	position:relative; 
 	top:-45px; 
 	left:90px;
}

 p {
 	font-size:19px; 
 	margin-left:35px; 
 	margin-top:15px; 
 	line-height:133%; 
 	padding-bottom:15px;
}

 .call {
	font-size:27px; 
	position:relative; 
	left:20px;
 }

 .left, .right {
 	width:480px; 
 }

 .left {
 	float:left
 }

 .right {
 	float:right
 }

 .body_left{padding-top:15px; width:600px; float:left}

 .body_right{padding-top:45px; width:360px; float:right}

 #form_back{z-index:1; position:relative; margin:0 auto; padding:10px 0 0 0; width:260px; height:280px; background:#483212; background:-moz-linear-gradient(top,#483212 0%,#251a09 100%); background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#483212),color-stop(100%,#251a09)); background:-webkit-linear-gradient(top,#483212 0%,#251a09 100%); background:-o-linear-gradient(top,#483212 0%,#251a09 100%); background:-ms-linear-gradient(top,#483212 0%,#251a09 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#483212',endColorstr='#251a09',GradientType=0 ); background:linear-gradient(top,#483212 0%,#251a09 100%); /* W3C */-webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px}

#thanks{z-index:0; margin:0 auto; padding:0 auto; position:relative; top:-10px; width:260px; height:90px; background:#f7941d; background:-moz-linear-gradient(top,#f7941d 0%,#d26129 100%); background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f7941d),color-stop(100%,#d26129)); background:-webkit-linear-gradient(top,#f7941d 0%,#d26129 100%); background:-o-linear-gradient(top,#f7941d 0%,#d26129 100%); background:-ms-linear-gradient(top,#f7941d 0%,#d26129 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7941d',endColorstr='#d26129',GradientType=0 ); background:linear-gradient(top,#f7941d 0%,#d26129 100%); /* W3C */-moz-border-radius-topleft:px; -moz-border-radius-topright:px; -moz-border-radius-bottomright:15px; -moz-border-radius-bottomleft:15px; -webkit-border-radius:0px 0px 15px 15px; border-radius:px px 15px 15px}

 .form{z-index:2; margin-left:20px; padding-bottom:10px; padding-top:10px;}

 #submit{z-index:2; width:110px; height:30px; border:1px solid #d26129; background:#f7941d; background:-moz-linear-gradient(top,#f7941d 0%,#d26129 100%); background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f7941d),color-stop(100%,#d26129)); background:-webkit-linear-gradient(top,#f7941d 0%,#d26129 100%); background:-o-linear-gradient(top,#f7941d 0%,#d26129 100%); background:-ms-linear-gradient(top,#f7941d 0%,#d26129 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7941d',endColorstr='#d26129',GradientType=0 ); background:linear-gradient(top,#f7941d 0%,#d26129 100%); /* W3C */font-family:'timesRoman'; font-size:18px; color:#fff}

 #guild{margin:10px 10px 10px 15px; display:inline}

 #sub{width:960px; height:175px; padding:0 auto; margin:0 auto}
 
 .legal{position:relative; top:100px; left:380px; font-family:'timesRoman'; font-size:12px; color:#fff}

.ir{display:block; text-indent:-999em; overflow:hidden; background-repeat:no-repeat; text-align:left; direction:ltr}

.hidden{display:none; visibility:hidden}

.visuallyhidden{border:0; clip:rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px}

.visuallyhidden.focusable:active, 
.visuallyhidden.focusable:focus{clip:auto; height:auto; margin:0; overflow:visible; position:static; width:auto}

.invisible{visibility:hidden}

.clearfix:before, .clearfix:after{content:"\0020"; display:block; height:0; overflow:hidden}
.clearfix:after{clear:both}

.clearfix{zoom:1}

@media all and (orientation:portrait) { 

}

@media all and (orientation:landscape) { 

}

@media screen and (max-device-width: 481px) {

	body {
		width:480px;
		min-width:480px;
		background-color:#222
	}

	#container {
		width:480px;
	}

	#header_back {
		width:480px;
	}

	#main {
		width:480px;
	}

	header {
		width:480px;
	}

	footer {
		width:460px;
		top:100px;
	}

	.left {
		width:400px;
		padding:0;
		margin: 0;

	}

	.right {
		width:400px;
		text-align:left;
		float:left;
		margin-left:35px;
	}
	
	.body_left {
		width:460px;
		clear:both;
	}

	.body_right {
		width:480px;
		float:right;
	}

	#form_back {
		clear:both;
		float:left;
		margin-left:35px;
	}

	#slider {
		display:none;
	}


	 #sub {
	 	width:480px;
	 	clear:both;
	 	position:relative;
	 	right:225px;
	 	top:30px;
	 }

	 #thanks {
	 	position:relative;
	 	top:275px;
	 	right:75px;
	 }

	h1 {
		font-size:21px;
		padding-top:10px;
	}

	h2 {
		font-size:48px;
		color:#ff8b00;
}

	h3 {
		color:#ff8b00;
		text-shadow: none;
		font-size:30px;
		float:none;
	}

	h4 {
		padding:0;
		float:right;
		font-size:27px;
		float:none;
		text-shadow:none;
	}

	h5{
		position:relative;
		top:-260px;
	}
	h6 {
		font-size: 17px;
		position:absolute;
		top:13px;
		left:33px;
		padding-left:50px;
		line-height:133%;
	}


}

@media print{ *{background:transparent !important; color:black !important; text-shadow:none !important; filter:none !important;  -ms-filter:none !important}

 a, a:visited{color:#444 !important; text-decoration:underline}
 a[href]:after{content:"("attr(href) ")"}
 abbr[title]:after{content:"("attr(title) ")"}
 .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after{content:""}
 
 pre, blockquote{border:1px solid #999; page-break-inside:avoid}
 thead{display:table-header-group}

 tr, img{page-break-inside:avoid}
 @page{margin:0.5cm}
 p, h2, h3{orphans:3; widows:3}
 h2, h3{page-break-after:avoid}
}

Thanks again!

jsmoke · 2 Jul 2012 at 01:10

Had a quick look, for one you could try changing

Code:

.preview .img-large img { 	position:relative; 	z-index:0; 	width:720px; 	height:479px;  }

to

Code:

.preview .img-large img { 	position:relative; 	z-index:0; 	width:960px; 	height:639px;  }

Irish_Tom · 2 Jul 2012 at 08:55

Thanks for the reply jsmoke, unfortunately I don't think that's quite the fix I need though.

When you first look at the carousel, each image 'thumbnail' is 376px wide by 250px high.

when you click on an image, a lightbox pops up with the image at 720px wide by 479px high.

At the moment, both of these instances are referenced from a single image which is 720 x 479 and the javascript references the css to re-size it to 376x250 for the thumbnail.

Google Page Speed is penalising me for not having two versions of the same image; one 376x250 for the thumbnail and one 720x479 for the full-sized version.

What I don't understand is; how do I change the javascript so it uses 'picture1thumbnail' in the carousel and 'picture1' in the lightbox.

I hope that makes a bit more sense.

jsmoke · 2 Jul 2012 at 09:26

Hmmm, quite involved.

Things is you have 3 images, the original ones are 960x639px

www.leightonpaull.co.uk/img/traditional-cornish-hedge-02.jpg

these are being scaled to 720x479px for the large and 376x25px for the thumbs.

I thought that was where the problem was.

https://developers.google.com/speed/docs/best-practices/rendering#SpecifyImageDimensions

Irish_Tom · 2 Jul 2012 at 12:02

Where abouts are the 960x639 images?

The original images in the /img folder are 720x479... I can't seem to replicate the conditions to get 960x639 pics. :/

I take it it's not going to be an easy fix then.

jsmoke · 2 Jul 2012 at 12:27

It's probably easy enough but you would have to spend a while understanding everything.

Irish_Tom · 2 Jul 2012 at 13:06

Yep, looks like I'm going to have to learn Javascript!

Cheers for your help jsmoke.

jsmoke · 2 Jul 2012 at 17:02

I'd help you more but i'd have to setup a web server to test it all out, read through the google docs then sift through all the code etc..

Irish_Tom · 2 Jul 2012 at 17:34

No problem at all!

I was hoping my lack of knowledge was getting in the way of a really simple solution and someone could just come along and give me an easy fix.

At least now I know it's not that obvious and will be a good opportunity to learn JS.