ansaurus

Question

Using jQuery Cycle and ajax to dynamically create a slide show - images don't load immediately

Answer 1

A:

Any idea how to get it to work with a regular get? This is what I am using:

    $.get(loadUrl, { id: id },
     function(data){
          $('#loader').remove();
             window.scrollTo(0,0);
          $('#display').html(data);             
          startCycle();
          });

function startCycle() {
     //trigger cycle
     $('.images').cycle({
          fx:     'fade',
          speed:  500,
          timeout: 0,
          pager: '#sub-nav .root',
          prev: "#sub-nav .prev",
          next: "#sub-nav .next",
          before: onAfter
      });

     $("#sub-nav a:first").addClass("first");
} //start cycle

The content that is being returned by ajax is a group of images as well as some text content.

broken45 2010-08-10 05:59:58

You should probably post this as a separate question. Also, more details are needed - what do you mean by 'group of images'? File names? Actual image data? And what part isn't working? Are the images loading? Not loading?

kevinmajor1 2010-08-11 14:20:13

Answer 2

+1 A:

There are two possible reasons ( or more that I am missing ) that it could be loading oddly:

1) your call isn't encompassed in a document.ready ( even though your jscript is at the bottom of the page ) - this might not be the issue.. just a thought

i.e. create a function to hold your loading and do a:

$(document).ready(function(){ loadImages(); startSlideShow(); });

2) The other thing could be that on the first load, the images haven't downloaded to your browser. You could do a check to see if all the images have finished loading ( use a counter and isloaded on all images etc ) before you show the cycle component. This could fix it for chrome.

On another note: The built in .each is way way faster than a "for" loop. ( specially for IE and many items.. )

i.e. $(newImages).each(function(){ $('#slideshow').append($(this)); });

Corpsekicker 2010-08-10 06:43:35

Regarding 1, I wouldn't think that having the script at the bottom would make a difference, as everything I've read suggests that's the same as waiting for the DOM to load. I'm still looking into it, however, as you're not the first person to tell me to use .ready() even with the script at the bottom. Good tip with .each(). I'm still a jQuery newbie, so it didn't occur to me to use it.

kevinmajor1 2010-08-10 11:47:52

Answer 3

A:

Since I wrote the original answer, I found that the same problem was occurring even with the timeout. I talked to the developer of the plugin on the jQuery forums, and his working example used $.getJSON rather than $.get. I switched to that, and it worked perfectly. I can only assume that there's some slight, subtle difference between how $.getJSON parses data and how I was doing it with the manual invocation of the parse function. Whether it's an actual code issue or timing issue of when the parsing is done remains a mystery.

My solution:

<!doctype html>
<html lang="en-us">
    <head>
        <title>jQuery Cycle test</title>
        <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>

        <style>
            #slideshow a { margin: 0; padding: 0; color: #fff; display: block; }
            img { width: 305px; height: 278px; }
        </style>
    </head>

    <body>
        <div id="slideshow">
        </div>
    </body>

    <script type="text/javascript">     
        $.getJSON('slideshow.php', function(images){
            for(var i = 0; i < images.length; ++i){
                $('#slideshow').append('<a href="images/' + images[i]['src'] + '"><img src="images/' + images[i]['src'] + '" alt="" /></a>');
            }

            $('#slideshow').cycle({fx: 'cover', direction: 'right', timeout: 3000, speed: 300});
        });
    </script>

</html>

kevinmajor1 2010-08-10 11:44:12

ansaurus

tags:

views:

answers:

Using jQuery Cycle and ajax to dynamically create a slide show - images don't load immediately

related questions