SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    6 Thread(s)

    Jumping newly create img

    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
    Code:
    $(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
    ictus==""

  2. #2
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    6 Thread(s)
    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;

    Code:
    <!--
      jQuery library
    -->
    <script type="text/javascript" src="./gallery/js/jquery-1.4.2.min.js"></script>
    
    <!--
      jCarousel library
    -->
    <script type="text/javascript" src="./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
    HTML Code:
    <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
    HTML Code:
    <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
    ictus==""


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •