turn a fadeto in fadein

turn a fadeto in fadein

hello guys
hope to post in the right place

i have a slideshow gallery with a big preview and i would like to turn a fadeto effect in fadein.

i've tried everything but nothing works

this is a flowplayer script

the html
  1. <div id="image_wrap" style="opacity: 1;">
        <!-- Initially the image is a simple 1x1 pixel transparent GIF -->
        <img height="395" width="435" src="menu/gallery/1.jpg">

    </div>

    <!-- wrapper for navigator elements -->
    <div class="navi"></div>



    <!-- "previous page" action -->
    <a class="prev browse left"></a>

    <!-- root element for scrollable -->
    <div class="scrollable" id=browsable>  
      
       <!-- root element for the items -->
       <div class="items">
      
          <!-- 1-4 -->
          <div>
             <img src="menu/gallery/1.jpg" width="900" height="619" alt="dish" />
             <img src="menu/gallery/2.jpg" width="900" height="619" alt="dish" />
             <img src="menu/gallery/3.jpg" width="900" height="619" alt="dish" />
             <img src="menu/gallery/4.jpg" width="900" height="619" alt="dish" />
          </div>
         
          <!-- 5-8 -->
          <div>
          <img src="menu/gallery/5.jpg" width="900" height="619" alt="dish" />
          <img src="menu/gallery/6.jpg" width="900" height="619" alt="dish" />  
          <img src="menu/gallery/7.jpg" width="900" height="619" alt="dish" />
          <img src="menu/gallery/8.jpg" width="900" height="619" alt="dish" />
          </div>
         
           <!-- 9-12 -->
          <div>
          <img src="menu/gallery/9.jpg" width="900" height="619" alt="dish" />
          <img src="menu/gallery/10.jpg" width="900" height="619" alt="dish" />  
          <img src="menu/gallery/11.jpg" width="900" height="619" alt="dish" />
          <img src="menu/gallery/12.jpg" width="900" height="619" alt="dish" />
          </div>
         
       </div>
      
    </div>

    <!-- "next page" action -->
    <a class="next browse right"></a>

















































and the jquery code
  1. // initialize scrollable together with the navigator plugin
    $("#browsable").scrollable().navigator();

    $(function() {

    $(".scrollable").scrollable();

    $(".items img").click(function() {

        // see if same thumb is being clicked
        if ($(this).hasClass("active")) { return; }

        // calclulate large image's URL based on the thumbnail URL (flickr specific)
        var url = $(this).attr("src").replace("_t", "");

        // get handle to element that wraps the image and make it semi-transparent
        var wrap = $("#image_wrap").fadeTo("medium", 0.5);
       
        // the large image from www.flickr.com
        var img = new Image();


        // call this function after it's loaded
        img.onload = function() {

            // make wrapper fully visible
            wrap.fadeTo("fast", 1);

            // change the image
            wrap.find("img").attr("src", url);

        };

        // begin loading the image from www.flickr.com
        img.src = url;

        // activate item
        $(".items img").removeClass("active");
        $(this).addClass("active");

    // when page loads simulate a "click" on the first image
    }).filter(":first").click();
    });