May 18, 201313 yr Hi everyone. Here I am again with this site, I was hoping I wouldn't have to show it to you again; it's almost complete but I have a problem putting together an image slider using a Javascript. This is an open source JS script that I've been trying to tweak to my own needs. I may not even end up using it but I'm stumped with this right now! :/ Here's a fiddle for it proof that the script should work. http://jsfiddle.net/xc8T2/1/ To save posting space this is the page, please view source html on browser. JavaScript //Background Image Slideshow- © Dynamic Drive (www.dynamicdrive.com) //For full source code, 100's more DHTML scripts, and TOS, //visit http://www.dynamicdrive.com //Specify background images to slide var bgslides=new Array() bgslides[0]="http://s9.postimage.org/44gbi2h3v/test1.png" bgslides[1]="http://s9.postimage.org/45q9bhixn/test2.png" bgslides[2]="http://s9.postimage.org/ki0b17x97/test3.png" bgslides[3]="http://s9.postimage.org/ndde83197/test4.png" bgslides[4]="http://s9.postimage.org/yed4quivv/test5.png" bgslides[5]="http://s9.postimage.org/qa50m3wgr/test6.png" //preload images var processed=new Array() for (i=0;i<bgslides.length;i++){ processed[i]=new Image() processed[i].src=bgslides[i] } // Animate (11-January-2010) // by Vic Phillips http://www.vicsjavascripts.org.uk // To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time. // With the ability to scale the effect time on specified minimum/maximum values // and with three types of progression 'sin' and 'cos' and liner. // **** Application Notes // **** The HTML Code // // when moving an element the inline or class rule style position of the element should be assigned as // 'position:relative;' or 'position:absolute;' // // The element would normally be assigned a unique ID name. // // **** Initialising the Script. // // The script is initialised by assigning an instance of the script to a variable. // e.g A = new zxcAnimate('left','id1') // where: // A = a global variable (variable) // parameter 0 = the mode(see Note 1). (string) // parameter 1 = the unique ID name or element object. (string or element object) // parameter 1 = the initial value. (digits, default = 0) // **** Executing the Effect // // The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);' // where: // A = the global referencing the script instance. (variable) // parameter 0 = the start value. (digits, for opacity minimum 0, maximum 100) // parameter 1 = the finish value. (digits, for opacity minimum 0, maximum 100) // parameter 2 = period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds) // parameter 3 = (optional) to scale the effect time on a specified minimum/maximum. (array, see Note 3) // field 0 the minimum value. (digits) // field 1 the maximum value. (digits) // parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'. (string, default = 'liner') // 'sin' progression starts fast and ends slow. // 'cos' progression starts slow and ends fast. // // Note 1: Examples modes: 'left', 'top', 'width', 'height', 'opacity. // Note 2: The default units(excepting opacity) are 'px'. // For hyphenated modes, the first character after the hyphen must be upper case, all others lower case. // Note 3: The scale is of particular use when re-calling the effect // in mid progression to retain an constant rate of progression. // Note 4: The current effect value is recorded in A.data[0]. // Note 5: A function may be called on completion of the effect by assigning the function // to the animator intance property .Complete. // e.g. [instance].Complete=function(){ alert(this.data[0]); }; // // **** Functional Code(1.58K) - NO NEED to Change function zxcAnimate(mde,obj,srt){ this.to=null; this.obj=typeof(obj)=='object'?obj:document.getElementById(obj); this.mde=mde.replace(/\W/g,''); this.data=[srt||0]; return this; } zxcAnimate.prototype.animate=function(srt,fin,ms,scale,c){ clearTimeout(this.to); this.time=ms||this.time||0; this.neg=srt<0||fin<0; this.data=[srt,srt,fin]; this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0]))); this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:''; this.inc=Math.PI/(2*this.mS); this.srttime=new Date().getTime(); this.cng(); } zxcAnimate.prototype.cng=function(){ var oop=this,ms=new Date().getTime()-this.srttime; this.data[0]=(this.c=='s')?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:(this.c=='c')?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1]; this.apply(); if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10); else { this.data[0]=this.data[2]; this.apply(); if (this.Complete) this.Complete(this); } } zxcAnimate.prototype.apply=function(){ if (isFinite(this.data[0])){ if (this.data[0]<0&&!this.neg) this.data[0]=0; if (this.mde!='opacity') this.obj.style[this.mde]=Math.floor(this.data[0])+'px'; else zxcOpacity(this.obj,this.data[0]); } } function zxcOpacity(obj,opc){ if (opc<0||opc>100) return; obj.style.filter='alpha(opacity='+opc+')'; obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001; } <!-- function BGFade(o){ var p=document.getElementById(o.ID) if (p){ var bgs=p.getElementsByTagName('IMG'); this.bgs=[]; for (var z0=0;z0<bgs.length;z0++){ this.bgs[z0]=new zxcAnimate('opacity',bgs[z0]); } this.nu=z0-1; this.ms=o.Duration||1000; this.hold=o.Hold||this.ms*2; if(this.nu>0){ this.Rotate(); } } } BGFade.prototype.Rotate=function(){ this.bgs[this.nu].obj.style.zIndex='0'; this.bgs[this.nu].animate(100,0,this.ms); this.nu=++this.nu%this.bgs.length; this.bgs[this.nu].obj.style.zIndex='1'; this.bgs[this.nu].obj.style.left=-(this.bgs[this.nu].obj.width-zxcWWHS()[0])/2+'px'; // horizontal center this.bgs[this.nu].obj.style.top=-(this.bgs[this.nu].obj.height-zxcWWHS()[1])/2+'px'; // vertical center this.bgs[this.nu].animate(0,100,this.ms); var oop=this; this.to=setTimeout(function(){ oop.Rotate(); },this.hold); } function zxcByClassName(nme,el,tag){ if (typeof(el)=='string') el=document.getElementById(el); el=el||document; for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){ if(reg.test(els[z0].className)) ary.push(els[z0]); } return ary; } function zxcWWHS(){ if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset]; else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop]; return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop]; } new BGFade({ ID:'slider', // the unique id name of the container div. (string) Duration:1000, // the duration of the fade effect in milli seconds. (digits) Hold:2000 // the duration of the change between images in milli seconds. (digits) }); //--> CSS #slider { position: absolute; z-Index:0; } #slider img { position: absolute; top: 50px !important; left: 50px !important; opacity: -0.001; } I'm at my wits end as to why I can't tweak it to work on my own server. Please advise if you can. Anyone who can help me fix it gets a virtual cookie.
May 18, 201313 yr you have missed spelled the url in the link taken you to a page not found you have missed the second c out in church will take a look for you now
May 18, 201313 yr Author you have missed spelled the url in the link taken you to a page not found you have missed the second c out in church will take a look for you now Ooops, sorry!
May 20, 201313 yr I'm not the best person to advise on JavaScript but don't you need to link to the latest jQuery when using one of these scripts? e.g. <script src="javascripts/jquery.js"></script> It's a naiive thing for me to say, but I always have them in place when working with scripts. If I'm not hosting the script, I link to a CDN like Google's. There are so many jQuery sliders out there that might be better to use if you can't get this working. I've used NivoSlider, Orbit, AnythingSlider by Chris Coyier - the list goes on. They're all free and super easy to use (I showed one of my clients how to configure Nivo - it was that easy ). Sorry I can't help further.
May 20, 201313 yr Author You may have been a big help with your suggestions, but as far as I see this isn't a Jquery framework, and is pure Javascript. I've literally tried every conceivable means of getting to recognise the script including inline scripts and external files. If this situation can't be helped, I'll just move and try one of your suggestions till I find something that not only works but works cross browser.
May 20, 201313 yr Perhaps it would be better just to use some well-tryed and use-proven Jquery plugin (like Nivo slider for instance).
May 20, 201313 yr It may be because you're duplicating the javascript content on the page. For example, you're calling jsfiddle CSS and jsfidde JS which are the files necessary to run the script. However, you've also got two script blocks below these, trying to do the same thing. So, remove the two <script></script> blocks after this in your head section: <link rel="canonical" href="http://www.autoc.co.uk/index.html"> I don't think they're necessary. Once you've removed them, try the page again. Let me know how it goes
May 20, 201313 yr Author Don't know how autoc got in there that's a totally different site. Took the scripts out, I think I may have nested one or 2 of them but still no joy. But if it helps I got it to work on a blank page putting my mind at rest that it's nothing to do with my host server configuration. http://www.elimchurchbishopauckland.co.uk/gallery2.html And the effect: http://www.elimchurchbishopauckland.co.uk/tmp2.html Edited to add: I forgot to mention the place I wanted to add, the effect in the HTML with the div has the ID "slider", but it's nested inside other divs, is it perhaps that I need to update the CSS to reflect that its nested inside the section and another div? Thanks. Edited May 20, 201313 yr by webDesignerJon
May 20, 201313 yr Don't know how autoc got in there that's a totally different site. Took the scripts out, I think I may have nested one or 2 of them but still no joy. But if it helps I got it to work on a blank page putting my mind at rest that it's nothing to do with my host server configuration. http://www.elimchurchbishopauckland.co.uk/gallery2.html And the effect: http://www.elimchurchbishopauckland.co.uk/tmp2.html Edited to add: I forgot to mention the place I wanted to add, the effect in the HTML with the div has the ID "slider", but it's nested inside other divs, is it perhaps that I need to update the CSS to reflect that its nested inside the section and another div? Thanks. I was thinking that may be the case. Could be a positioning issue as I can see there's quite a few divs there with absolute/relative positioning and it just may be that the slider is stuck behind it all. Unfortunately, I'm getting a 503 Service Unavailable error and can't access the page.
May 20, 201313 yr Author I was thinking that may be the case. Could be a positioning issue as I can see there's quite a few divs there with absolute/relative positioning and it just may be that the slider is stuck behind it all. Unfortunately, I'm getting a 503 Service Unavailable error and can't access the page. Give me strength. :D Going to have to come back and try this later. Server is getting unbearable!
May 20, 201313 yr Author http://www.elimchurchbishopauckland.co.uk/gallery2.html I found the image. I think wherever the problem lies it's in the script, don't think it's CSS. There's a still on the page now but no fade effects.
May 20, 201313 yr Could be that the images defined in your HTML are different to those defined in your javascript, for example: //Specify background images to slide var bgslides=new Array() bgslides[0]="http://s9.postimage.org/44gbi2h3v/test1.png" bgslides[1]="http://s9.postimage.org/45q9bhixn/test2.png" bgslides[2]="http://s9.postimage.org/ki0b17x97/test3.png" bgslides[3]="http://s9.postimage.org/ndde83197/test4.png" bgslides[4]="http://s9.postimage.org/yed4quivv/test5.png" bgslides[5]="http://s9.postimage.org/qa50m3wgr/test6.png" HTML: <div id="slider"> <img src="http://www.elimchurchbishopauckland.co.uk/images/IMG_2865.png"> <img src="http://www.elimchurchbishopauckland.co.uk/images/IMG_1155.png"> <img src="http://www.elimchurchbishopauckland.co.uk/images/IMG_1156.png"> <img src="http://www.elimchurchbishopauckland.co.uk/images/IMG_1152.png"> <img src="http://www.elimchurchbishopauckland.co.uk/images/IMG_1019.png"> </div> Could be the issue, but I'm unsure at the moment.
May 20, 201313 yr Author That was an oversight on my part, (thought they were the same images) but sadly it's not the fix.
May 20, 201313 yr I've created this fiddle and it works without issue... Just compare the scripts and ensure everything is the same. One thing I have noticed is you've set the opacity to 1 for the slider images inside jsfiddle.css. Removing that will help too. Here's the Fiddle: http://jsfiddle.net/LyndseyB/SG5yT/ Edited May 20, 201313 yr by Lyndsey Forgot to add link
May 20, 201313 yr Add the link to the script just before your closing body tag Edited May 20, 201313 yr by mteam
May 20, 201313 yr Author Success! Finally! Add the link to the script just before your closing body tag Bro!! what's the secret? Why there and not in the head? It worked but I'm intrigued!! Thanks! I've created this fiddle and it works without issue... Just compare the scripts and ensure everything is the same. One thing I have noticed is you've set the opacity to 1 for the slider images inside jsfiddle.css. Removing that will help too. Here's the Fiddle: http://jsfiddle.net/LyndseyB/SG5yT/ Well... we've got there per the post above. Thanks for putting yourself out to help me! It's much appreciated. and mteam!
May 20, 201313 yr Ah, so the issue was because the script was loading in the head. Nice one mteam You're welcome Jon!
May 20, 201313 yr Author Wish I could give BA to you both but mteam has it I'm meeting the client tonight so they'll be happy to at least have a functioning test slider to present to them. Woop!! Day made.
May 20, 201313 yr Its trying to run before everything loaded At a guess you could probably wrap your code in the js file with window onload and leave your link in the head window.onload = function() { //all the javascript in here }; I think that should work I'm out of practise
Create an account or sign in to comment