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

- 166 Posts
profilneurotiker Reply #1, 7 years, 6 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

166 Posts

profilneurotiker Reply #2, 7 years, 5 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.