Strange Overlap Question

[mcblum]

Hi. I had the plugin working and all of a sudden it stopped. Could someone let me know what I could be doing wrong here that's causing the parent div to not have a height and all images to stack up?

http://www.mattblumphotography.com/weddings/

Thank you very much, Matt

[mcblum]

Here's the init code:

<script type="text/javascript">
                    $(document).ready(function(){
                        // Prepare layout options.
                        var options = {
                          itemWidth: 250, // Optional min width of a grid item
                          autoResize: true, // This will auto-update the layout when the browser window is resized.
                          container: $('#grid<?php the_ID(); ?>'), // Optional, used for some extra CSS styling
                          offset: 10, // Optional, the distance between grid items
                          outerOffset: 0, // Optional the distance from grid to parent
                          flexibleWidth: '33%' // Optional, the maximum width of a grid item
                        };

                         var loadedImages<?php the_ID(); ?>;
                         loadedImages<?php the_ID(); ?> = 0; // Counter for loaded images
                         var handler;
                            handler = $('#grid<?php the_ID(); ?> .galItem'); // Get a reference to your grid items.      
                          $('#grid<?php the_ID(); ?>').imagesLoaded(function() {  
                            var $window = $(window);

                           $window.resize(function() {
                               windowWidth = $window.width(),
                               newOptions = { flexibleWidth: '50%', itemWidth: 250 };

                               // Breakpoint
                               if (windowWidth < 568) {
                                    newOptions.itemWidth = 200;
                                    newOptions.flexibleWidth = '100%';
                               }    

                               handler.wookmark(newOptions);            
                            });

                            // Call the layout function.
                            handler.wookmark(options);

                             var windowWidth = $window.width(),
                               newOptions = { flexibleWidth: '50%', itemWidth: 250 };

                           // Breakpoint
                           if (windowWidth < 568) {
                                newOptions.itemWidth = 200;
                                newOptions.flexibleWidth = '100%';

                             }  

                             handler.wookmark(newOptions);          

                          }).progress(function(instance, image) {
                            // Update progress bar after each image load
                            loadedImages<?php the_ID(); ?> = loadedImages<?php the_ID(); ?> + 1;
                            if (loadedImages<?php the_ID(); ?> == handler.length) {
                              $('#progress<?php the_ID(); ?>').css('display', 'none');
                              $('#grid<?php the_ID(); ?>').show();
                              $('#comments<?php the_ID() ?>').show();
                            } else {
                              $('#progress<?php the_ID(); ?>').css('display', 'block');
                              prog<?php the_ID() ?> = (loadedImages<?php the_ID(); ?> / handler.length) * 100;
                              loaded<?php the_ID() ?>=(Math.floor(prog<?php the_ID() ?>));
                              loaded<?php the_ID() ?>=(loaded<?php the_ID() ?> < 10) ? ("0" + loaded<?php the_ID() ?>) : loaded<?php the_ID() ?>;
                              $('#txt<?php the_ID() ?>').html(loaded<?php the_ID(); ?> + '%');
                            };
                          });
                    }); 
                </script>

[mcblum]

Partial resolution: Ok... for some reason including jqueryui broke everything. Any idea why that happened?

[Sebobo]

Hi,

hard to say. Maybe the jQueryUI contained a different version jQuery? What were you doing with jQueryUI?

But I have to say that you made a nice page! You are using all of the features and things which are partially contained in the examples very well :)

Best regards

[mcblum]

Thanks Sebobo :)

I had compiled a stripped down version of jQueryUI to power a date picker in our client area admin. It really did very little. I looked at the code and still can't figure out what went wrong...

[Sebobo]

If you could create a version on a differerent url with both libraries and the problem I could take a look.