Supersized transition effects problem, help meh if u can :)

Supersized transition effects problem, help meh if u can :)

I simply want to change the effect from this silly slide in / slide out to a nice fade but cant get it to work in the .php file of my wordpress template
this is the problem area i think: I would sure appreciate any advise! 

  1. $tf_bg_img_next.css('left',$tf_bg_img.width());
  2. //now slide it to the viewport
  3. $tf_bg_img_next.stop().animate({
  4. left  : 0
  5. },1000);
  6.                                             // I try and replace this with...and nothing :(
  7.                                            $tf_bg_img_next.stop().fadeIn(1000);
  8. $tf_bg_img_next.css('left',-$tf_bg_img.width());
  9. //we want the old image to slide in the same direction, out of the viewport
  10. var slideTo = (dir == 'tb')?$tf_bg_img.width() + 'px':jQuery(window).width() + 'px';
  11. $tf_bg_img.stop().animate({
  12. left  : slideTo
  13. },1000,function(){
  14. //hide it
  15. jQuery(this).hide();
  16. //the $tf_bg_img is now the shown image
  17. $tf_bg_img = $tf_bg_img_next;
  18. //show the description for the new image
  19.    if(jQuery(window).width() < 767){ $tf_content_wrapper.css('padding-top',$tf_bg_img.height()); }
  20. $tf_content_wrapper.children()
  21.    .eq(current)
  22.        .fadeIn(500);
  23. });

  • - FULL CODE -
    2. <script type="text/javascript">
    3. /*
    4. the images preload plugin
    5. */
    6. (function($) {
    7. $.fn.preload = function(options) {
    8. var opts = $.extend({}, $.fn.preload.defaults, options);
    9. o = $.meta ? $.extend({}, opts, this.data()) : opts;
    10. var c = this.length,
    11. l = 0;
    12. return this.each(function() {
    13. var $i = jQuery(this);
    14. jQuery('<img/>').load(function(i){
    15. ++l;
    16. if(l == c) o.onComplete();
    17. }).attr('src',$i.attr('src'));
    18. });
    19. };
    20. $.fn.preload.defaults = {
    21. onComplete : function(){return false;}
    22. };
    23. })(jQuery);
    24. </script>
    25. <script type="text/javascript">
    26. jQuery(function() {
    27. var $tf_bg = jQuery('#tf_bg'),
    28. $tf_bg_images = $tf_bg.find('img'),
    29. $tf_bg_img = $tf_bg_images.eq(0),
    30. total = $tf_bg_images.length,
    31. current = 0,
    32. $tf_content_wrapper = jQuery('#tf_content_wrapper'),
    33. $tf_next = jQuery('#tf_next'),
    34. $tf_prev = jQuery('#tf_prev'),
    35. $tf_loading = jQuery('#tf_loading');
    37. //preload the images
    38. $tf_bg_images.preload({

    40. onComplete : function(){
    41. $tf_loading.hide();
    42. init();
    43. }
    44. });
    46. //shows the first image and initializes events
    47. function init(){
    48. //get dimentions for the image, based on the windows size
    49. var dim = getImageDim($tf_bg_img);
    50. //set the returned values and show the image
    51. $tf_content_wrapper_padding = parseInt($tf_bg_img.css('height'));
    52. $tf_content_wrapper.find('div:not(:first-child)').css('display','none');
    53. if(jQuery(window).width() < 767){ $tf_content_wrapper.css('padding-top',$tf_content_wrapper_padding+'px'); }
    54. $tf_bg_img.css({
    55. width : dim.width,
    56. height : dim.height,
    57. left : dim.left,
    58. //top : dim.top
    59. }).fadeIn();
    60. $tf_content_wrapper.fadeIn();

    62.    
    63. //resizing the window resizes the $tf_bg_img
    64. jQuery(window).bind('resize',function(){
    65. if(jQuery(window).width() > 767){
    66. var dim = getImageDim($tf_bg_img);
    67. $tf_bg_img.css({
    68. width : dim.width,
    69. height : dim.height,
    70. left : dim.left,
    71. //top : dim.top
    72. });
    73. }
    74. else{
    75. jQuery('.full-width-container').css('padding-top','0');
    76. resize($tf_bg_img);
    77. $tf_content_wrapper.css('padding-top',(parseInt($tf_bg_img.css('height'))));

    79. }
    80. });
    82. //expand and fit the image to the screen
    83. jQuery(window).load(function(){
    86.   if(jQuery(window).width() < 767){
    87.   $tf_bg_images.each(function(){
    88.                                resize($tf_bg_img);
    89. });
    91. }
    92. if(jQuery(window).width() > 767){
    93. if($tf_bg_img.is(':animated'))
    94. return false;
    95. var dim = getImageDim($tf_bg_img);

    97. $tf_bg_img.animate({
    98. width : dim.width,
    99. height : dim.height,
    100. //top : dim.top,
    101. left : dim.left
    102. },350);
    103. }
    104. }); 
    106. //click the arrow down, scrolls down
    107. $tf_next.bind('click',function(){
    108. if($tf_bg_img.is(':animated'))
    109. return false;
    110. scroll('tb');
    111. });
    113. //click the arrow up, scrolls up
    114. $tf_prev.bind('click',function(){
    115. if($tf_bg_img.is(':animated'))
    116. return false;
    117. scroll('bt');
    118. });
    121. //key events - down / up button trigger the scroll down / up
    122. jQuery(document).keydown(function(e){
    123. if($tf_bg_img.is(':animated'))
    124. return false;
    126. switch(e.keyCode){
    127. case 37:
    128. scroll('bt');
    129. break;

    131. case 39:
    132. scroll('tb');
    133. break;
    134. }
    135. });
    136. setInterval(function() {
    137. scroll('bt');
    138. }, 5000); 
    139. jQuery(document).swipe( {
    140.  swipeLeft:function(event, direction, distance, duration, fingerCount) {
    141.     scroll('tb');
    142.  },
    143.  swipeRight:function(event, direction, distance, duration, fingerCount) {
    144.     scroll('bt');
    145.  },
    146.  threshold:100
    147. });
    148. }
    150. //show next / prev image
    151. function scroll(dir){
    152. //if dir is "tb" (top -> bottom) increment current, 
    153. //else if "bt" decrement it
    154. current = (dir == 'tb')?current + 1:current - 1;
    156. //we want a circular slideshow, 
    157. //so we need to check the limits of current
    158. if(current == total) current = 0;
    159. else if(current < 0) current = total - 1;
    162. //we get the next image
    163. var $tf_bg_img_next = $tf_bg_images.eq(current),
    164. //its dimentions
    165. dim = getImageDim($tf_bg_img_next),
    166. //the top should be one that makes the image out of the viewport
    167. //the image should be positioned up or down depending on the direction
    168. left = (dir == 'tb')?jQuery(window).width() + 'px':-parseFloat(dim.width,10) + 'px';
    170. //set the returned values and show the next image
    171. $tf_bg_img_next.css({
    172. width : dim.width,
    173. height : dim.height,
    174. left : left,
    176. }).show();

    178. //the top should be one that makes the image out of the viewport
    179. if(jQuery(window).width() < 767){
    180. resize($tf_bg_img_next);
    181. } 
    183. $tf_bg_img_next.css('left',$tf_bg_img.width());
    184. //now slide it to the viewport
    185. $tf_bg_img_next.stop().animate({
    186. left : 0
    187. },1000);
    188. $tf_bg_img_next.css('left',-$tf_bg_img.width());
    189. //we want the old image to slide in the same direction, out of the viewport
    190. var slideTo = (dir == 'tb')?$tf_bg_img.width() + 'px':jQuery(window).width() + 'px';
    191. $tf_bg_img.stop().animate({
    192. left : slideTo
    193. },1000,function(){
    194. //hide it
    195. jQuery(this).hide();
    196. //the $tf_bg_img is now the shown image
    197. $tf_bg_img = $tf_bg_img_next;
    198. //show the description for the new image
    199.   if(jQuery(window).width() < 767){ $tf_content_wrapper.css('padding-top',$tf_bg_img.height()); }
    200. $tf_content_wrapper.children()
    201.   .eq(current)
    202.       .fadeIn(500);
    203. });


    207. //hide the current description
    208. $tf_content_wrapper.children(':visible')
    209.   .hide()
    211. }
    213. //animate the image to fit in the viewport
    214. function resize($img){
    215. var w_w = jQuery(window).width(),
    216. w_h = jQuery(window).height(),
    217. i_w = $img.width(),
    218. i_h = $img.height(),
    219. r_i = i_h / i_w,
    220. new_w,new_h;
    222. if(i_w > i_h){
    223. new_w = w_w;
    224. new_h = w_w * r_i;
    226. if(new_h > w_h){
    227. new_h = w_h;
    228. new_w = w_h / r_i;
    229. }
    230. }
    231. else{
    232. new_h = w_w * r_i;
    233. new_w = w_w;
    234. }
    236. $img.css({
    237. width : new_w + 'px',
    238. height : new_h + 'px',
    239. top : '0px',
    240. left : '0px'
    241. });
    242. }
    244. //get dimentions of the image, 
    245. //in order to make it full size and centered
    246. function getImageDim($img){
    247. var w_w = jQuery(window).width(),
    248. w_h = jQuery(window).height(),
    249. r_w = w_h / w_w,
    250. i_w = $img.width(),
    251. i_h = $img.height(),
    252. r_i = i_h / i_w,
    253. new_w,new_h,
    254. new_left,new_top;
    256. if(r_w > r_i){
    257. new_h = w_h;
    258. new_w = w_h / r_i;
    259. }
    260. else{
    261. new_h = w_w * r_i;
    262. new_w = w_w;
    263. }


    266. return {
    267. width : new_w + 'px',
    268. height : new_h + 'px',
    269. left : (w_w - new_w) / 2 + 'px',
    270. top : (w_h - new_h) / 2 + 'px'
    271. };
    272. }
    273. });
    274.         </script>