Informationen für CMS/made simple

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:

    
$(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:

	{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:

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

Laut dem von Dir verlinkten Beispiel ungefähr so:

		$('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.

#1 20. Juli 2012 08:59

Re:

#2 20. Juli 2012 17:52

Re:

Fußzeile des Forums