Gallery (with slimbox-plugin) on Ajax-Site

profilneurotiker — Oct 27, 2016, 07:07 PM
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>/);
						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 </pre></div><br />
<br />
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.<br />
<br />
On the page "images", where i have implemented one of the gallery-albums, I'm using this snippet-call:<br />
<br />
<div class="dis-code"><pre class="brush: php; toolbar: false">[[!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`
]] </pre></div><br />
<br />
<br />
<u>So here is my problem:</u><br />
<br />
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. <br />
<br />
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.<br />
<br />
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?<br />
<br />
Cheers in advance!
</article>
<article>
<h1>Re: Gallery (with slimbox-plugin) on Ajax-Site (Best Answer)</h1>
<p>profilneurotiker — Oct 28, 2016, 11:00 AM</p>
I think I got it...<br />
<br />
I just had to put this inside my AJAX-function:<br />
<br />
<div class="dis-code"><pre class="brush: php; toolbar: false">                $("a[rel^='lightbox']").slimbox({ 							
			initialWidth: 300,
			initialHeight: 300}, null, function(el) { 
                        return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel)); 
                }); 	</pre></div><br />
<br />
and implement the slimbox-css- and slimbox-js-file in my template.
</article>
</main></body></html>
Gallery (with slimbox-plugin) on Ajax-Site - My Forums

Gallery (with slimbox-plugin) on Ajax-Site
