We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 35756
    • 166 Posts
    Hi there!

    I'm working on a new project in MODX Revo 2.5.1 with Gallery 1.7.0.

    The content on the site is loaded via an AJAX-script:

    //////////////// AJAX Start
    $(document).on("click", 'a:not(.up a, .gallery a)', function(event) { 
    var href = $(this).attr("href");
                       type: 'GET',
                       url: href,
                       beforeSend: function(){
                       success: function(data)
    						var matches = data.match(/<title>(.*?)<\/title>/);
    						var pageTitle = matches[1];
    						document.title = pageTitle;
    						var url = window.location.href;
    //This is where we update the address bar with the 'url' parameter
    history.pushState({}, '', href);
        return false;	
    //////////////// AJAX End 

    So every time an a/link is clicked - except for some like an up-arrow and the gallery-links - the content inside the target-id-div of the desired page gets loaded and displayed.

    On the page "images", where i have implemented one of the gallery-albums, I'm using this snippet-call:


    So here is my problem:

    When I start on the "index"-page and navigate to the "images"-page and I want to click on an image to get it displayed in the slimbox-"popup"-way, I get an error: the page reloads and the image gets shown like there is no slimbox or ajax or whatever.

    Then I go back on the browser-history-back-button, the page gets reloaded. When I do a click on an image now, it get's opened in the slimbox-way as desired. This works until I load another page and go back to the "image"-page; then it's broken again.

    Has anyone a clue how I can get this to work? The slimbox-plugin should be "active" whenever I'm on the site and navigate to the image-galleries, so that each time the images are opened in the slimbox-way?

    Cheers in advance!

    This question has been answered by profilneurotiker. See the first response.

    • discuss.answer
      • 35756
      • 166 Posts
      I think I got it...

      I just had to put this inside my AJAX-function:

      			initialWidth: 300,
      			initialHeight: 300}, null, function(el) { 
                              return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel)); 

      and implement the slimbox-css- and slimbox-js-file in my template.