javascript - Why the play stop pause buttons and progressBar are not displaying at all? -
this jsfiddler issue big images wanted add buttons play stop pause , progressbar on big images: jsfiddler
when i'm doing inspect element don't see errors in red. took code of jquery: automatic slideshow timer, play-, pause-, previous- , next-
and before used coolcarousels jquery: cool responsive image slider thumbnail carousel
and code have now:
in html file:
<!doctype html> <!-- --> <html> <head> <link rel="stylesheet" type="text/css" href="carousel.css"> <link rel="stylesheet" type="text/css" href="glow-effect.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.caroufredsel/6.1.0/jquery.caroufredsel.packed.js" type="text/javascript"></script> <script src="http://malsup.github.io/jquery.cycle2.js"></script> <script src="http://malsup.github.io/jquery.cycle2.carousel.js"></script> <script src="java_script.js"></script> <title>todo supply title</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style>.container { background: rgb(170, 187, 97); /* fallback */ background: rgba(170, 187, 97, 0.5); }</style> </head> <body> <div>todo write content</div> <div id="wrapper"> <div id="carousel-wrapper"> <img id="shadow" src="img/gui/carousel_shadow.png" /> <div id="inner"> <div id="carousel"> <span id="pixar"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar007339.gif" /></span> <span id="bugs"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar005712.gif" /></span> <span id="cars"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar007337.gif" /></span> <span id="incred"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar000009.gif" /></span> <span id="monsters"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar000007.gif" /></span> <span id="nemo"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar005720.gif" /></span> <span id="radar"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar007338.gif" /></span> <span id="rat"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar003137.gif" /></span> <span id="toystory"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar000005.gif" /></span> <span id="up"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar003138.gif" /></span> <span id="walle"><img src="http://newsxpressmedia.com/files/radar-simulation-files/radar000006.gif" /></span> <div id="navi"> <div id="timer"></div> <a id="prev" href="#"></a> <a id="play" href="#"></a> <a id="next" href="#"></a> </div> </div> </div> </div> <div id="thumbs-wrapper"> <div id="thumbs"> <a href="#pixar" class="selected"><img src="img/small/pixar.jpg" /></a> <a href="#bugs"><img src="img/small/bugs.jpg" /></a> <a href="#cars"><img src="img/small/cars.jpg" /></a> <a href="#incred"><img src="img/small/incred.jpg" /></a> <a href="#monsters"><img src="img/small/monsters.jpg" /></a> <a href="#nemo"><img src="img/small/nemo.jpg" /></a> <a href="#radar"><img src="img/small/radar002665resized.jpg" /></a> <a href="#rat"><img src="img/small/rat.jpg" /></a> <a href="#toystory"><img src="img/small/toystory.jpg" /></a> <a href="#up"><img src="img/small/up.jpg" /></a> <a href="#walle"><img src="img/small/walle.jpg" /></a> </div> <a id="prev" href="#"></a> <a id="next" href="#"></a> </div> </div> <div class="carousel"> <div class="container">lorem ipsum dolor</div> <div class="container">lorem ipsum_for_testing dolor</div> </div> </body> </html> i added html file part:
<div id="inner"> and
<div id="timer"></div> <a id="prev" href="#"></a> <a id="play" href="#"></a> <a id="next" href="#"></a> then javascript file:
$(function() { $('#carousel span').append('<img src="img/gui/carousel_glare.png" class="glare" />'); $('#thumbs a').append('<img src="img/gui/carousel_glare_small.png" class="glare" />'); $('#carousel').caroufredsel({ prev: '#prev', next: '#next', auto: { button: '#play', progress: '#timer', pauseonevent: 'resume' }, responsive: true, circular: false, auto: true, infinite: true, items: { visible: 1, width: 200, height: '56%' }, scroll: { fx: 'directscroll', pauseonhover: true, duration: 500 } }); $('#thumbs').caroufredsel({ responsive: true, circular: false, infinite: false, auto: false, prev: '#prev', next: '#next', items: { visible: { min: 2, max: 6 }, width: 150, height: '66%' } }); $('#thumbs a').click(function() { $('#carousel').trigger('slideto', '#' + this.href.split('#').pop() ); $('#thumbs a').removeclass('selected'); $(this).addclass('selected'); return false; }); $('#wrapper').hover(function() { $('#navi').stop().animate({ bottom: 0 }); }, function() { $('#navi').stop().animate({ bottom: -60 }); }); }); and css file:
html, body { height: 100%; padding: 0; margin: 0; } body { background: url(img/gui/bg_glare.png) top center no-repeat #bcc; } html > body { min-height: 600px; } body * { font-family: arial, geneva, sunsans-regular, sans-serif; font-size: 14px; color: #333; line-height: 22px; } #wrapper { position: absolute; width: 50%; left: 25%; top: 50px; } #carousel-wrapper { padding-bottom: 10px; position: relative; } #carousel, #thumbs { overflow: hidden; } #carousel-wrapper .caroufredsel_wrapper { border-radius: 10px; box-shadow: 0 0 5px #899; } #carousel span, #carousel img, #thumbs a, #thumbs img { display: block; float: left; } #carousel span, #carousel a, #thumbs span, #thumbs { position: relative; } #carousel img, #thumbs img { border: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } #carousel img.glare, #thumbs img.glare { width: 102%; height: auto; } #carousel span { width: 554px; height: 313px; } #thumbs-wrapper { padding: 20px 40px; position: relative; } #thumbs { border: 2px solid #899; width: 150px; height: 100px; margin: 0 10px; overflow: hidden; border-radius: 10px; -webkit-transition: border-color .5s; -moz-transition: border-color .5s; -ms-transition: border-color .5s; transition: border-color .5s; } #thumbs a:hover, #thumbs a.selected { border-color: #566; } #wrapper img#shadow { width: 100%; position: absolute; bottom: 0; } #prev, #next { background: transparent url('img/gui/carousel_nav.png') no-repeat 0 0; display: block; width: 19px; height: 20px; margin-top: -10px; position: absolute; top: 50%; } #prev { background-position: 0 0; left: 10px; } #next { background-position: -19px 0; right: 10px; } #prev:hover { background-position: 0 -20px; } #next:hover { background-position: -19px -20px; } #prev.disabled, #next.disabled { display: none !important; } in css file didn't change code in javascript file added:
prev: '#prev', next: '#next', auto: { button: '#play', progress: '#timer', pauseonevent: 'resume' }, and
$('#wrapper').hover(function() { $('#navi').stop().animate({ bottom: 0 }); }, function() { $('#navi').stop().animate({ bottom: -60 }); }); the first jquery of carousel still working fine second link. new 1 play stop pause buttons don't see them @ all.
what mean , somehow change colors of buttons play stop pause fit color of big images maybe more light or transparent color.
and pause stop play should handle big images not small ones.
Comments
Post a Comment