srobbin

<noscript><img src="Koala.jpg" alt="A koala" /></noscript>

<script>
    $('noscript').each(function(){
        var $self = $(this)
          , $img = $( $self.text() )
          , src = $img.attr("src") + ( screen.width < 500 ? "?width=420" : "" );
                        
        $self.replaceWith( $img.attr("src", src) );
    });

srobbin

/*
 * jQuery Backstretch
 * Version 1.2.6
 * http://srobbin.com/jquery-plugins/jquery-backstretch/
 *
 * Add a dynamically-resized background image to the page
 *
 * Copyright (c) 2011 Scott Robbin (srobbin.com)
 * Dual licensed under the MIT and GPL licenses.
*/

srobbin

/* 
  Gists are snippets of shareable code. 
  GitHub allows gists to be embedded into your website

  For example, here's a bit of CSS for a background gradient.
  It's being applied to the page that you're looking at.
*/

  body {
    background: #efefef; /* Old browsers */

srobbin

/* 
  You used the drop-down menu!
  That appears automatically when give Intelligist multiple gists to display.

  You'll also notice that the page styles have changed.
  Intelligist has an option that lets you execute the Gist code after it's been
  loaded onto the page.
*/

  body {

srobbin

/* 
  Using Intelligist is easy.
  Just select the container, and pass in an object of gists that you'd like to display.
  The object is made of keys (the gist ID) and values (titles for the drop-down menu).
  
  Note: In this example, we are setting the "exec" option to true.
        This instructs Intelligist to execute the code after the gist is displayed.
        It is optional, and disabled by default.

  Important: If you are using the "exec" option, your Gist must be set

srobbin

/*
 * At its core, Backstretch is a one-line plugin.
 * Just pass in the path to an image, and you're done.
 */

  $.backstretch("images/garfield-interior.jpg");

srobbin

/*
 * Here is an example of how to use Backstretch as a slideshow.
 * Just pass in an array of images, and optionally a duration and fade value.
 */

  // Duration is the amount of time in between slides,
  // and fade is value that determines how quickly the next image will fade in
  $.backstretch([
      "images/outside.jpg"
    , "images/garfield-interior.jpg"

srobbin

/*
 * You can easily attach Backstretch to jQuery events, like click
 * 
 * Click the buttons above to see the background image change
 */
 
  $("#outside").click(function(e) {
    e.preventDefault();
    $.backstretch('images/outside.jpg');
  });

srobbin

/* 
  We can even execute JavaScript.
  For example, here is a simple jQuery plugin that shuffles the "Demo" heading text above.

  http://tutorialzine.com/2011/09/shuffle-letters-effect-jquery/
*/

  $("#demo-header").shuffleLetters();

srobbin

<a href="_secondary.html" class="first">Link text</a>
<script>
    $("a.first").pageslide();
</script>