(ajax)getPage+ infinite-scroll + Gallery-galleriffic

166 Posts

profilneurotiker Reply #1, 9 years, 9 months ago

Hi there!

Another problem...

I'm using the Gallery-plugin installed via Package Management in the Backend. By using Gallery I also use the implemented plugin galleriffic for displaying my albums.

Then I needed to have two galleries on one page (or maybe more), which seemed to be hard to get working, but I found a solution here:

https://code.google.com/p/galleriffic/issues/attachmentText?id=76&aid=-3045121742886940548&name=example-2.html&token=ABZ6GAdK-rPP2Lo90yMz9z2JD57OJr3XdA%3A1405608691341

In short, you have to assign unique-ids to some of the placeholders (imageContainerSel,thumbsContainerSel,controlsContainerSel,loadingContainerSel) to get multiple galleries running on one page.

So I first created two different chunks called Galerie-multiple-neu and Galerie-multiple-neu2, each with unique-ids for the needed placeholders for testing purposes:

<div class="each-gallery">
<div class="slideshow-container">
<div id="loading1" class="loader"></div>
<div id="slideshow1" class="slideshow"></div>
</div>
<div id="thumbs1" class="navigation">
<ul class="thumbs noscript">
[[+thumbnails]]
</ul>
</div>
<p>[[+gallery.description]]</p>
<div style="clear: both;"></div>
</div> 

Same for the second chunk, but this time with interchanged id's from "1" to "2".

Those chunks got used with these two Gallery-galleriffic-calls:

[[!Gallery?
&album=`4`
&plugin=`galleriffic`
&gallerifficContainerTpl=`Galerie-multiple-neu1`
&thumbsContainerSel=`#thumbs1`
&imageContainerSel=`#slideshow1`
&controlsContainerSel=`#controls1`
&loadingContainerSel=`#loading1`
]]

[[!Gallery?
&album=`3`
&plugin=`galleriffic`
&gallerifficContainerTpl=`Galerie-multiple-neu2`
&thumbsContainerSel=`#thumbs2`
&imageContainerSel=`#slideshow2`
&controlsContainerSel=`#controls2`
&loadingContainerSel=`#loading2`
]]

For testing it worked well...both galleries are shown and working separately.

Then I thought it would be good if the unique-ids could be provided dynamically somehow else, because I don't know how many galleries may be displayed on a page in the future...

So I rememberred the "idx"-parameter, you can use with the getPage-call:

[[!getPage@infinite_scroll?
&elementClass=`modSnippet`
&element=`getResources`
&parents=`80`
&limit=`3`
&pageVarKey=`page`
&sortby=`id`
&includeTVs=`1`
&processTVs=`1`
&includeContent=`1`
&idx=`1`
&showHidden=`1`
&tpl=`Galerie-Multiple-Test-neu`
&pageNavOuterTpl=`</p><noscript>[[+first]][[+prev]][[+pages]][[+next]][[+last]]</noscript><p>[[+next]]`
&pageNavTpl=`<a[[+classes]][[+title]] id="next" href="[[+href]]">[[+pageNo]]`
&pageActiveTpl=`<a[[+activeClasses:default=` class="active"`]][[+title]] id="next" href="[[+href]]">[[+pageNo]]`
&pageFirstTpl=`<a[[+classes]][[+title]] id="next" href="[[+href]]">First`
&pageLastTpl=`<a[[+classes]][[+title]] id="next" href="[[+href]]">Last` &pagePrevTpl=`<a[[+classes]][[+title]] id="next" href="[[+href]]" id="previous"><<`
&pageNextTpl=`<a[[+classes]][[+title]] id="next" href="[[+href]]" id="next">>>` ]]

Then I changed my Galerie-Multiple-Test-neu-chunk to this:

<div class="each-gallery">
<div class="slideshow-container">
<div id="loading[[+idx]]" class="loader"></div>
<div id="slideshow[[+idx]]" class="slideshow"></div>
</div>
<div id="thumbs[[+idx]]" class="navigation">
<ul class="thumbs noscript">
[[+thumbnails]]
</ul>
</div>
<p>[[+gallery.description]]</p>
<div style="clear: both;"></div>
</div> 

I created a new parent-folder with 4 ressources inbetween. Each resource has a Gallery-call like:

[[!Gallery?
&album=`4`
&numThumbs=`6`
&limit=`0`
&autoStart=`1`
&plugin=`galleriffic`
&gallerifficContainerTpl=`Galerie-multiple-neu`
&thumbsContainerSel=`#thumbs[[+idx]]`
&imageContainerSel=`#slideshow[[+idx]]`
&controlsContainerSel=`#controls[[+idx]]`
&loadingContainerSel=`#loading[[+idx]]`
]]

