We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Answered Gallery (with slimbox-plugin) on Ajax-Site

    • 35756
    • 166 Posts
    profilneurotiker Reply #1, 9 years, 9 months ago
    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
      • 35756
      • 166 Posts
      profilneurotiker Reply #2, 9 years, 9 months ago
      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.