Question

I have a conflict regarding some jquery scripts within the same document header of which one is a script dynamically calling content from a navigation menu (dynamicpage) and one is a lightbox (slimbox2) for my image gallery. ( there is also one doing the hashtag work for dynamicpage called jquery.ba-hashchange)

They both work fine on their own and it’s no problem to open the page where the gallery is at directly in the browser (here, it only works with the first image because I haven’t put the code on the other ones yet) but if I open the page from the navigation using the dynamic content script, the lightbox doesn’t work.

It seems to have something to do with the content being loaded from the dynamicpage script, since the other script should work within that content.

this is the dynamicpage:

$(function() {

var newHash      = "",
    $mainContent = $("#main-content"),
    $pageWrap    = $("#page-wrap"),
    baseHeight   = 0,
    $el;


$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $mainContent.height();

$("nav, #logo, #start, footer").delegate("a", "click", function() {
    window.location.hash = $(this).attr("href");
    return false;
});

$(window).bind('hashchange', function(){

    newHash = window.location.hash.substring(1);

    if (newHash) {
        $mainContent
            .find("#guts")
            .fadeOut(200, function() {
                $mainContent.hide().load(newHash + " #guts", function() {
                    $mainContent.fadeIn(200, function() {
                        $pageWrap.animate({
                            height: baseHeight + $mainContent.height() + "px"
                        });
                    });
                    $("nav a").removeClass("current");
                    $("nav a[href="+newHash+"]").addClass("current");

                });
            });
    };

});

$(window).trigger('hashchange');
});

Here are the scripts being loaded from my header (in this order):

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.ba-hashchange.min.js"></script>
<script type="text/javascript" src="js/dynamicpage.js"></script>
<script type="text/javascript" src="js/slimbox2.js"></script>

It would be too messy to post the scripts of the lightbox and the hashchange script here, but I hope this will do. Here is a link to the site (still under construction): http://www.designhofmann.de/test/
I’m not a jquery crack and normaly I design websites rather than coding them, so I hope you bear with my inexperience. 🙂 Any help is appreciated, since I’ve been searching for hours to find a solution.

Answer 1

Peter, you can call $("#gallery li a").slimbox(); after your dynamic content has loaded to bind the slimbox functionality to your images.

You can even preview this solution by opening up a javascript console and running that command.

UPDATE

Also check out the API document here, it may help shed some light on what this solution needs to look like and is doing.

Hope this helps!