Created
January 5, 2011 20:52
-
-
Save dgoldie/766982 to your computer and use it in GitHub Desktop.
complete jcarousel insert element example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" | |
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us"> | |
| <head> | |
| <title>jCarousel Examples</title> | |
| <link href="../style.css" rel="stylesheet" type="text/css" /> | |
| <!-- | |
| jQuery library | |
| --> | |
| <script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script> | |
| <!-- | |
| jCarousel library | |
| --> | |
| <script type="text/javascript" src="../lib/jquery.jcarousel.js"></script> | |
| <!-- | |
| jCarousel skin stylesheet | |
| --> | |
| <link rel="stylesheet" type="text/css" href="../skins/tango/skin.css" /> | |
| <style type="text/css"> | |
| /** | |
| * Additional styles for the controls. | |
| */ | |
| .jcarousel-control { | |
| margin-bottom: 10px; | |
| text-align: center; | |
| } | |
| .jcarousel-control a { | |
| font-size: 75%; | |
| text-decoration: none; | |
| padding: 0 5px; | |
| margin: 0 0 5px 0; | |
| border: 1px solid #fff; | |
| color: #eee; | |
| background-color: #4088b8; | |
| font-weight: bold; | |
| } | |
| .jcarousel-control a:focus, | |
| .jcarousel-control a:active { | |
| outline: none; | |
| } | |
| .jcarousel-skin-tango .jcarousel-container-horizontal { | |
| width: 330px; | |
| } | |
| .jcarousel-skin-tango .jcarousel-clip-horizontal { | |
| height: 90px; | |
| width: 320px; | |
| } | |
| li { | |
| width: 100px !important; | |
| height: 100px !important; | |
| } | |
| li > div { | |
| background: #FF66AA; | |
| padding: 5px; | |
| margin: 0; | |
| border: 1px solid blue; | |
| width: 80px; | |
| height: 80px; | |
| } | |
| </style> | |
| <script type="text/javascript"> | |
| /** | |
| * We use the initCallback callback | |
| * to assign functionality to the controls | |
| */ | |
| // function mycarousel_initCallback(carousel) { | |
| // console.log('init'); | |
| // jQuery('.jcarousel-control a').bind('click', function() { | |
| // var size = carousel.size(), | |
| // first = carousel.first, | |
| // last = carousel.last; | |
| // console.log('carousel first = ' + first + ', size = ' + size + ', last = ' + last); | |
| // | |
| // // var addIndex = first - 0.1; | |
| // // carousel.add(addIndex, '<li><div></div></li>'); | |
| // // console.log('carousel add at = ' + addIndex); | |
| // | |
| // //$('<li><div></div></li>').insertBefore(carousel.get(first)).hide().show(1000); | |
| // var index = carousel.get(first).attr('jcarouselindex'); | |
| // console.log('carousel index = ' + index); | |
| // carousel.add(index + 1, $('<li><div></div></li>')); | |
| // | |
| // var li = carousel.list.children('li'); | |
| // if (li.size() > 0) { | |
| // var wh = 0, i = carousel.options.offset; | |
| // li.each(function() { | |
| // carousel.format(this, i++); | |
| // }); | |
| // } | |
| // // trick it before scrolling | |
| // // carousel.first = first + 1; | |
| // // carousel.last = last + 1; | |
| // // carousel.scroll(first, true); | |
| // carousel.size(size + 1); | |
| // | |
| // console.log('carousel after first = ' + first + ', size = ' + carousel.size() + ', last = ' + last); | |
| // //carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text())); | |
| // return false; | |
| // }); | |
| // }; | |
| function mycarousel_initCallback(carousel) { | |
| console.log('init'); | |
| jQuery('.jcarousel-control a').bind('click', function() { | |
| var size = carousel.size(), | |
| first = carousel.first, | |
| last = carousel.last; | |
| console.log('carousel first = ' + first + ', size = ' + size + ', last = ' + last); | |
| // var addIndex = first - 0.1; | |
| // carousel.add(addIndex, '<li><div></div></li>'); | |
| // console.log('carousel add at = ' + addIndex); | |
| $('<li><div></div></li>').insertBefore(carousel.get(first)).hide().show(1000); | |
| var li = carousel.list.children('li'); | |
| if (li.size() > 0) { | |
| var wh = 0, i = carousel.options.offset; | |
| li.each(function() { | |
| carousel.format(this, i++); | |
| }); | |
| } | |
| // trick it before scrolling | |
| // carousel.first = first + 1; | |
| // carousel.last = last + 1; | |
| // carousel.scroll(first, true); | |
| carousel.size(size + 1); | |
| console.log('carousel after first = ' + first + ', size = ' + carousel.size() + ', last = ' + last); | |
| //carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text())); | |
| return false; | |
| }); | |
| }; | |
| jQuery(document).ready(function() { | |
| jQuery('#mycarousel').jcarousel({ | |
| scroll: 1, | |
| initCallback: mycarousel_initCallback | |
| }); | |
| //jQuery('#mycarousel').jcarousel(); | |
| // jQuery('#mycarousel').jcarousel({ | |
| // wrap: 'circular' | |
| // }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div id="wrap"> | |
| <h1>jCarousel</h1> | |
| <h2>Riding carousels with jQuery</h2> | |
| <h3>My Insert carousel</h3> | |
| <p> | |
| This Add button inserts a new blank element at the designated position. | |
| </p> | |
| <div id="mycarousel" class="jcarousel-skin-tango"> | |
| <div class="jcarousel-control"> | |
| <a href="#">1</a> | |
| <a href="#">2</a> | |
| <a href="#">3</a> | |
| </div> | |
| <ul> | |
| <li><div><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></div></li> | |
| <li><div><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></div></li> | |
| <li><div><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></div></li> | |
| <li><div><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></div></li> | |
| <li><div><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></div></li> | |
| <li><div><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></div></li> | |
| <li><div><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></div></li> | |
| <li><div><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></div></li> | |
| <li><div><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></div></li> | |
| <li><div><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></div><>/li> | |
| </ul> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Very good demonstration, I also found some passages for adding item to carousel to fix my UI carousel control issue, but not quite practical. These codes here are quite insightful.