Jumping newly create img

JavaScript
1

Hi I am working on a image scroller with just a basic ‘click to get the large image’ functionality. So far the JQuery is pretty simple. For the scroller functionality I am using JCarousel and then just writing the part to trap the filename and load the large image.

For the most part I have this working: http://www.jbmhcrystalball.com/ozcauze_photos2.php

The jQuery code is

$(document).ready(function(){
    $("#mycarousel img").click(function() {
        $("#mycarousel img").focus()
          var file_name = $(this).attr('alt');
            $('#current').fadeOut('slow', function() {
            $('#current').remove();
            });
        $('<img />', {id: 'current', src: './gallery/i/photos/' + file_name}).appendTo('#large_img').fadeIn('slow');
    });
});

The two pictures with the ladies in them currently have large images set-up. If you click on one of the ladies thumbnails the new image display centered behind the scroller and then jumps up to its’ proper location - above the scroller.

Given the way that I am doing this can you give me any suggestions on how to stop this jump?

Your help is appreciated.
Steve

2

Hi,

I solved this. If anyone else wants just a basic carousel and an sudo-crossfading image and they use jQuery then this is how I did it and it works consistently well IE6 - IE8, and Firefox 3.x

You need jquery, jcarousel and the rest of the code below;

<!--
  jQuery library
-->
<script type="text/javascript" src="[./gallery/js/jquery-1.4.2.min.js](http://www.sitepoint.com/forums/view-source:http://www.jbmhcrystalball.com/gallery/js/jquery-1.4.2.min.js)"></script>

<!--
  jCarousel library
-->
<script type="text/javascript" src="[./gallery/js/jquery.jcarousel.min.js](http://www.sitepoint.com/forums/view-source:http://www.jbmhcrystalball.com/gallery/js/jquery.jcarousel.min.js)"></script>


<script type="text/javascript">

jQuery(document).ready(function() {
    jQuery(document).ready(function() {
        jQuery('#mycarousel').jcarousel({
            wrap: 'circular'
        });
    });
});


$(document).ready(function(){
      $(' <img src="./gallery/i/photos/PBJ_1685.JPG" alt="PBJ_1685.JPG" width="100" height="80" /> ');
      $(' <img src="./gallery/i/photos/PBJ_1681.JPG" alt="PBJ_1681.JPG" width="100" height="80"   /> ');
      $(' <img src="./gallery/i/photos/PBJ_1701.JPG" alt="PBJ_1701.JPG" width="100" height="80"   /> ');
      $(' <img src="./gallery/i/photos/PBJ_1704.JPG" alt="PBJ_1704.JPG" width="100" height="80"   /> ');
      $(' <img src="./gallery/i/photos/PBJ_1716.JPG" alt="PBJ_1716.JPG" width="100" height="80"   /> ');
      $(' <img src="./gallery/i/photos/PBJ_1730.JPG" alt="PBJ_1730.JPG" width="100" height="80"   /> ');
      $(' <img src="./gallery/i/photos/PBJ_1744.JPG" alt="PBJ_1744.JPG" width="100" height="80"   /> ');
        
      $('#loader').removeClass('vis');
      $('#loader').remove();
      $('#wrap').removeClass('no-vis');
      $('#wrap').addClass('vis').fadeIn('slow');
      $("#mycarousel img").click(function() {
        $("#mycarousel img").focus()
        $("#instructions").fadeOut('fast');
        var file_name = $(this).attr('alt');

        if ($('#current')) {
          $('i#current').fadeOut('slow');
          $('#current').remove();
         };
        $('<img />', {id: 'current',  src: './gallery/i/photos/' + file_name}).fadeIn('slow').appendTo('#large_img');
        $('#img_name').html(file_name);
    });
});
</script>

Here is the html for the photo and photo caption

<img id='photo_title' src='./images/photos/photo_page_title.png'</img>
<p id='loader' class='vis'></p>
<div id="wrap" class='no-vis'>
<p  id='instructions'>Scroll down and click the thumbnails to view additional photos.</p>
<table>
  <tr>
    <td id='large_img'>
      <img id='current' src="./gallery/i/photos/PBJ_1685.JPG" alt="PBJ_1685.JPG" />
    </td>
  </tr>
  <tr>
    <td id='img_name'>
      PBJ_1685.JPG
    </td>
  </tr>
</table>
</div>

and the carousel HTML

<ul id="mycarousel" class="jcarousel-skin-tango">
    <li> <img src="./gallery/i/photos/PBJ_1685.JPG" alt="PBJ_1685.JPG" width="100" height="80" /> </li>
    <li> <img src="./gallery/i/photos/PBJ_1681.JPG" alt="PBJ_1681.JPG" width="100" height="80"   /> </li>
    <li> <img src="./gallery/i/photos/PBJ_1701.JPG" alt="PBJ_1701.JPG" width="100" height="80"   /> </li>
    <li> <img src="./gallery/i/photos/PBJ_1704.JPG" alt="PBJ_1704.JPG" width="100" height="80"   /> </li>
    <li> <img src="./gallery/i/photos/PBJ_1716.JPG" alt="PBJ_1716.JPG" width="100" height="80"   /> </li>
    <li> <img src="./gallery/i/photos/PBJ_1730.JPG" alt="PBJ_1730.JPG" width="100" height="80"   /> </li>
    <li> <img src="./gallery/i/photos/PBJ_1744.JPG" alt="PBJ_1744.JPG" width="100" height="80"   /> </li>                    
</ul>

Here is the site where it is implemented this link should be good for at least a year: http://www.jbmhcrystalball.com/ozcauze_photos.php
Hope this helps someone else
Regards,
Steve