The only thing I changed is the ID of each &album=`ID` row (to 1,2,3,4)...

This also works well with three galleries I tested. I reload the site, all three galleries get shown like they should.

And now here comes my problem:

The fourth gallery is "behind" the getPage-limit I set to 3. I also added the infinite-scroll-script to show more resources that are nested inside the parent-folder by clicking a "show more"-link. This works fine as intended, as long there is no other Gallery-call inside one of the additioned resources that get shown on click.

When I edit my limit-value to 4, the fourth resource of the parent with the Gallery-call within gets shown correctly, all further resources which contain only text work fine as well, but as soon as another resource with a Gallery-call gets additioned the gallery doesn't work ( only two thumbnails get shown (instead of 6), css is broken, big picture missing, album-desciption placed wrong (due to the broken css)...

In the html-source-code I can see, that the [[+idx]] starts again to count from 1 with each resource that gets additioned. So i don't have a unique-ids like i need to...

Another try of mine was to use the [[+id]]-parameter to use the id of the album and use this.

So I changed all "[[+idx]]" to "[[+id]]" inside my Gallery-calls. Now i see in the html-source-code that each gallery and the needed placeholders have a unique-ids like it's wanted.

But this still doesn't work with any resource that gets additioned by the infinite-scroll-script on click on the "show more"-link.

Any hint would be highly appreciated!

Cheers!

[ed. note: profilneurotiker last edited this post 9 years, 9 months ago.]

166 Posts

profilneurotiker Reply #2, 9 years, 9 months ago

after some more researching i found some posts on stackoverflow which might lead into the correct direction:

http://stackoverflow.com/questions/10149882/infinite-scroll-breaks-flash

When the ajax call is made to the next page, inline script tags are stripped out of the request. Hence the why the flash won't work.

The .find method is used within the plugin, implicitly as part of the .load method and callback phase:

jquery: Keep <script> tag after .find()

The best option for you is to isolate the JS code, having looked at the inline JS required for the flash video to work, this seems plausible.

The best solution would be to loop through each post returned within the callback function, identify whether it is dynamic content and append the necessary JS for it to work

But the solution there didn't help me, I get it was too tumblr-based...

In another thread I read this:

http://stackoverflow.com/questions/5791420/jquery-keep-script-tag-after-find

Whenever you create a jQuery object from a string, script tags are automatically stripped. You can see a discussion in here: JavaScript RegEx for div tags

What I would do, as suggested in a post in the thread above, is to wrap the content in special comment tags and use javascript match() to extract it, the append the whole string.
data = this.state.Response.data; //full html of page returned by ajax

//Assuming your data looks like: ...CONTENT...
//we filter out what we need 
data = data.match(/<\!\-\-Content Start\-\->(.*?)<\!\-\-Content End\-\->/)[1];

$('#content_div').append(data); //we display it

So I tried to add this somehow fitting to my infinite-scroll-call:

	<script type="text/javascript" >	
	$('.content').infinitescroll({
		navSelector  	: "a#next:last",
		nextSelector 	: "a#next:last",
		itemSelector 	: ".infinite",
		debug		: true,
		dataType	: 'html',
		prefill		: true,
                animate         : true,  
                loading         : { finishedMsg: "Keine weiteren Inhalte vorhanden.",
                                    msgText: "Lade weitere Inhalte" },
                errorCallback: function () { jQuery('#next').find('.news').end().delay(2000).fadeOut(); }
    });

  //kill scroll binding
  //$(window).unbind('.infscr');

data = this.state.Response.data; //full html of page returned by ajax

//Assuming your data looks like: ...<!--Content Start-->CONTENT<!--Content End-->...
//we filter out what we need 
data = data.match(/<\!\-\-Content Start\-\->(.*?)<\!\-\-Content End\-\->/)[1];

$('.content').append(data); //we display it


$('a#next:last').click(function(e){        
        e.preventDefault();
        jQuery('.content').infinitescroll('retrieve');

// the plugin currently sets 'display:none' on your nav selector
// this is probably going to change, but for the moment, just do this.
$(this).css('display','block');  
return false;
});
</script>

...but I had no luck with that...but I'm feeling it's leading to the correct direction...

166 Posts

profilneurotiker Reply #3, 9 years, 9 months ago

additional info:

I see in the html-source-code, that the galleriffic var opts get added to the <head>-area each time the gallery is used inside a resource...so with the getPage limit=3, where the first three resources all include a galleriffic-gallery, I get this <script>galleriffic-var opts-CODE</script> three times in the <head>!? The paths to the nedded scripts get only added once...

Is it possible to tell the galleriffic plugin not to add the script-paths and the script-itself automatically to the <head>, I would like to do it once manually!