jQuery: The Write Less, Do More JavaScript Library

Cycle Plugin + Jquery.Preload Plugin

View: New views
2 Messages — Rating Filter:   Alert me  

Cycle Plugin + Jquery.Preload Plugin

by Stella21 :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message


Could one of the javascript gurus please assist me with this?

This works in firefox, but does nothing at all in IE. I have no clue
as to how to make this right:(




<script type="text/javascript">
                jQuery(function( $ ){
                        $('#loading').fadeIn('fast');
                                $.preload( '#gal img', {//the first argument is a selector to the
images
                                onRequest:request,
                                onComplete:complete,
                                onFinish:finish,
                                placeholder:'http://farm4.static.flickr.com/
3096/2541727983_352b01f7e8.jpg',//this is the really important option
                                notFound:'http://farm3.static.flickr.com/
2416/2518341744_55a2ecb9f3.jpg',//optional image if an image wasn't
found
                                threshold:1 //'1' is the default, how many at a time, to load.
                        });

                        function update( data ){
                                $('#done').html( ''+data.done );
                                $('#total').html( ''+data.total );
                                $('#loaded').html( ''+data.loaded );
                                $('#failed').html( ''+data.failed );
                        };
                        function complete( data ){
                                update( data );
                                $('#image-next').html( 'none' );//reset the "loading: xxxx"
                                $('#image-loaded').html( data.image );
                        };
                        function request( data ){
                                update( data );
                                $('#image-next').html( data.image );//set the "loading: xxxx"
                        };
                        function finish(){//hide the summary
                                $('#loading').fadeOut(500);
                                $('#gal').fadeIn(1500);

                        };

      $('#gal')
   .after('<div id="picnav">')
   .cycle({
    fx:    'fade',
    speed:  800,
         pager:  '#picnav'
    });

   $('a#slide-show').mouseover(function() {
        $('#slider').show('slow');
        return false;
  });
  $('a#slide-show').mouseout(function() {
        $('#slider').fadeOut(2000);
        return false;
  });


  $('#slider').mouseover(function() {
        $('#slider').stop();
        return false;
  });
  $('#slider').mouseout(function() {
        $('#slider').fadeOut(2000);
        return false;
  });


});

</script>




Sample  at http://photo.byethost22.com/photo/home/sample-gallery-1

Any help at all would be greatly appreciated.


Re: Cycle Plugin + Jquery.Preload Plugin

by Stella21 :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Nevermind.

I figured it out (entirely by accident) and all is well.

:)
Stella21 wrote:
Could one of the javascript gurus please assist me with this?

This works in firefox, but does nothing at all in IE. I have no clue
as to how to make this right:(




<script type="text/javascript">
                jQuery(function( $ ){
                        $('#loading').fadeIn('fast');
                                $.preload( '#gal img', {//the first argument is a selector to the
images
                                onRequest:request,
                                onComplete:complete,
                                onFinish:finish,
                                placeholder:'http://farm4.static.flickr.com/
3096/2541727983_352b01f7e8.jpg',//this is the really important option
                                notFound:'http://farm3.static.flickr.com/
2416/2518341744_55a2ecb9f3.jpg',//optional image if an image wasn't
found
                                threshold:1 //'1' is the default, how many at a time, to load.
                        });

                        function update( data ){
                                $('#done').html( ''+data.done );
                                $('#total').html( ''+data.total );
                                $('#loaded').html( ''+data.loaded );
                                $('#failed').html( ''+data.failed );
                        };
                        function complete( data ){
                                update( data );
                                $('#image-next').html( 'none' );//reset the "loading: xxxx"
                                $('#image-loaded').html( data.image );
                        };
                        function request( data ){
                                update( data );
                                $('#image-next').html( data.image );//set the "loading: xxxx"
                        };
                        function finish(){//hide the summary
                                $('#loading').fadeOut(500);
                                $('#gal').fadeIn(1500);

                        };

      $('#gal')
   .after('<div id="picnav">')
   .cycle({
    fx:    'fade',
    speed:  800,
         pager:  '#picnav'
    });

   $('a#slide-show').mouseover(function() {
        $('#slider').show('slow');
        return false;
  });
  $('a#slide-show').mouseout(function() {
        $('#slider').fadeOut(2000);
        return false;
  });


  $('#slider').mouseover(function() {
        $('#slider').stop();
        return false;
  });
  $('#slider').mouseout(function() {
        $('#slider').fadeOut(2000);
        return false;
  });


});

</script>




Sample  at http://photo.byethost22.com/photo/home/sample-gallery-1

Any help at all would be greatly appreciated.
LightInTheBox - Buy quality products at wholesale price