the blueberry image slider isnt sliding, here java script code please me modify or add enough code work properly. have linked blueberry.css , jquery.blueberry.js files btw. thank - student of web development
<meta charset="utf-8"></meta> <title>rose street | auto repair</title> <meta name="viewport" content="width=device-width, initail-scale=1.0"></meta> <link rel="stylesheet" href="main.css"></link> <link rel="stylesheet" href="font-awesome.css"></link> <link rel="stylesheet" href="blueberry.css"></link> <link rel="stylesheet" href="style2.css"></link> <link rel="stylesheet" id="google-fonts-css" href="//fonts.googleapis.com/css?family=open+sans%3a400%2c400italic%2c300italic%2c300%2c600%2c600italic%7clato%3a400%2c100%2c300%2c700&ver=4.0.5" type="text/css" media="all"></link> <script src="https://apis.google.com/js/platform.js"> async defer></script> <script type="text/javascript" src="jquery-1.11.2.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"</script> <script src="jquery.blueberry.js"></script> <script> $(window).load(function() { $('.blueberry').blueberry(); }); </script> <script type="text/javascript"> function scroll(){ var top = document.getelementbyid('header'); var ypos = window.pageyoffset; if(ypos < 700) { top.style.opacity = ".9"; top.style.height= "86px" }else{ top.style.opacity = ".5"; top.style.height= "100px" } } window.addeventlistener("scroll",scroll); </script> <script type="text/javascript"> $(function(){ $("#header").fadetoggle(1).delay(2000).fadetoggle(2000); $("#logo").fadetoggle(1).delay(2000).fadetoggle(2000); $("nav").fadetoggle(1).delay(2500).slidetoggle(1000); }); </script> html:
<div id="doc"> <div id="content"> <div class="blueberry"> <ul class="slides"> <li class="" style="display: inline;"> <img src="http://ultraimg.com/images/93ee8dce5462.jpg" alt="slide1"> </li> <li class="active" style="display: inline;"> <img src="http://ultraimg.com/images/85173643ed34.jpg" alt="slide2"> </li> <li class="" style="display: none;"> <img src="http://www.thehogring.com/wp-content/uploads/2012/11/the-hog-ring-auto-upholstery-community-auto-trimmer-history-11.jpg" alt="slide3"> </li> <li class="" style="display: none;"> <img src="http://theoldmotor.com/wp-content/uploads/2013/11/euclid1-600x351.jpg" alt="slide4"> </li> </ul> <ul class="pager"> <li class=""> <a href="#"><span>0</span></a> </li> <li class=""> <a href="#"><span>1</span></a> </li> <li class=""> <a href="#"><span>2</span></a> </li> <li class="active"> <a href="#"><span>3</span></a> </li> </ul> </div> </div> </div>
i have trouble understanding problem.
your code seems work pretty well
//jquery blueberry slider v0.4 beta !function(e){e.fn.extend({blueberry:function(a){var i={interval:5e3,duration:500,lineheight:1,height:"auto",hoverpause:!1,pager:!0,nav:!0,keynav:!0},a=e.extend(i,a);return this.each(function(){var i=a,n=e(this),t=e(".slides li",n),u=e(".pager li",n),s=0,c=s+1,l=t.eq(s).find("img").height(),r=t.eq(s).find("img").width(),d=r/l,o=0,h=0;t.hide().eq(s).fadein(i.duration).addclass("active"),u.length?u.eq(s).addclass("active"):i.pager&&(n.append('<ul class="pager"></ul>'),t.each(function(a){e(".pager",n).append('<li><a href="#"><span>'+a+"</span></a></li>")}),u=e(".pager li",n),u.eq(s).addclass("active")),u&&e("a",u).click(function(){return cleartimeout(n.play),c=e(this).parent().index(),f(),!1});var f=function(){t.eq(s).fadeout(i.duration).removeclass("active").end().eq(c).fadein(i.duration).addclass("active").queue(function(){p(),e(this).dequeue()}),u&&u.eq(s).removeclass("active").end().eq(c).addclass("active"),s=c,c=s>=t.length-1?0:s+1},p=function(){n.play=settimeout(function(){f()},i.interval)};p(),i.hoverpause&&t.hover(function(){cleartimeout(n.play)},function(){p()});var v=function(){o=e(".slides",n).width(),h=math.floor(o/d/i.lineheight)*i.lineheight,e(".slides",n).css({height:h})};v(),e(window).resize(function(){v()}),i.keynav&&e(document).keyup(function(e){switch(e.which){case 39:case 32:cleartimeout(n.play),f();break;case 37:cleartimeout(n.play),c=s-1,f()}})})}})}(jquery); $(window).load(function() { $('.blueberry').blueberry(); });/* * jquery blueberry slider v0.4 beta * http://marktyrrell.com/labs/blueberry/ * * copyright (c) 2011, mark tyrrell <me@marktyrrell.com> * * program free software: can redistribute and/or modify * under terms of gnu general public license published * free software foundation, either version 3 of license, or * (at option) later version. * * program distributed in hope useful, * without warranty; without implied warranty of * merchantability or fitness particular purpose. see * gnu general public license more details. * * should have received copy of gnu general public license * along program. if not, see <http://www.gnu.org/licenses/>. * */ .blueberry { margin: 0 auto; } .blueberry .slides { display: block; position: relative; overflow: hidden; } .blueberry .slides li { position: absolute; top: 0; left: 0; overflow: hidden; } .blueberry .slides li img { display: block; width: 100%; max-width: none; } .blueberry .slides li.active { display: block; position: relative; } .blueberry .crop li img { width: auto; } .blueberry .pager { height: 40px; text-align: center; } .blueberry .pager li { display: inline-block; } .blueberry .pager li a, .blueberry .pager li span { display: block; height: 4px; width: 4px; } .blueberry .pager li { padding: 18px 8px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; -ms-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; } .blueberry .pager li span { overflow: hidden; background: #c0c0c0; text-indent: -9999px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px; } .blueberry .pager li.active span { background: #404040; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://raw.githubusercontent.com/marktuk/blueberry/master/blueberry.css"></link> <div id="doc"> <div id="content"> <div class="blueberry"> <ul class="slides"> <li class="" style="display: inline;"><img src="http://ultraimg.com/images/93ee8dce5462.jpg" alt="slide1"></li> <li class="active" style="display: inline;"><img src="http://ultraimg.com/images/85173643ed34.jpg" alt="slide2"></li> <li class="" style="display: none;"><img src="http://www.thehogring.com/wp-content/uploads/2012/11/the-hog-ring-auto-upholstery-community-auto-trimmer-history-11.jpg" alt="slide3"></li> <li class="" style="display: none;"><img src="http://theoldmotor.com/wp-content/uploads/2013/11/euclid1-600x351.jpg" alt="slide4"></li> </ul> <ul class="pager"> <li><a href="#"><span></span></a></li> <li><a href="#"><span></span></a></li> <li><a href="#"><span></span></a></li> <li><a href="#"><span></span></a></li> </ul> </div> </div> </div>
Comments
Post a Comment