Using jQuery UI Dialog plugin within Galleriffic

[GoogleCodeExporter]

1. Objective: Use jQuery UI Dialog plugin in jQuery Galleriffic content area. 

[...]
<div class="caption">

<div class="download">                    
                                      <a class="foto-specs" href="utqg.html" title="TEST">LOCK</a>
[...]

The javascript part looks like this:

<script type="text/javascript">

            $(document).ready(function() {
                    var $loading = $('<img src="loading.gif" alt="loading" class="loading">');

                    $('.foto-specs').each(function() {
                        var $dialog = $('<div></div>')
                            .append($loading.clone());

                        var $link = $(this).one('click', function() {
                            $dialog
                                .load($link.attr('href'))
                                .dialog({
                                    title: $link.attr('title'),
                                    width: 500,
                                    height: 300,
                                    modal: true,
                                    buttons: {
                                        'Bild sperren': function() {
                                            $(this).dialog('close');
                                        },
                                        Abbrechen: function() {
                                            $(this).dialog('close');
                                        }
                                    }

                                });

                            $link.click(function() {
                                $dialog.dialog('open');

                                return false;
                            });

                            return false;
                        });
                    });
                });

                jQuery(document).ready(function() {

                        // We only want these styles applied when javascript is enabled
                        $('div.navigation').css({'width' : '300px', 'float' : 'left'});
                        $('div.content').css('display', 'block');

                        // Initially set opacity on thumbs and add
                        // additional styling for hover effect on thumbs
                        var onMouseOutOpacity = 0.67;
                        $('#thumbs ul.thumbs li').opacityrollover({
                            mouseOutOpacity:   onMouseOutOpacity,
                            mouseOverOpacity:  1.0,
                            fadeSpeed:         'fast',
                            exemptionSelector: '.selected'
                        });

                        // Initialize Advanced Galleriffic Gallery
                        var gallery = $('#thumbs').galleriffic({
                            delay:                     2500,
                            numThumbs:                 15,
                            preloadAhead:              10,
                            enableTopPager:            true,
                            enableBottomPager:         true,
                            maxPagesToShow:            7,
                            imageContainerSel:         '#slideshow',
                            controlsContainerSel:      '#controls',
                            captionContainerSel:       '#caption',
                            loadingContainerSel:       '#loading',
                            renderSSControls:          true,
                            renderNavControls:         true,
                            playLinkText:              'Play Slideshow',
                            pauseLinkText:             'Pause Slideshow',
                            prevLinkText:              '&lsaquo; Previous Photo',
                            nextLinkText:              'Next Photo &rsaquo;',
                            nextPageLinkText:          'Next &rsaquo;',
                            prevPageLinkText:          '&lsaquo; Prev',
                            enableHistory:             false,
                            autoStart:                 false,
                            syncTransitions:           true,
                            defaultTransitionDuration: 900,
                            onSlideChange:             function(prevIndex, nextIndex) {
                                // 'this' refers to the gallery, which is an extension of $('#thumbs')
                                this.find('ul.thumbs').children()
                                    .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
                                    .eq(nextIndex).fadeTo('fast', 1.0);
                            },
                            onPageTransitionOut:       function(callback) {
                                this.fadeTo('fast', 0.0, callback);
                            },
                            onPageTransitionIn:        function() {
                                this.fadeTo('fast', 1.0);
                            }
                });
            });

</script>

==> When clicking on the text link "LOCK" under the image, no dialog opens. But 
an Error page ist displayed: Object not found! Error 404

==> What is the trick, in integrating jQuery UI's plugin Dialog into Gallerific?

Would really appreciate any help? This one is a brainteaser... ;-)

Thanks a lot!

---

Version: Galleriffic 2.0.1
OS: Windows XP Professionell
Browser: Mozilla 3.6.6.

Original issue reported on code.google.com by hei...@itsbetter.de on 19 Jul 2010 at 1:15

[GoogleCodeExporter]

Hello,

I did this:

J('.largecheckbox').click(function(event) {
        J('#thumbs ul').empty();
        J('#thumbs ul').append(getUlLiContent());
        // We only want these styles applied when javascript is enabled
        J('.navigation').css({'width' : '160px', 'float' : 'left', 'color': '#787878'});
        J('.content').css({'display':'block'}); 

        J('#thumbs').galleriffic({
            delay:300,
            preloadAhead:-1,
            numThumbs:30,
            enableTopPager:true,
            enableBottomPager:true,                 
            imageContainerSel:'#slideshow',
            controlsContainerSel:'#controls',
            syncTransitions:true,                   
            prevLinkText:'‹ Previous',
            nextLinkText:'Next ›',                    
            nextPageLinkText:'›',
            prevPageLinkText:'‹',     
            defaultTransitionDuration:0
        });
        J('#container').dialog('open');     
});

J('#container').dialog({
    show:'blind',
    hide:'explode',
    draggable:true,
    autoOpen:false,
    modal: true,
    height:900,
    width:900,
    close: function(event, ui) {
        J("input[name='chk_rain_animation']").prop('checked', false);
    }
});

I'm able to open and close the popup. 
But, if I open the popup, I start the animation (without stopping it), I close 
the popup, the next time that I re-open the popup the animation is still 
working. Why?

Original comment by davide.m...@gmail.com on 23 Sep 2011 at 9:33