KevinM1 Posted August 6, 2010 Share Posted August 6, 2010 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> Quote Link to comment https://forums.phpfreaks.com/topic/210017-jquery-cycle-ajax-a-match-made-in-hell/ Share on other sites More sharing options...
JasonLewis Posted August 7, 2010 Share Posted August 7, 2010 Does it do the same thing with static images being defined in the JavaScript, and not being dynamically loaded with AJAX? Quote Link to comment https://forums.phpfreaks.com/topic/210017-jquery-cycle-ajax-a-match-made-in-hell/#findComment-1096183 Share on other sites More sharing options...
KevinM1 Posted August 7, 2010 Author Share Posted August 7, 2010 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. Quote Link to comment https://forums.phpfreaks.com/topic/210017-jquery-cycle-ajax-a-match-made-in-hell/#findComment-1096293 Share on other sites More sharing options...
JasonLewis Posted August 8, 2010 Share Posted August 8, 2010 With the chrome issue, have you tried it with a plugin such as http://code.google.com/p/jquery-json/ What if you preload the images before running the cycle? Quote Link to comment https://forums.phpfreaks.com/topic/210017-jquery-cycle-ajax-a-match-made-in-hell/#findComment-1096494 Share on other sites More sharing options...
KevinM1 Posted August 8, 2010 Author Share Posted August 8, 2010 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. Quote Link to comment https://forums.phpfreaks.com/topic/210017-jquery-cycle-ajax-a-match-made-in-hell/#findComment-1096712 Share on other sites More sharing options...
JasonLewis Posted August 9, 2010 Share Posted August 9, 2010 Smells like a bug. Quote Link to comment https://forums.phpfreaks.com/topic/210017-jquery-cycle-ajax-a-match-made-in-hell/#findComment-1096800 Share on other sites More sharing options...
KevinM1 Posted August 9, 2010 Author Share Posted August 9, 2010 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="" />'); } }); Quote Link to comment https://forums.phpfreaks.com/topic/210017-jquery-cycle-ajax-a-match-made-in-hell/#findComment-1096946 Share on other sites More sharing options...
JasonLewis Posted August 9, 2010 Share Posted August 9, 2010 You wouldn't think so. But apparently there is. Oh well, send that to the jQuery devs. I would've thought that $.getJSON would use the same parsing as $.parseJSON, I guess everyone would think that. Quote Link to comment https://forums.phpfreaks.com/topic/210017-jquery-cycle-ajax-a-match-made-in-hell/#findComment-1096950 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.