PDA

View Full Version : Featured Content Slider v2.5 - Using multiple external content sources



yuengling25
07-31-2014, 12:51 PM
1) Script Title: Featured Content Slider v2.5

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

3) Describe problem: I'm using this script to display the output items (each individual item is wrapped in a "contentdiv" tag) of a php file located on my home server. It's been a successful test run to this point but I have additional, similar files (at least 5 more) on my server for which I would like to have their content displayed in the same manner.

My questions are:


Is this script capable of processing multiple external files via the contentsource: ["ajax", "path_to_file"] parameter, be it out of the box or with modifications to the contentslider.js file? And, if so,

Will the script process the output of each file in order? That is, will the script display all "contentdiv" tagged items in external file "A" then all "contentdiv" tagged items in external file "B", then "C", etc. etc.?


Thanks so much in advance!

vwphillips
07-31-2014, 03:25 PM
the following 3 functions will need replacing


ajaxconnect:function(setting){
var page_request = false
if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else
return false
var pageurl=setting.contentsource[setting.an];
page_request.onreadystatechange=function(){
featuredcontentslider.ajaxpopulate(page_request, setting)
}
var bustcache=(!this.bustajaxcache)? "" : (pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', pageurl+bustcache, true)
page_request.send(null)
},

ajaxpopulate:function(page_request, setting){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
document.getElementById(setting.id).innerHTML+=page_request.responseText
setting.an++;
if (setting.contentsource[setting.an]){
this.ajaxconnect(setting);

}
else {
this.buildpaginate(setting);
}
}
},

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=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"){
document.getElementById(setting.id).innerHTML=this.ajaxloadingmsg
setting.an=1;
this.ajaxconnect(setting);
}
}

}




and the ajax files listed in the contentsource array


featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["ajax", "a1.htm", "a2.htm"], //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, contentdivs){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (0=1st slide, 1=2nd etc)
//curindex holds index of currently shown slide (0=1st slide, 1=2nd etc)
}
})



the ajax files will be loaded in order

yuengling25
07-31-2014, 07:39 PM
Works a charm from the quick test I just did using two separate files. No reason to believe it won't work just as well with 3+. The only problem I found was that the "Fetching slider Contents. Please wait..." text and the gif remain visible while the slider cycles through the content. For a quick (albeit "wonky") fix, I just deleted the <img src= reference to the gif and the "Fetching...." text from within the ajaxloadingmsg div, and all was right with the world. That said, is there a better and more proper way to go about it?

Thanks so much for the help!

vwphillips
08-01-2014, 07:31 AM
ajaxpopulate:function(page_request, setting){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
var o=document.getElementById(setting.id);
o.innerHTML+=page_request.responseText
setting.an++;
if (setting.contentsource[setting.an]){
this.ajaxconnect(setting);

}
else {
o.removeChild(o.childNodes[0]);
this.buildpaginate(setting);
}
}
},