Randomize Content Slider by clicking on Image

[deeksha]

1) Script Title:Featured Content Slider

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tentslider.htm

3) Describe problem:
Is it possible to have random contents by clicking on same image each time... I want content to change randomly each time when an image above slider is clicked each time?

Please Help me if possible...

[jscheuer1]

Yes. For your init do things a little differently. Instead of:

featuredcontentslider.init({
	id: "slider1",  //id of main slider DIV
	contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
	toc: "#increment",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
	nextprev: ["Previous", "Next"],  //labels for "prev" and "next" links. Set to "" to hide.
	revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
	enablefade: [true, 0.2],  //[true/false, fadedegree]
	autorotate: [true, 3000],  //[true/false, pausetime]
	onChange: function(previndex, curindex){  //event handler fired whenever script changes slide
		//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
		//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
	}
})

Do it like so:

var myslider = {
	id: "slider1",  //id of main slider DIV
	contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
	toc: "#increment",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
	nextprev: ["Previous", "Next"],  //labels for "prev" and "next" links. Set to "" to hide.
	revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
	enablefade: [true, 0.2],  //[true/false, fadedegree]
	autorotate: [true, 3000],  //[true/false, pausetime]
	onChange: function(previndex, curindex){  //event handler fired whenever script changes slide
		//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
		//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
	}
};
featuredcontentslider.init(myslider);

Then you can have an image:

<img src="whatever.gif" alt="" onclick="myslider.contentdivs.sort(function(){return 0.5 - Math.random();});">

[deeksha]

Dear John
Please help me to implement this... as the image in the page is not clickable according to this code...

Can u please explain?

[jscheuer1]

You can click on anything. Whether that accomplishing anything or not depends upon the code. The code given here in my last post (if you have followed my suggestions) will randomize the Slider onclick of the image. But if you mean the finger pointing cursor, you can give it that as well. To give that cursor to the image we've been talking about:

<img style="cursor: pointer;" src="whatever.gif" alt="" onclick="myslider.contentdivs.sort(function(){return 0.5 - Math.random();});">

If I've misunderstood, and/or there are other problems, please be more specific, and:

Please post a link to a page on your site that contains the problematic code so we can check it out.

[deeksha]

In the Code given by you i have set autorotate: [false, 3000](because i dont want content to slide automatically) , & toc: "markup",


But as you can see in link given below that on clicking the image, content is not changing.

http://www.jaisainath.com/slide.htm (Link where i created dummy page with this script)
PLease help me out JOhn, i am really thankful for your kind support.

[jscheuer1]

I see, the code I gave you simply shuffles the contents. It doesn't make the contents change. I thought you were changing the contents in some other fashion, like auto rotate.

We can make the the image also change the slide to one in the now shuffled order:

onclick="myslider.contentdivs.sort(function(){return 0.5 - Math.random();});featuredcontentslider.turnpage(myslider, 'next');"

But random means random, so the next slide may actually be the same slide, and, doing it like that leaves no good way to weed out a duplicate change.

Put this (highlighted) in the head of your page, right after the main script, as shown:

<script type="text/javascript" src="contentslider.js">

/***********************************************
* Featured Content Slider- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>
<script type="text/javascript">
featuredcontentslider.turnrandom = function(setting){
	var newnum = setting.currentpage;
	while(newnum == setting.currentpage){
		newnum = Math.ceil(Math.random() * setting.contentdivs.length);
	}
	this.turnpage(setting, newnum);
};
</script>

Now, make the image:

<img style="cursor: pointer;" src="picture1.jpg" alt="" onclick="featuredcontentslider.turnrandom(myslider);" />

You can even add in a title attribute to give the users a clue when they hover the image:

<img title="Random Slide" style="cursor: pointer;" src="picture1.jpg" alt="" onclick="featuredcontentslider.turnrandom(myslider);" />

[deeksha]

Dear John..

Thanks a lot.... I am really-2 very happy n glad that u helped me a lot....I really appreciate your effort.