Jump to content

jQuery Cycle + ajax: a match made in hell


KevinM1

Recommended Posts

I'm currently trying to create a simple carousel navigation pane/window/box/whatever for a client.  He wants it to be as simple as possible to setup, so we agreed on a dumb "I upload images to a specific folder, the code does the rest" system.

 

The PHP portion works fine.  I can obtain the images, stuff their file names in an array, and json_encode them without a hitch.

 

My problems come from Cycle.  I have two main issues:

 

1. The images don't fully load on the first visit.  I thought it was a runtime issue, but even after using a timeout, the problem remains.  What's odd is that I can see a portion of the images, and can see them animating properly, but it's only on subsequent viewings that the images are fully visible.

 

2. In addition to problem 1, Chrome shows the last image first.  Bwaaah...?

 

I've spent the good portion of two days trying to debug this.  I've read most of what counts as documentation on the Cycle site (horrendous, btw), and attempted to incorporate its simplistic demo code into mine.  I've attempted to hook my ajax into Cycle's exposed callbacks.  Hell, I've even shown my code to the plugin's developer and talked to him on Twitter about it.  No luck.  I'm just about ready to ditch it and get another carousel solution, but since it's half working, I figure I'd give it one last shot.

 

So, below is my code.  I await the verdict.

 

<!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">
	$.get('slideshow.php', {start : "true"}, function(data){
		var images = JSON.parse(data);

		for(var image in images){
			$('#slideshow').append('<a href="images/' + images[image] + '"><img src="images/' + images[image] + '" alt="" /></a>');
		}

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

</html>

Link to comment
Share on other sites

It works fine with static images being manually injected/jQuery-appended into the container div.

 

Regarding the Chrome issue, where the last image is shown first, it looks like it's a bug with how Chrome itself parses JSON.  The JSON my PHP script returns is in the right order.  Alerting it in Chrome shows that it is.  Once the JSON is parsed, that's when the error occurs.  It still happens regardless of whether I use JSON.parse or jQuery.parseJSON.  At least it looks like it isn't something on my end.

Link to comment
Share on other sites

Actually, I 'figured' it out.  It looks like using $.getJSON did the trick.  Not exactly sure why, as my returned JSON is exactly the same.  Must have something to do with the way it's parsed.  $.getJSON parses it automatically, so there must be some slight difference between that and me manually parsing it.

Link to comment
Share on other sites

Yup, but with jQuery.  I mean, functionally, there should be no difference between:

 

$.get('slideshow.php', function(data){
   var images = $.parseJSON(data);

   for(var image in images){ // used for..in here because my keys were unix timestamps.
      $('#slideshow').append('<img src="images/' + images[image] + '" alt="" />');
   }
});

 

and

 

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

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.