API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Apr 7th, 2010
444
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.33 KB | None | 0 0
raw download clone embed print report
  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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!