New Community Forums are coming. Watch this space for news.
Subscribe: RSS
  • 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) { 
    
    event.preventDefault();
    
    var href = $(this).attr("href");
    	
    $.ajax({
                       type: 'GET',
                       url: href,
                       data:'html',
                       beforeSend: function(){
                           $(".loading").show();
                       },
                       success: function(data)
                       {                         
    						$(".loading").hide();
    						$('#target').html($(data).find('#target').html());
    						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:

    [[!Gallery? 
    
    &plugin=`slimbox` 
    
    &loop=`1` 
    
    &thumbWidth=`200` 
    &thumbHeight=`200` 
    &thumbZoomCrop=`1` 
    
    &overlayOpacity=`0.65` 
    
    &imageWidth=`600` 
    &imageHeight=`600` 
    
    &slimboxRenderJsOnStartup=`0` 
    &slimboxLoadJQuery=`0` 
    
    &rowTpl=`galAlbumCoverRowTpl` 
    
    &toPlaceholder=`gallery`
    ]] 



    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
      I think I got it...

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

                      $("a[rel^='lightbox']").slimbox({ 							
      			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.