title: jQuery image switcher
body: <p><strong>Problem</strong></p>
  
  <p>I'm getting lost reading countless js code hints etc and I'm finding it hard to know where to start. Help!</p>
  
  <p>So basically I have a main full screen background image in the CSS on the <code>#main</code> <code>div</code> and I have list items each with small thumbnails, when they are clicked they are switched to create a new large background image in the <code>#main</code> <code>div</code>.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="main"&gt;
      &lt;ul id="thumbs"&gt;
          &lt;li&gt;
              &lt;a href="#"&gt;
                  &lt;img src="http://www.lorempixel.com/50/50" /&gt;
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#"&gt;
                  &lt;img src="http://www.lorempixel.com/50/50" /&gt;
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#"&gt;
                  &lt;img src="http://www.lorempixel.com/50/50" /&gt;
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#"&gt;
                  &lt;img src="http://www.lorempixel.com/50/50" /&gt;
              &lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#main {
      background-image: url(http://www.lorempixel.com/500/50);
      width: 500px;
      height: 200px;
  }
  li {
      list-style: none;
      float: left;
      padding: 10px;
  }
  </code></pre>
  
  <p><strong>Fiddle</strong></p>
  
  <p><a href="http://jsfiddle.net/NjX4n/" rel="nofollow">http://jsfiddle.net/NjX4n/</a></p>
  
  <p>Thanks for the help.</p>
  
  <hr>
  
  <p><strong>Updated Solution</strong></p>
  
  <p>I managed to solve it in the end using the <code>data</code> attribute along with giving each <code>img</code> a <code>class</code> of <code>.thumb</code> for jQuery to interact with.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="main"&gt;
      &lt;ul id="thumbs"&gt;
          &lt;li&gt;
              &lt;a href="#"&gt;
                  &lt;img class="thumb" src="http://www.lorempixel.com/50/50"
                   data-header-img="http://www.lorempixel.com/500/200" /&gt;
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#"&gt;
                  &lt;img class="thumb" src="http://www.lorempixel.com/50/50"
                   data-header-img="http://www.lorempixel.com/500/200" /&gt;
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#"&gt;
                  &lt;img class="thumb" src="http://www.lorempixel.com/50/50"
                   data-header-img="http://www.lorempixel.com/500/200" /&gt;
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#"&gt;
                  &lt;img class="thumb" src="http://www.lorempixel.com/50/50"
                   data-header-img="http://www.lorempixel.com/500/200" /&gt;
              &lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$('.thumb').click(function() {
      $('#main').css('background-image', "url("+$(this).attr('data-header-img')+")");
  });
  </code></pre>
  
  <p><strong>DEMO</strong></p>
  
  <p><a href="http://jsfiddle.net/NjX4n/1/" rel="nofollow">http://jsfiddle.net/NjX4n/1/</a></p>
  
  <p>Thanks all the for the input and advice. Y.</p>