Prev. Next Arrows for Thumbnails in Galleriffic

184 Posts

flanger Reply #1, 14 years, 2 months ago

Hi!
I use Gallerific with Thumbnails but i cannot implement little arrows next to my thumbnails to go to the next or previous "page" of thumbnails. There are always 10 Thumbnails shown on each "page" and there are these little numbers (1,2,3,4...) to navigate but i would prefer to have arrows to go further and back. Does anyone know how this could be implemented? I'm using Modx Revo 2.2.4 and Gallery 1.5

What i want is shown on this example but here the arrows are "hard-coded" in Html and not generated automatically.
http://www.twospy.com/galleriffic/example-5.html#leaf
Thanks for helping!!!

https://www.beautyislife-shop.de - premium make-up!
https://www.topsterne.de - sell it here!
---------------------------------------------------------

1 Posts

adriandhart Reply #2, 13 years, 10 months ago

Hi Flanger,

Not sure if you found the answer to your problem, but I had the same issue and found the solution in the code for the example you posted a link to.

If you read through the source of that example page you will find the javascript settings used for the gallerific slideshow. Look for the following and copy it to your JS...

onPageTransitionIn:        function() {
	var prevPageLink = this.find('a.prev').css('visibility', 'hidden');
	var nextPageLink = this.find('a.next').css('visibility', 'hidden');
						
	// Show appropriate next / prev page links
	if (this.displayedPage > 0)
		prevPageLink.css('visibility', 'visible');

	var lastPage = this.getNumPages() - 1;
	if (this.displayedPage < lastPage)
		nextPageLink.css('visibility', 'visible');

	this.fadeTo('fast', 1.0);
}

The code above will show and hide the links if they are or are not not required. The code below is the handler which triggers the appropriate action when you click on one of the links...

Add this after the end of the "var gallery = ..." but still inside your "jQuery(document).ready(function($)..."

/**************** Event handlers for custom next / prev page links **********************/

gallery.find('a.prev').click(function(e) {
	gallery.previousPage();
	e.preventDefault();
});

gallery.find('a.next').click(function(e) {
	gallery.nextPage();
	e.preventDefault();
});

/****************************************************************************************/

This is the code you need to add to your javascript settings. Then in your HTML make sure your thumbnails have links with classes of .next and .prev.

Like this...

<a class="pageLink prev" href="#" title="Previous Page"></a>

2 Posts

Quasmo Reply #3, 13 years, 4 months ago

So I have found the solution to the disappearing arrows and why changing the value in the javascript does not work.

In the core/components/gallery/elements/chunks/gallerifficjs.chunk.tpl file, it explicitly handles the "onPageTransitionIn:" function.

The only file that needs to be changed to get this to work is this tpl file...

core/components/gallery/elements/chunks/gallerifficjs.chunk.tpl

find where it reads opts.onPageTransitionIn = function() { this.fadeTo('fast', 1.0); }; and change it to the following

opts.onPageTransitionIn = function() {
						var prevPageLink = this.find('a.prev').css('visibility', 'hidden');
						var nextPageLink = this.find('a.next').css('visibility', 'hidden');
						
						// Show appropriate next / prev page links
						if (this.displayedPage > 0)
							prevPageLink.css('visibility', 'visible');

						var lastPage = this.getNumPages() - 1;
						if (this.displayedPage < lastPage)
							nextPageLink.css('visibility', 'visible');

						this.fadeTo('fast', 1.0);
					}

after that, follow the instructions above and copy and paste the event handlers

    var gallery = $(opts.thumbsContainerSel).galleriffic(opts);
	/**************** Event handlers for custom next / prev page links **********************/
 
gallery.find('a.prev').click(function(e) {
    gallery.previousPage();
    e.preventDefault();
});
 
gallery.find('a.next').click(function(e) {
    gallery.nextPage();
    e.preventDefault();
});
 
/****************************************************************************************/

I hope this helps.