Quick Jquery Load Help

[suarve]

Hi,

I'm basically trying to load a div using a ajax - displaying a loading image until the content has loaded. The client wants the loading image to display for a couple of seconds before the content appears. How can I do this? My code (that works) is below:

    $('#content-full').html('<p><img src="ajax-loader.gif" width="100" height="100" /></p>');
    $('#content-full').load("gallery.php");

Thanks

 

[suarve]

Think I solved it!

Just added the following at the bottom of gallery.php

sleep(3);

 

[suarve]

Actually, while I'm doing JQuery, is there any way to combine the following into a single function?

    $('div.thumb img').hover(function() {
        $(this).fadeTo(200, 0.55);
    }, function() {
        $(this).fadeTo(200,1.0);
    });
    
    $('div.thumb-new-line img').hover(function() {
        $(this).fadeTo(200, 0.55);
    }, function() {
        $(this).fadeTo(200,1.0);
    });

 

[suarve]

Bah, the lightbox plugin I was using has stopped working now

As I'm using .load to load gallery.php. If I don't use .load and just stick with plain html its fine, as soon as I try to load the content via ajax the plugin fails. Any idea how I would work around this?

Thanks

 

[suarve]

For the question in your first post, use setTimeout in Javascript so that the wait is client-side, not server-side. It's a silly thing to do, though: why unnecessarily slow down the user?

Using PHP was the only way I could think of. Didn't know you could do it via JavaScript.

   $('div.thumb img, div.thumb-new-line img').hover(function() {
        $(this).fadeTo(200, 0.55);
    }, function() {
        $(this).fadeTo(200,1.0);
    });

Cheers.


With my problem about the lightbox not working with the funtion well I think I solved it - the load function uses get by default and without any parameters passed the funtion. When I passed it some parameters and the function that initialises the lightbox it all worked. E.g.

    $('#gallery').load("gallery.php",{limit: 50}, function(){ $("a[rel^='gallery-image']").prettyPhoto({
                                                                            animationSpeed: 'normal', 
                                                                            padding: 40, 
                                                                            opacity: 0.65, 
                                                                            showTitle: true, 
                                                                            allowresize: true, 
                                                                            counter_separator_label: ' of ', 
                                                                            theme: 'light_rounded',
                                                                            callback: function(){}
                                                                            });
                                                                               $('#loading').hide().fadeOut("slow");
                                                                            $('#gallery').hide().slideDown("normal");
     });