Showtime Pager als Thumb?

dalton · 20. Juli 2012 08:59

Hallo

ich möchte den Showtime Slider (Jquery Version) so umbauen damit man auf Thumb Bilder oder Textboxen Klicken kann und somit dann auch das Bildwechselt anstatt die Navigation mit 1,2,3,4...

Hab da auch was gefunden beim Cycle Javascript von Jquery, das diese funktion vorhanden ist, nur leider funktioniert das bei mir nicht wirklich und jetzt ist die frage was mach ich falsch?

Hiermal die Anleitung: http://jquery.malsup.com/cycle/pager2.html

Den Javascript Code in der Slideshow sieht so aus:

Hier klicken, um den Code zum Kopieren zu markieren

    
$(document).ready(function(){
		var lastslide=0;
		$('ul#slides_{/literal}{$showid}{literal}').cycle({ {/literal}
		{if $show.st_showtext || $show.st_showcomment}
			before: onbefore_{$showid},
		{/if}
			fx: '{$show.st_transition}',
			speed:    {$show.st_transitiontime}, 
			timeout:  {$show.st_rotatetime},
		{if $show.st_navbut}
			pager:   '#slideshow_nav_{$showid}',
		{/if} 
			pagerEvent: 'mouseover',
		{if !$show.st_autoplay}
			timeout: 0,
		{/if}		
		{if $show.st_shuffle}
			random: 1,
		{/if}
			fastOnEvent: false,
			pause: {$show.st_pauseonhover},
			pauseOnPagerHover: {$show.st_pauseonhover},
			prev: '#prev_{$showid}',
			next: '#next_{$showid}'{if $show.st_showtext || $show.st_showcomment},
			after: onafter_{$showid}{/if}

			{literal}
	
  	
		
		});

...

So wie ich das verstanden habe muss ich beim pager die pagerAnchorBuilder function einbauen:

Hier klicken, um den Code zum Kopieren zu markieren

	{if $show.st_navbut}
			pager:   '#slideshow_nav_{$showid}',
			{literal}
			   // callback fn that creates a thumbnail to use as pager anchor 
			pagerAnchorBuilder: function(idx, slide) { 
			return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>'; 
			}
			{/literal}
			
		{/if}

So hab ich das dann auch eingesetzt nur leider tut sich garnichts, also dann verschwindet auch der normale Pager mit den Zahlen.

Besten Dank für eure Hilfe

NaN · 20. Juli 2012 17:52

Du musst noch diese Zeile ändern:

Hier klicken, um den Code zum Kopieren zu markieren

		$('ul#slides_{/literal}{$showid}{literal}').cycle({ {/literal}

Laut dem von Dir verlinkten Beispiel ungefähr so:

Hier klicken, um den Code zum Kopieren zu markieren

		$('ul#slides_{/literal}{$showid}{literal}')
			.before('<ul id="#slideshow_nav_{/literal}{$showid}{literal}">')
			.cycle({ {/literal}

Hab's jetzt nicht ausprobiert, aber das sollte eigentlich schon alles sein.

Forum für CMS/made simple

#1 20. Juli 2012 08:59

Showtime Pager als Thumb?

#2 20. Juli 2012 17:52

Re: Showtime Pager als Thumb?

Fußzeile des Forums