Want more features on Pastebin? Sign Up, it's FREE!
Guest

Untitled

By: a guest on Apr 7th, 2010  |  syntax: None  |  size: 9.33 KB  |  views: 350  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
  3. <head profile="http://gmpg.org/xfn/11">
  4. <title> Demo </title>
  5. <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  6.  
  7. <style type="text/css">
  8. /**
  9.  * This <div> element is wrapped by jCarousel around the list
  10.  * and has the classname "jcarousel-container".
  11.  */
  12. .jcarousel-container {
  13.     position: relative;
  14. }
  15.  
  16. .jcarousel-clip {
  17.     z-index: 2;
  18.     padding: 0;
  19.     margin: 0;
  20.     overflow: hidden;
  21.     position: relative;
  22. }
  23.  
  24. .jcarousel-list {
  25.     z-index: 1;
  26.     overflow: hidden;
  27.     position: relative;
  28.     top: 0;
  29.     left: 0;
  30.     margin: 0;
  31.     padding: 0;
  32. }
  33.  
  34. .jcarousel-list li,
  35. .jcarousel-item {
  36.     float: left;
  37.     list-style: none;
  38.     /* We set the width/height explicitly. No width/height causes infinite loops. */
  39.     width: 75px;
  40.     height: 75px;
  41. }
  42.  
  43. /**
  44.  * The buttons are added dynamically by jCarousel before
  45.  * the <ul> list (inside the <div> described above) and
  46.  * have the classnames "jcarousel-next" and "jcarousel-prev".
  47.  */
  48. .jcarousel-next {
  49.     z-index: 3;
  50.     display: none;
  51. }
  52.  
  53. .jcarousel-prev {
  54.     z-index: 3;
  55.     display: none;
  56. }
  57.  
  58.  
  59.  
  60.  
  61.  
  62.  
  63.  
  64. /* -------------------------------------------- */
  65. /* ------------ LARGE (INDEX PAGE) ------------ */
  66. /* -------------------------------------------- */
  67.  
  68. .jcarousel-skin-atlantica .jcarousel-container {
  69.     background: transparent;
  70.         margin: 0 auto;
  71. }
  72.  
  73. .jcarousel-skin-atlantica .jcarousel-container-horizontal {
  74.     width: 936px;
  75.     padding-left: 30px;
  76.     padding-right: 30px;
  77. }
  78.  
  79. .jcarousel-skin-atlantica .jcarousel-clip-horizontal {
  80.     width:  936px;
  81.     height: 292px;
  82. }
  83.  
  84. .jcarousel-skin-atlantica .jcarousel-item {
  85.     width: 458px;
  86.     height: 284px;
  87.     padding: 3px;
  88.     border: 1px solid #e0e0e0;
  89. }
  90.  
  91. .jcarousel-skin-atlantica .jcarousel-item-horizontal {
  92.     margin-right: 4px;
  93. }
  94.  
  95. .jcarousel-skin-atlantica .jcarousel-item-placeholder {
  96.     background: transparent;
  97.     color: #000;
  98. }
  99.  
  100. /**
  101.  *  Horizontal Buttons
  102.  */
  103. .jcarousel-skin-atlantica .jcarousel-next-horizontal {
  104.     position: absolute;
  105.     top: 120px;
  106.     right: 30px;
  107.     width: 30px;
  108.     height: 54px;
  109.     cursor: pointer;
  110.     background: transparent url(http://opalia-occasions.riprod.fr/components/com_ezautos/library/slideshow/images/arrow_right.gif) no-repeat 0 0;
  111. }
  112.  
  113. .jcarousel-skin-atlantica .jcarousel-prev-horizontal {
  114.     position: absolute;
  115.     top: 120px;
  116.     left: 30px;
  117.     width: 30px;
  118.     height: 54px;
  119.     cursor: pointer;
  120.     background: transparent url(http://opalia-occasions.riprod.fr/components/com_ezautos/library/slideshow/images/arrow_left.gif) no-repeat 0 0;
  121. }
  122.    
  123. /* -------------------------------------------- */
  124. /* ------------ SMALL (ABOUT THE STUDIO PAGE) ------------ */
  125. /* -------------------------------------------- */
  126.  
  127. .jcarousel-skin-atlantica-small .jcarousel-container {
  128.     background: transparent;
  129.         margin: 0 auto;
  130. }
  131.  
  132. .jcarousel-skin-atlantica-small .jcarousel-container-horizontal {
  133.     width: 936px;
  134.     padding-left: 30px;
  135.     padding-right: 30px;
  136. }
  137.  
  138. .jcarousel-skin-atlantica-small .jcarousel-clip-horizontal {
  139.     width:  936px;
  140.     height: 140px;
  141.     border-bottom: 1px dotted #c2c2c2;
  142.     border-top: 1px dotted #c2c2c2;
  143.     padding: 15px 0;
  144. }
  145.  
  146. .jcarousel-skin-atlantica-small .jcarousel-item {
  147.     width: 210px;
  148.     height: 130px;
  149.     padding: 3px;
  150.     border: 1px solid #e0e0e0;
  151. }
  152.  
  153. .jcarousel-skin-atlantica-small .jcarousel-item-horizontal {
  154.     margin-right: 20px;
  155. }
  156.  
  157.  
  158. .jcarousel-skin-atlantica-small .jcarousel-item-placeholder {
  159.     background: #fff;
  160.     color: #000;
  161. }
  162.  
  163. /**
  164.  *  Horizontal Buttons
  165.  */
  166. .jcarousel-skin-atlantica-small .jcarousel-next-horizontal {
  167.     position: absolute;
  168.     top: 55px;
  169.     right: 30px;
  170.     width: 30px;
  171.     height: 54px;
  172.     cursor: pointer;
  173.     background: transparent url(http://opalia-occasions.riprod.fr/components/com_ezautos/library/slideshow/images/arrow_right.gif) no-repeat 0 0;
  174. }
  175.  
  176. .jcarousel-skin-atlantica-small .jcarousel-prev-horizontal {
  177.     position: absolute;
  178.     top: 55px;
  179.     left: 30px;
  180.     width: 30px;
  181.     height: 54px;
  182.     cursor: pointer;
  183.     background: transparent url(http://opalia-occasions.riprod.fr/components/com_ezautos/library/slideshow/images/arrow_left.gif) no-repeat 0 0;
  184. }
  185.  
  186.  
  187.  
  188. /* -------------------------------------------- */
  189. /* ------------ Gallery (PORTFOLIO PAGE) ------------ */
  190. /* -------------------------------------------- */
  191.  
  192. .jcarousel-skin-atlantica-gallery .jcarousel-container {
  193.     background: transparent;
  194.         margin: 0 auto;
  195. }
  196.  
  197. .jcarousel-skin-atlantica-gallery .jcarousel-container-horizontal {
  198.     width: 936px;
  199.     padding-left: 30px;
  200.     padding-right: 30px;
  201.     }
  202.  
  203. .jcarousel-skin-atlantica-gallery .jcarousel-clip-horizontal {
  204.     width:  936px;
  205.     height: 610px;
  206.  
  207.     border-top: 1px dotted #c2c2c2;
  208. }
  209.  
  210. .jcarousel-skin-atlantica-gallery .jcarousel-item {
  211.     width: 210px;
  212.     height: 575px;
  213. }
  214.  
  215. .jcarousel-skin-atlantica-gallery .jcarousel-item-horizontal {
  216.     margin-right: 25px;
  217.     padding: 15px 0;
  218. }
  219.  
  220. .jcarousel-skin-atlantica-gallery .jcarousel-item-horizontal img {
  221.     margin-bottom: 10px;
  222.     padding: 3px;
  223.     border: 1px solid #e0e0e0;
  224. }
  225.  
  226.  
  227. .jcarousel-skin-atlantica-gallery .jcarousel-item-placeholder {
  228.     background: #fff;
  229.     color: #000;
  230. }
  231.  
  232. /**
  233.  *  Horizontal Buttons
  234.  */
  235. .jcarousel-skin-atlantica-gallery .jcarousel-next-horizontal {
  236.     position: absolute;
  237.     top: 290px;
  238.     right: 30px;
  239.     width: 30px;
  240.     height: 54px;
  241.     cursor: pointer;
  242.     background: transparent url(http://opalia-occasions.riprod.fr/components/com_ezautos/library/slideshow/images/arrow_right.gif) no-repeat 0 0;
  243. }
  244.  
  245. .jcarousel-skin-atlantica-gallery .jcarousel-prev-horizontal {
  246.     position: absolute;
  247.     top: 290px;
  248.     left: 30px;
  249.     width: 30px;
  250.     height: 54px;
  251.     cursor: pointer;
  252.     background: transparent url(http://opalia-occasions.riprod.fr/components/com_ezautos/library/slideshow/images/arrow_left.gif) no-repeat 0 0;
  253. }
  254. </style>
  255.  
  256. <script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
  257. <script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.pack.js"></script>
  258.  
  259.  
  260. <script type="text/javascript">
  261. $(document).ready(function(){
  262.  
  263. function cBefore (carousel, item, i, state, evt)
  264. {
  265.  
  266.         var ii = carousel.index(i, ($("#mycarousel li").length));
  267.         carousel.remove(i);
  268.         carousel.add(i, $("#mycarousel li:nth-child("+ii+")").html());
  269. }
  270.  
  271.  
  272. function cAfter (carousel, item, i, state, evt)
  273. {
  274.         carousel.remove(i);
  275. }
  276.  
  277.         // Activate jCarousel
  278.         function carouselCallback(carousel)
  279.         {
  280.         // Disable autoscrolling if the user clicks the prev or next button.
  281.         carousel.buttonNext.bind('click', function() {
  282.             carousel.startAuto(0);
  283.         });
  284.                
  285.         carousel.buttonPrev.bind('click', function() {
  286.             carousel.startAuto(0);
  287.         });
  288.                
  289.         // Pause autoscrolling if the user moves with the cursor over the clip.
  290.         carousel.clip.hover(function() {
  291.             carousel.stopAuto();
  292.         }, function() {
  293.             carousel.startAuto();
  294.         });
  295.         };
  296.  
  297.  
  298.         jQuery('#mycarousel').jcarousel({
  299.             auto: 8,
  300.             wrap: 'circular',
  301.             animation: 'slow',
  302.             scroll: 1,
  303.             initCallback: carouselCallback,
  304.  
  305.         itemVisibleInCallback: {onBeforeAnimation: cBefore},
  306.         itemVisibleOutCallback: {onAfterAnimation: cAfter}
  307.  
  308.     });
  309.  
  310. });
  311.  
  312. </script>
  313. </head>
  314. <body>
  315.  
  316.  
  317. <div class="gallery">
  318. <ul id="mycarousel" class="jcarousel-skin-atlantica-small">
  319. <li> <a  href="#"><img src="http://www.designofsignage.com/application/symbol/hands/image/600x600/hand-1-one.jpg" alt="1" title="1" width="210" /></a></li>
  320. <li> <a  href="#"><img src="http://www.designofsignage.com/application/symbol/hands/image/600x600/hand-2-two.jpg" alt="1" title="2" width="210" /></a></li>
  321. <li> <a  href="#"><img src="http://www.designofsignage.com/application/symbol/hands/image/600x600/hand-3-three.jpg" alt="1" title="3" width="210" /></a></li>
  322. <li> <a  href="#"><img src="http://www.designofsignage.com/application/symbol/hands/image/600x600/hand-4-four.jpg" alt="1" title="4" width="210" /></a></li>
  323. <li> <a  href="#"><img src="http://www.designofsignage.com/application/symbol/hands/image/600x600/hand-5-five.jpg" alt="1" title="5" width="210" /></a></li>
  324. <li> <a  href="#"><img src="http://www.designofsignage.com/application/symbol/hands/image/600x600/hand-6-six.jpg" alt="1" title="6" width="210" /></a></li>
  325. <li> <a  href="#"><img src="http://www.designofsignage.com/application/symbol/hands/image/600x600/hand-7-seven.jpg" alt="1" title="7" width="210" /></a></li>
  326. <li> <a  href="#"><img src="http://www.designofsignage.com/application/symbol/hands/image/600x600/hand-8-eight.jpg" alt="1" title="8" width="210" /></a></li>
  327. <li> <a  href="#"><img src="http://www.designofsignage.com/application/symbol/hands/image/600x600/hand-9-nine.jpg" alt="1" title="9" width="210" /></a></li>
  328. <li> <a  href="#"><img src="http://www.designofsignage.com/application/symbol/hands/image/600x600/hand-10-ten.jpg" alt="1" title="10" width="210" /></a></li>
  329. </ul>
  330. </div>
  331.  
  332. <div class="clear"></div>
  333.  
  334. </body>
  335. </html>
clone this paste RAW Paste Data