Jquery + PHP echo issue

[jason360]

Hey guys,

 

Stuck on this for a couple days now.   I am using a 3rd party video gallery function that uses jquery.

 

http://codecanyon.net/item/responsive-video-gallery-html5-youtube-vimeo/2918602

 

The gallery works great when the list is hard coded, but as soon as I use a PHP mysql query to echo out the list the video gallery becomes buggy and hangs (works about 25% of the time). 

 

The higher I set the limit on the query the worse it performs (works great if I limit it to only 1).

 

Any ideas what could be the issue?  I am completely out of ideas.  Is my PHP code bad?

 

This list hard coded list works perfect:

<ul id='mix1' data-address="mix1">
<li data-address='youtube_single1' data-type='youtube_single' data-path='http://gdata.youtube.com/feeds/api/videos/SVdc8ec_bGg?v=2&format=5&alt=jsonc' ></li>
<li data-address='youtube_single2' data-type='youtube_single' data-path='http://gdata.youtube.com/feeds/api/videos/WwRrKaq0IyY?v=2&format=5&alt=jsonc' ></li>
<li data-address='youtube_single3' data-type='youtube_single' data-path='http://gdata.youtube.com/feeds/api/videos/36kmXKP_l7I?v=2&format=5&alt=jsonc' ></li>
<li data-address='youtube_single4' data-type='youtube_single' data-path='http://gdata.you<li data-address='youtube_single5' data-type='youtube_single' data-path='http://gdata.youtube.com/feeds/api/videos/WwRrKaq0IyY?v=2&format=5&alt=jsonc' ></li>
<li data-address='youtube_single6' data-type='youtube_single' data-path='http://gdata.youtube.com/feeds/api/videos/36kmXKP_l7I?v=2&format=5&alt=jsonc' ></li>
<li data-address='youtube_single7' data-type='youtube_single' data-path='http://gdata.youtube.com/feeds/api/videos/36kmXKP_l7I?v=2&format=5&alt=jsonc' ></li>
<li data-address='youtube_single8' data-type='youtube_single' data-path='http://gdata.youtube.com/feeds/api/videos/36kmXKP_l7I?v=2&format=5&alt=jsonc' ></li>
<li data-address='youtube_single9' data-type='youtube_single' data-path='http://gdata.youtube.com/feeds/api/videos/36kmXKP_l7I?v=2&format=5&alt=jsonc' ></li>
<li data-address='youtube_single10' data-type='youtube_single' data-path='http://gdata.youtube.com/feeds/api/videos/36kmXKP_l7I?v=2&format=5&alt=jsonc' ></li>
<li data-address='youtube_single11' data-type='youtube_single' data-path='http://gdata.youtube.com/feeds/api/videos/36kmXKP_l7I?v=2&format=5&alt=jsonc' ></li>
<li data-address='youtube_single12' data-type='youtube_single' data-path='http://gdata.youtube.com/feeds/api/videos/36kmXKP_l7I?v=2&format=5&alt=jsonc' ></li>
</ul>

Once I use the PHP query and echo for the list the gallery becomes buggy:

<ul id='mix1' data-address="mix1">
                                          
                                          
										
                                              
                                            <?php  
                                            $query = mysql_query('SELECT video_number FROM videos WHERE video_item_id="'.$pid.'" ORDER BY RAND() LIMIT 10');
                        
                                            $i = 0;
                        
                                            class myCounter implements Countable {
                                                    public function count() {
                                                        static $count = 0;
                                                        return ++$count;
                                                    }
                                                }
                                                
                                                $counter = new myCounter;
                        
                                            while ($row = mysql_fetch_array($query))
                        
                                            {
                        
                                                if($i % 10 === 0)
                        
                                                {
                        
                        
                                                }
												
												echo "<li data-address='youtube_single".count($counter)."' data-type='youtube_single' data-path='http://gdata.youtube.com/feeds/api/videos/".$row['video_number']."?v=2&format=5&alt=jsonc' ></li>";
                                               
                                                 $i++;		
                                            }
                                            
                                            ?>
                                          </ul>

[.josh]

dumb question: did you view your source and compare it to what it looks like when you hardcode it? if they are exactly the same, then it sounds like you may have some database issues and/or optimization to figure out. How many rows are in your table?

[jason360]

Hey josh,

 

Yes, I compared them and re-compared them.  The hard code is actually a copy of what is echoed. 

 

I am kind of guessing it may be my database.  Its hosted with godaddy.  It was actually working fine a few weeks ago then turned buggy out of nowhere.

 

There are 7 rows in my videos table.

 

Thanks!

[.josh]

okay, well if you are absolutely 150% certain the dynamic output matches the hardcoded output, then maybe you need to provide a little more context. As far as php is concerned, it's all text. Even if your database were taking a while to return stuff.. it's still all text, and things being buggy and hanging is a client-side issue.. unless you are using this alongside with ajax... is your clientside code calling this script onclick or hover or something? Things don't seem to be adding up here..please provide more context.

[jason360]

Hey Josh.  I am going to check one more time copying what is echoed into hard code.  But in the meantime, here is all the script and JS powering it all.  It is using document.ready as you can see.

