Image load when dom is ready

Image load when dom is ready

Hi,

Im trying to get the 1st image in a carousel to be inserted into a dom element on page load.

Clicking the carousel images in turn, does load each image into the dom element in question. However, need to get the 1s image in the crousel to load without having to click it.

Webpage: http://www.codesolv.net/play02/

//Failed Attempt to load image on page load
var $enlargedCover = $('<img/>')
     .addClass('enlarged')
     //.hide()
     .appendTo('#midsize');
     .attr('src', 'carousel-swede/images/covers/large/300-1.jpg');


//Complete code
$(document).ready(function() {
   var spacing = 140;
 
   function createControl(src) {
     return $('<img/>')
       .attr('src', src)
       .addClass('control')
       .css('opacity', 0.6)
       .css('display', 'none');
   }
      
   var $leftRollover = createControl('carousel-swedeimages/left.gif');
   var $rightRollover = createControl('carousel-swedeimages/right.gif');
   var $enlargeRollover = createControl('carousel-swedeimages/enlarge.gif');

   var $enlargedCover = $('<img/>')
     .addClass('enlarged')
     //.hide()
     .appendTo('#midsize');
     //.attr('src', 'carousel-swede/images/covers/large/300-1.jpg');
     //$enlargedCover.attr('src', $(this).attr('href'));
     
     
   var $closeButton = createControl('images/close.gif')
     .addClass('enlarged-control')
     .appendTo('body');

   var $priceBadge = $('<div/>')
     .addClass('enlarged-price')
     .css('opacity', 0.6)
     .css('display', 'none')
     .appendTo('body');
  
   $('#featured-books').css({
     'width': spacing * 3,
     'height': '166px',
     'overflow': 'hidden'
   }).find('.covers a').css({
     'float': 'none',
     'position': 'absolute',
     'left': 1000
   });
 
   var setUpCovers = function() {
     var $covers = $('#featured-books .covers a');
 
     $covers.unbind('click mouseenter mouseleave');

     //var first_cover = $covers.eq(0);
     //var first_img = first_cover.attr('href');
     //first_img.appendTo('#midsize');
    
     // Left image; scroll right (to view images on left).
     $covers.eq(0)
       .css('left', 0)
       .click(function(event) {
         $covers.eq(0).animate({'left': spacing}, 'fast');
         $covers.eq(1).animate({'left': spacing * 2}, 'fast');
         $covers.eq(2).animate({'left': spacing * 3}, 'fast');
         $covers.eq($covers.length - 1)
           .css('left', -spacing)
           .animate({'left': 0}, 'fast', function() {
             $(this).prependTo('#featured-books .covers');
             setUpCovers();
           });
      
         $enlargedCover.attr('src', $(this).attr('href'));

         event.preventDefault();
       })
       .hover(function() {
          $leftRollover.appendTo(this).show();
         }, function() {
            $leftRollover.hide();
       });
      
 
     // Right image; scroll left (to view images on right).
     $covers.eq(2)
       .css('left', spacing * 2)
       .click(function(event) {
         $covers.eq(0)
           .animate({'left': -spacing}, 'fast', function() {
             $(this).appendTo('#featured-books .covers');
             setUpCovers();
           });
         $covers.eq(1).animate({'left': 0}, 'fast');
         $covers.eq(2).animate({'left': spacing}, 'fast');
         $covers.eq(3)
           .css('left', spacing * 3)
           .animate({'left': spacing * 2}, 'fast');
        
         $enlargedCover.attr('src', $(this).attr('href'));

         event.preventDefault();
       })
       .hover(function() {
         $rightRollover.appendTo(this).show();
       }, function() {
         $rightRollover.hide();
       });
 
     // Center image; enlarge cover.
     $covers.eq(1)
      .css('left', spacing)
       .click(function(event) {
         var price = $(this).find('.price').text();
 
         $enlargedCover.attr('src', $(this).attr('href'))
           /* .css({
             'left': ($('body').width() - 360) / 3, //2
             'top' : 300,
             'width': 360,
             'height': 444
           }) */
           //.show()
           .one('click', function() {
             $closeButton.unbind('click').hide();
             $priceBadge.hide();
             //$enlargedCover.fadeOut();
           });
         $closeButton
           .css({
             'left': ($('body').width() - 360) / 2,
             'top' : 100
           })
           .show()
           .click(function() {
             $enlargedCover.click();
           });
         $priceBadge
           .css({
             'right': ($('body').width() - 360) / 2,
             'top' : 100
           })
           .text(price)
           .show();
        
         event.preventDefault();
       })
       .hover(function() {
         $enlargeRollover.appendTo(this).show();
       }, function() {
         $enlargeRollover.hide();
       });
   };
 
   setUpCovers();
});