Reload jQuery Function after PrettyPhoto has been triggered

Question

I hope the title is self-explanatory. Either way, I am trying to reload (or re-read) a function in jQuery, after another process has been triggered (in this case, the prettyPhoto plug-in).

This is my current jQuery function:

        /** Scrolling Sidebar function **/
            var $sidebar   = $(".sideBar"),
                $window    = $(window),
                $mainImage = $(".mainImage"),
                offset     = $sidebar.offset(),
                threshold  = $mainImage.height() - $sidebar.height(),
                topPadding = 15;

    <?php if ( $options['scroll_sidebar'] == true ) { ?>
        if( $mainImage.height() >= 400 ) {
            $window.scroll(function() {
                if ($window.scrollTop() > threshold) {
                    if( $('.sideBar').has('.zoomImage').length ) {
                        $sidebar.stop().animate({
                            marginTop: threshold + 50
                        });
                    } else {
                        $sidebar.stop().animate({
                            marginTop: threshold + 60
                        });
                    }
                } else if ($window.scrollTop() > offset.top) {
                    $sidebar.stop().animate({
                        marginTop: $window.scrollTop() - offset.top + topPadding
                    });
                } else {
                    $sidebar.stop().animate({
                        marginTop: '40px'
                    });
                }
            });
        }
    <?php } ?>

And prettyPhoto gets triggered when an anchor tag with the class fullSize is clicked.

I followed this thread to reload a 'code block', using the setTimeout method. This is what I did: (wrapped the previous code within a function, used setTimeout inside of that function and then called the setTimeout outside of the function)

    /** Scrolling Sidebar function **/
function scrollSidebar() {
            var $sidebar   = $(".sideBar"),
                $window    = $(window),
                $mainImage = $(".mainImage"),
                offset     = $sidebar.offset(),
                threshold  = $mainImage.height() - $sidebar.height(),
                topPadding = 15;

    <?php if ( $options['scroll_sidebar'] == true ) { ?>
        if( $mainImage.height() >= 400 ) {
            $window.scroll(function() {
                if ($window.scrollTop() > threshold) {
                    if( $('.sideBar').has('.zoomImage').length ) {
                        $sidebar.stop().animate({
                            marginTop: threshold + 50
                        });
                    } else {
                        $sidebar.stop().animate({
                            marginTop: threshold + 60
                        });
                    }
                } else if ($window.scrollTop() > offset.top) {
                    $sidebar.stop().animate({
                        marginTop: $window.scrollTop() - offset.top + topPadding
                    });
                } else {
                    $sidebar.stop().animate({
                        marginTop: '40px'
                    });
                }
            });
        }

        $('a.fullSize').click(function() {
            setTimeout(scrollSidebar, 1000);
        });
<?php } ?>

    }
setTimeout(scrollSidebar, 1000);

Sadly that did not work. So, do you have any ideas as to how I could reload/re-read a function once another action/plug-in has been triggered?

Thanks!
Chris

Answer 1

" I am trying to reload (or re-read) a function in jQuery, after another process has been triggered"

why are you calling setTimeout? this will trigger the function call after certain amount of time and then do loop/repeat every 1000ms. If you just want to reload the function, just call function itself.

 $('a.fullSize').click(function() {
            scrollSidebar();
        });

EDIT: Your pretty Image probably does something that affects the Scrolbar. However, http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/documentation/ has callback attribute. So do ii like this (callback function will be called whenever a perryimaege has been closed as the problem you were having is when it prettyimage gets open. Soin that respect taht's why click event didn't solve your problem (code probably was working)) You needed something AFTEr the image is closed

$("a[rel^='prettyPhoto']").prettyPhoto({
        allow_resize: true,
        theme: 'facebook', /* light_rounded / dark_rounded / light_square / dark_square / facebook */
        callback: sideBar
    });

and declare your sidebar on other place

function sideBar()
{
    var $sidebar   = $(".sideBar"),
    $window    = $(window),
    $mainImage = $(".mainImage"),
    offset     = $sidebar.offset(),
    threshold  = $mainImage.height() - $sidebar.height(),
    topPadding = 15;

    if( $mainImage.height() >= 400 ) {
        $window.scroll(function() {
            if ($window.scrollTop() > threshold) {
                if( $('.sideBar').has('.zoomImage').length ) {
                    $sidebar.stop().animate({
                        marginTop: threshold + 50
                    });
                } else {
                    $sidebar.stop().animate({
                        marginTop: threshold + 60
                    });
                }
            } else if ($window.scrollTop() > offset.top) {
                $sidebar.stop().animate({
                    marginTop: $window.scrollTop() - offset.top + topPadding
                });
            } else {
                $sidebar.stop().animate({
                    marginTop: '40px'
                });
            }
        });
    }   
}

working code from your webiste http://jsfiddle.net/qeDwM/