Array scrolling with buttons

[JoeAtRevolutionUnltd]

Hey all,

I need a script to advance through a set of images with a short description underneath with previous and next buttons, and it needs to auto advance to the next record every 10 seconds.

Im working with PHP/smarty and the data is coming from a MYSQL database.

Any help is appreciated.

Thanks

 

[Foamcow]

What have you done so far?

--
Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[tchatzi]

a search in google.com for javascript photo gallery will give around 3,690,000 results!
I think you will find what you're looking for with a bit everything you need.


``The wise man doesn't give the right answers,
he poses the right questions.''
TIMTOWTDI

 

[JoeAtRevolutionUnltd]

I can get the array and assign it to my template, the problem I'm having is how to use smarty to advance to the next item in the array. I guess it would probably be easier for me to use some javascript for it, but if there was a way to advance to the next item in a foreach loop, like $smarty.foreach.name.next or $smarty.foreach.name.previous it would make things a lot more convenient.

 

[JoeAtRevolutionUnltd]

If anyone's curious here is the solution I came up with:

	{literal}
	<script language="JavaScript">
		var image = new Array();
		var title = new Array();
		var text  = new Array();
		var i = 0;
		
	{/literal}
		{foreach from=$spotlight item=item name=name}
			image.push("/images/{$item.S_Img}");
			title.push("{$item.S_Title}");
			text.push("{$item.S_Description}");
			i++;
		{/foreach}
	{literal}
	
    var index = 0;

    $(document).ready(function(){
		$("img#leftarrow").click(function(){
			index--;
			if (index < 0)
		    	index = image.length - 1;
	 		spotlight();
		 });
		 
 		$("img#rightarrow").click(function(){
			index++;
			if (index >= image.length)
		    	index = 0;
	 		spotlight();
		 });
		 window.setInterval("change()", 15000);
		 spotlight();
    });
		
	function spotlight(){
		jQuery("img#mainimage").attr("src",image[index]);
		jQuery("p.main").text(text[index]);
	}

	function change(){
	 	index++;
		if (index >= image.length)
	    	index = 0;
	 	spotlight();
	}

    </script>
	{/literal}