PDA

View Full Version : Randomizing the Featured Content Slider?



gtaunt
06-22-2008, 02:58 AM
1) Script Title: Featured Content Slider

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm

3) Describe problem:

Not so much a problem as an idea. Is it possible to have the content of the Featured Content Slider cycle randomly instead of in order? Thanks for any thoughts.

jscheuer1
06-22-2008, 04:17 PM
In the contentslider.js file replace this:


autorotate:function(setting){
window["fcsautorun"+setting.id]=setInterval(function(){featuredcontentslider.turnpage(setting, "next")}, setting.autorotate[1])
},

with:


randomize:function(setting){
var n = Math.ceil(Math.random()*setting.contentdivs.length);
if(n == setting.currentpage)
n--;
return n;
},

autorotate:function(setting){
var nxt = function(setting){return setting.random? featuredcontentslider.randomize(setting) : "next";}
window["fcsautorun"+setting.id]=setInterval(function(){featuredcontentslider.turnpage(setting, nxt(setting))}, setting.autorotate[1])
},

Once you have that, it will allow you to set random here (in the on page call):


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]
random: true, //true/false - defaults to false (requires autorotate be set to true with a 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)
}
})

</script>

gtaunt
07-13-2008, 12:43 PM
Thanks so much for providing this. I really appreciate your time and effort.

javoec
12-25-2008, 07:56 PM
Thanks for the script change to work in random mode... :)

I was thinking.. is it difficult to make the script to be random when I enter the site or go to another page? ..because by default, the script remembers the last seen slide with Cookies according to the description of it.

I'm no JavaScript expert, could it be something in the onChange: function(previndex, curindex) function?

It would be great to know how to make it random, but always random.. I dunno if there's somewhere something in the configuration to make it work like I mentioned before.

Thanks in advance.

jscheuer1
12-26-2008, 04:32 PM
In the future, please start a new thread for a new question.

That said, here (in the main script) set to false as shown:


//** Featured Content Slider script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.
//** May 2nd, 08'- Script rewritten and updated to 2.0.
//** June 12th, 08'- Script updated to v 2.3, which adds the following features:
//1) Changed behavior of script to actually collapse the previous content when the active one is shown, instead of just tucking it underneath the later.
//2) Added setting to reveal a content either via "click" or "mouseover" of pagination links (default is former).
//3) Added public function for jumping to a particular slide within a Featured Content instance using an arbitrary link, for example.

//** July 11th, 08'- Script updated to v 2.4:
//1) Added ability to select a particular slide when the page first loads using a URL parameter (ie: mypage.htm?myslider=4 to select 4th slide in "myslider")
//2) Fixed bug where the first slide disappears when the mouse clicks or mouses over it when page first loads.

var featuredcontentslider={

//3 variables below you can customize if desired:
ajaxloadingmsg: '<div style="margin: 20px 0 0 20px"><img src="loading.gif" /> Fetching slider Contents. Please wait...</div>',
bustajaxcache: true, //bust caching of external ajax page after 1st request?
enablepersist: false, //persist to last content viewed when returning to page?

settingcaches: {}, //object to cache "setting" object of each script instance

jumpTo:function(fcsid, pagenumber){ //public function to go to a slide manually.
this.turnpage(this.settingcaches[fcsid], pagenumber)
},

javoec
12-28-2008, 03:41 AM
In the future, please start a new thread for a new question.
Sorry, it was my first post over here, I didn't want to start a new thread because my question is someway similar.



That said, here (in the main script) set to false as shown:


//** Featured Content Slider script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.
//** May 2nd, 08'- Script rewritten and updated to 2.0.
//** June 12th, 08'- Script updated to v 2.3, which adds the following features:
//1) Changed behavior of script to actually collapse the previous content when the active one is shown, instead of just tucking it underneath the later.
//2) Added setting to reveal a content either via "click" or "mouseover" of pagination links (default is former).
//3) Added public function for jumping to a particular slide within a Featured Content instance using an arbitrary link, for example.

//** July 11th, 08'- Script updated to v 2.4:
//1) Added ability to select a particular slide when the page first loads using a URL parameter (ie: mypage.htm?myslider=4 to select 4th slide in "myslider")
//2) Fixed bug where the first slide disappears when the mouse clicks or mouses over it when page first loads.

var featuredcontentslider={

//3 variables below you can customize if desired:
ajaxloadingmsg: '<div style="margin: 20px 0 0 20px"><img src="loading.gif" /> Fetching slider Contents. Please wait...</div>',
bustajaxcache: true, //bust caching of external ajax page after 1st request?
enablepersist: false, //persist to last content viewed when returning to page?

settingcaches: {}, //object to cache "setting" object of each script instance

jumpTo:function(fcsid, pagenumber){ //public function to go to a slide manually.
this.turnpage(this.settingcaches[fcsid], pagenumber)
},

I tried your solution. Apparently that makes the Feature Content Slider to start with the 1st slide listed each time I (for example) reload the whole page. Interesting since I can now always make people see the 1st slide (that I can emphasize the most) and then the sliders can go random.

Thanks a lot! :)

That works for me, but what I was also wondering (according to my previous post) is how to make that, each time I enter or reload the page, the Feature Content Slider could show me any of the slides in random order.

jscheuer1
12-28-2008, 04:37 AM
OK, in contentslider.js modify the highlighted line as shown (add red):


init:function(setting){
var persistedpage=this.getCookie("fcspersist"+setting.id) || 1
var urlselectedpage=this.urlparamselect(setting.id) //returns null or index from: mypage.htm?featuredcontentsliderid=index
this.settingcaches[setting.id]=setting //cache "setting" object
setting.contentdivs=[]
setting.toclinks=[]
setting.topzindex=0
setting.currentpage=setting.currentpage || urlselectedpage || ((this.enablepersist)? persistedpage : 1)
setting.prevpage=setting.currentpage
setting.revealtype="on"+(setting.revealtype || "click")
setting.curopacity=0
setting.onChange=setting.onChange || function(){}
if (setting.contentsource[0]=="inline")
this.buildpaginate(setting)
if (setting.contentsource[0]=="ajax")
this.ajaxconnect(setting)
}

Then add in the on page call (highlighted):


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]
random: true, //true/false - defaults to false (requires autorotate be set to true with a pausetime)
currentpage: Math.ceil(Math.random() * 3),
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)
}
})

Notice the red 3, it should be the total number of content divisions for that slider.

javoec
12-28-2008, 05:43 AM
Many thanks John!
That was just what I wanted: http://slurmed.com

..I really need to understand JS better.. thanks again.

deeksha
05-26-2010, 08:56 PM
Please help me out for the same content slider...
I too want random contents by clicking on same image each time...

jscheuer1
05-27-2010, 05:52 AM
Please help me out for the same content slider...
I too want random contents by clicking on same image each time...

Since the script has been updated since this thread was, the exact code changes may be different. So, if you cannot achieve your objectives by following the advice in this thread:

Please start a new thread and be as precise as you can about what you are after.