<!-- video gallery -->
            <link rel="stylesheet" type="text/css" href="http://www.site.com/css/video-gallery/jquery.jscrollpane.css" media="all" />
            <link rel="stylesheet" type="text/css" href="http://www.site.com/css/video-gallery/videoGallery_playlist_v_right.css" />
            <!--[if lte IE 8 ]><link rel="stylesheet" type="text/css" href="css/ie_below_9.css" /><![endif]-->

            <script type="text/javascript" src="http://www.site.com/js/video-gallery/swfobject.js"></script>
            <script type="text/javascript" src="http://www.site.com/js/video-gallery/jquery.dotdotdot-1.5.1.js"></script>
            <script type="text/javascript" src="http://www.site.com/js/video-gallery/jquery.address.js"></script>
            <script type="text/javascript" src="http://www.site.com/js/video-gallery/jquery.easing.1.3.js"></script>
            <script type="text/javascript" src="http://www.site.com/js/video-gallery/jquery.mousewheel.min.js"></script>
            <script type="text/javascript" src="http://www.site.com/js/video-gallery/jquery.jscrollpane.min.js"></script>
            <script type="text/javascript" src="http://www.site.com/js/video-gallery/froogaloop.js"></script>
            <script type="text/javascript" src="https://www.youtube.com/player_api"></script>
            <script type="text/javascript" src="http://www.site.com/js/video-gallery/jquery.apPlaylistManager.min.js"></script>
            <script type="text/javascript" src="http://www.site.com/js/video-gallery/jquery.apYoutubePlayer.min.js"></script>
            <script type="text/javascript" src="http://www.site.com/js/video-gallery/jquery.apVimeoPlayer.min.js"></script>
            <script type="text/javascript" src="http://www.site.com/js/video-gallery/jquery.func.js"></script>
    <script type="text/javascript" src="http://www.site.com/js/video-gallery/jquery.videoGallery.min.js"></script>       

    <script type="text/javascript">

                // FLASH EMBED PART
                var flashvars = {};
                var params = {};
                var attributes = {};
                attributes.id = "flashPreview";
                params.quality = "high";
                params.scale = "noscale";
                params.salign = "tl";
                params.wmode = "transparent";
                params.bgcolor = "#111";
                params.devicefont = "false";
                params.allowfullscreen = "true";
                params.allowscriptaccess = "always";
                swfobject.embedSWF("preview.swf", "flashPreview", "100%", "100%", "9.0.0", "expressInstall.swf", flashvars, params, attributes);

                //functions called from flash
                var jsReady = false;//for flash/js communication
                function flashVideoEnd() {jQuery.fn.videoGallery.flashVideoEnd();}
                function flashVideoStart() {jQuery.fn.videoGallery.flashVideoStart();}
                function dataUpdateFlash(bl,bt,t,d) {jQuery.fn.videoGallery.dataUpdateFlash(bl,bt,t,d);}
                function flashVideoPause() {jQuery.fn.videoGallery.flashVideoPause();}
                function flashVideoResume() {jQuery.fn.videoGallery.flashVideoResume();}
                function flashMainPreviewOff() {jQuery.fn.videoGallery.flashMainPreviewOff();}
                function flashResizeControls() {jQuery.fn.videoGallery.flashResizeControls();}
                function isReady() {return jsReady;}




                jQuery(document).ready(function($) {
                    jsReady = true;
                    //init component
                    $('#componentWrapper').videoGallery({   

                        /* REQUIRED */

                        /* DEEPLINKING SETTINGS */
                        /* useDeeplink: true, false */
                        useDeeplink:true,
                        /* startUrl: deeplink start url, enter 'ul' data-address/'li' data-address (two levels). Or just 'ul' data-address (single level). */
                        startUrl: 'mix1/youtube_single1',

                        /* NO DEEPLINKING SETTINGS */
                        /*activePlaylist: enter element 'id' attributte */
                        activePlaylist:'mix1',
                        /*activeItem: video number to start with (-1 = none, 0 = first, 1 = second, 2 = third ...etc) */
                        activeItem:0,

                        /* GENERAL */
                        /*thumbOrientation: horizontal, vertical (for scrolling) */
                        thumbOrientation: 'vertical',
                        /*playlistPosition: bottom / right */
                        playlistPosition: 'right',
                        /*fullSize: true/false (dont forget to edit the css as well) */
                        fullSize: true,
                        /*flashHolder: id of the flash movie */
                        flashHolder:'#flashPreview',

                        /* DEFAULTS */

                        /*defaultVolume: 0-1 */
                        defaultVolume:0.5,
                        /*autoPlay: true/false */
                        autoPlay:true,
                        /* loopingOn: loop playlist on end (last item in playlist), true/false */
                        loopingOn:true,
                        /* randomPlay: random play in playlist, true/false */
                        randomPlay:false,
                        /*autoAdvanceToNextVideo: true/false */
                        autoAdvanceToNextVideo:true,
                        /*autoMakePlaylistThumb: true/false (valid only for youtube and vimeo, auto make thumb for each video) */
                        autoMakePlaylistThumb:true,
                        /*autoMakePlaylistInfo: true/false (valid only for youtube and vimeo, auto make title and description for each video) */
                        autoMakePlaylistInfo:true,
                        /* outputPlaylistData: console.log out playlist data */
                        outputPlaylistData:false,
                        /* useYoutubeHighestQuality: true/false (use highest available quality for youtube video, if false, then it set to default)  */
                        useYoutubeHighestQuality:false,

                        videoGallerySetupDone:function() {
                            //console.log('videoGallerySetupDone');
                        }
                    });     
                });

            </script>

[jason360]

Standby josh.  Just copied my echoed to hard code.  Replicating error.  Trying to see whats different.

[jason360]

YouTube embeddable video issue.  Confirmed one of the videos in the database has become un-embeddable on YouTube knocking the whole gallery down.

Edited March 9, 2014 by jason360