javascript - Captions appear out of position in image slider -
i have been working on js slider webpage. there off in format. cannot seem figure out is.
when displays picture caption below, there space below caption, , on fifth picture, caption appears @ top of slider , there no picture displayed. here code js slider, along index.html file used implement it.
bottom of image has grey space 
after images appear slider this 
//slider js var cssslidy = function(newoptions) { var options = (function() { var mergedoptions = {}, defaultoptions = { timeonslide: 8, timebetweenslides: 1, slidycontainerselector: '#slidy-container', // name of slider container slidyselector: '#slidy', // name of slider slidydirection: 'left', // options: left, right fallbackfunction: function() {}, cssanimationname: 'slidy', captionsource: 'data-caption', // options: data-caption, alt, none captionbackground: 'rgba(0,0,0,0.5)', captioncolor: '#fff', captionfont: 'avenir, avenir next, droid sans, droidsansregular, corbel, tahoma, geneva, sans-serif', captionposition: 'bottom', // options: top, bottom captionappear: 'perm', // options: slide, perm, fade captionsize: '1.6rem', // same units captionpadding: '1.65rem' // same units }; (var option in defaultoptions) mergedoptions[option] = defaultoptions[option]; (var option in newoptions) mergedoptions[option] = newoptions[option]; return mergedoptions; })(), cs = this; cs.animationstring = 'animation'; cs.hasanimation = false; cs.keyframeprefix = ''; cs.domprefixes = 'webkit moz o khtml'.split(' '); cs.pfx = ''; cs.element = document.getelementbyid(options.slidyselector.replace('#', '')); cs.init = (function() { // browser supports keyframe animation w/o prefixes if (cs.element.style.animationname !== undefined) cs.hasanimation = true; // browser supports keyframe animation w/ prefixes if (cs.hasanimation === false) { (var = 0; < cs.domprefixes.length; i++) { if (cs.element.style[cs.domprefixes[i] + 'animationname'] !== undefined) { cs.pfx = domprefixes[i]; cs.animationstring = pfx + 'animation'; cs.keyframeprefix = '-' + pfx.tolowercase() + '-'; cs.hasanimation = true; // determines css prefix required css animations break; } } } if (cs.hasanimation === true) { var images = cs.element.getelementsbytagname("img"), l = images.length, fig = document.createelement('figure'), who, temp; while (l) { temp = fig.clonenode(false); = images[--l]; // wraps images in slider <figure> tags if (options.captionsource === "alt" || options.captionsource === "data-caption" ) { caption = who.getattribute(options.captionsource); } who.parentnode.insertbefore(temp, who); if (options.captionsource == "alt" || options.captionsource == "data-caption") { if (caption !== null) { content = document.createelement('figcaption'); content.innerhtml = caption; // places captions in each <figure> element, if required } } temp.appendchild(who); if (options.captionsource !== "none" ) { if (caption !== null) temp.appendchild(content); } } var figs = cs.element.getelementsbytagname("figure"); var firstfig = figs[0]; // first figure inside "slidy" element. figwrap = firstfig.clonenode(true); // copy it. cs.element.appendchild(figwrap); // add clone end of images var imgcount = images.length, // count number of images in slide, including new cloned element totaltime = (options.timeonslide + options.timebetweenslides) * (imgcount - 1), // calculate total length of animation multiplying number of _actual_ images amount of time both static display of each image , motion between them slideratio = (options.timeonslide / totaltime) * 100, // determine percentage of time induvidual image held static during animation moveratio = (options.timebetweenslides / totaltime) * 100, // determine percentage of time individual movement basepercentage = 100 / imgcount, // work out how wide each image should in slidy, percentage. position = 0, // set initial position of slidy element css = document.createelement("style"); // start marking new style sheet // creating css style tag css.type = "text/css"; css.id = options.slidyselector.replace('#', '') + "-css"; css.innerhtml += options.slidycontainerselector + " { overflow: hidden; }\n"; css.innerhtml += options.slidyselector + " { text-align: left; margin: 0 ; font-size: 0; position: relative; width: " + (imgcount * 100) + "%; }\n"; // set width inner slider container css.innerhtml += options.slidyselector + " figure { float: left; margin: 0; position: relative; display: inline-block; width: " + basepercentage + "%; height: auto; }\n"; // set width , size pf inner <figure> elements css.innerhtml += options.slidyselector + " figure img { width: 100%; }\n"; if (options.captionsource == "alt" || options.captionsource == "data-caption") { css.innerhtml += options.slidyselector + " figure figcaption { padding-bottom: 0px; position: absolute; line-height: 1.6rem; margin: 0 auto; width: 95.5%; background-color: " + options.captionbackground + "; color: " + options.captioncolor + "; font-family: " + options.captionfont + ";"; var captions = document.getelementsbytagname("figcaption"); var captionheight = captions[0].offsetheight * 2 + parseint(window.getcomputedstyle(captions[0]).fontsize, 10); if (options.captionposition == "top") { switch (options.captions) { case 'fade': css.innerhtml += " top: 0; opacity: 1;"; break; case 'slide': css.innerhtml += " top: -" + captionheight + "px; "; break; default: css.innerhtml += " top: 0;"; } } else { switch (options.captionappear) { case 'fade': css.innerhtml += " bottom: 0; opacity: 1;"; break; case 'slide': css.innerhtml += " bottom: -" + captionheight + "px; "; break; default: css.innerhtml += " bottom: 0;"; } } css.innerhtml += " font-size: " + options.captionsize + "; padding: " + options.captionpadding + "; " + keyframeprefix + "transition: .5s; }\n"; css.innerhtml += options.slidyselector + ":hover figure figcaption { opacity: 1; "; if (options.captionposition == "top") { css.innerhtml += " top: 0px;"; } else { css.innerhtml += " bottom: 0px;"; } css.innerhtml += " }\n"; } css.innerhtml += "@" + keyframeprefix + "keyframes " + options.cssanimationname + " {\n"; if (options.slidydirection == "right") { (i = imgcount - 1; > 0; i--) { // position += slideratio; // make keyframe position of image css.innerhtml += position + "% { left: -" + (i * 100) + "%; }\n"; position += moveratio; // make postion _next_ slide css.innerhtml += position + "% { left: -" + ((i - 1) * 100) + "%; }\n"; } } else { // slider moving left (i = 0; < (imgcount - 1); i++) { // position += slideratio; // make keyframe position of image css.innerhtml += position + "% { left: -" + (i * 100) + "%; }\n"; position += moveratio; // make postion _next_ slide css.innerhtml += position + "% { left: -" + ((i + 1) * 100) + "%; }\n"; } } css.innerhtml += "}\n"; css.innerhtml += options.slidyselector + " { "; if (options.slidydirection == "right") { css.innerhtml += "left: " + imgcount * 100 + "%" } else { css.innerhtml += "left: 0%; " } css.innerhtml += keyframeprefix + "transform: translate3d(0,0,0); " + keyframeprefix + "animation: " + totaltime + "s " + options.cssanimationname + " infinite; }\n"; // call on completed keyframe animation sequence // place css style tag if (options.csslocation !== undefined) options.csslocation.appendchild(css); else document.body.appendchild(css); } else { // fallback function options.fallbackfunction(); } })(); } [/code] //index.html [code] <!doctype html> <html lang="en"> <head> <title>home</title> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css" type="text/css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>change picture</title> <script type = "text/javascript"> function displaynextimage() { x = (x === images.length - 1) ? 0 : x + 1; document.getelementbyid("img").src = images[x]; } function displaypreviousimage() { x = (x <= 0) ? images.length - 1 : x - 1; document.getelementbyid("img").src = images[x]; } function starttimer() { setinterval(displaynextimage, 7500); } function goto(num){ document.getelementbyid("img").src = images[num - 1]; } var images = [], x = -1; images[0] = "img/image1.jpg"; images[1] = "img/image2.jpg"; images[2] = "img/image3.jpg"; </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> </head> <body class="background"> <div class="body" onload = "starttimer()"> <header class="mainheader"> <nav><ul> <li class = "motto"><img src = "img/name.png" style = "width:230px;height:55px;"></li> <li id ="l1" class="active"><a href="/mcintiresolutions/index.html">home</a></li> <li id = "whoweare"><a href="/mcintiresolutions/whoweare.html">who are</a> <ul class = "subnav"> <li><a href="/mcintiresolutions/values.html">values</a></li> <li><a href="/mcintiresolutions/leadershipteam.html">leadership team</a></li> <li><a href="/mcintiresolutions/ourteam.html">our team</a></li> </ul> </li> <li id="l3"><a href="/mcintiresolutions/whatwedo.html">solutions</a></li> <li id="l4"><a href="/mcintiresolutions/industrypartners.html">industry partners</a></li> <li id="l5"><a href="/mcintiresolutions/governmentclients.html">government clients</a></li> <li id = "careers"><a href="/mcintiresolutions/careers.html">careers</a> <ul class = "subnav"> <li><a href="/mcintiresolutions/training.html">training</a></li> <li><a href="/mcintiresolutions/benefits.html">benefits</a></li> </ul> </li> <li class ="logo"><img src = "img/logo.png" style = "width:55px;height:55px;"></li></ul> <div class = "handle" style = "height: 55px;"><img src = "img/name.png" style = "width:150px;height:35px;"> <h class = "three">☰</h></div> </nav> </header> <div class="maincontent"> <div class = "content"> <div id="slidy-container"> <figure id="slidy"> <img src="img/image1.jpg" alt="" alt data-caption = "transformation: migrating legacy environments managed service environments."> <img src="img/image2.jpg" alt="" alt data-caption = "integration: creating interoperable environments legacy systems , new services interact disparate sources of data , other services."> <img src="img/image3.jpg" alt="" alt data-caption = "modernization: migrate legacy platforms , technologies cloud environments including amazon web services."> <img src="img/image1.jpg" alt="" alt data-caption = "transformation: converting ad-hoc pmo efforts integrated governance."> <img src="img/image2.jpg" alt="" alt data-caption = "integration: enabling metrics driven decision making – linking business decisions , governance fora strategy, capabilities, performance, investments solutions."> <img src="img/image3.jpg" alt="" alt data-caption = "modernization: design , created standard implementation profile framework, adopted white house, enabling service integration , re-use."> <img srcs="img/image1.jpg" alt="" alt data-caption = "transformation: creating market exchanges between government consumers , commercial suppliers in federal workspace, government able perform source selection in one-click"> <img src="img/image2.jpg" alt="" alt data-caption = "integration: enabling portfolio management decisions through visualization , road mapping solutions."> <img src="img/image3.jpg" alt="" alt data-caption = "modernization: develop technologies directly impact mission , mission environments."> </figure> </div> <script src="cssslidy.js"></script> <script>cssslidy();</script> </div> </div> <footer class="mainfooter"> <p>copyright © 2015 <a href="http://twitter.com/cortfisher">mcintire solutions</a></p> </footer> <script> $('.handle').on('click', function(){ $('.mainheader nav ul').toggleclass('showing'); }) </script> </div> </body> </html>
Comments
Post a Comment