Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Problem z jCarousel
Forum PHP.pl > Forum > XML, AJAX
malin90
Witam
Chciałem stworzyć na swojej stronie galerię zdjęć. Natrafiłem na skrypt jCarousel, który bardzo odpowiada mi pod względem działania.
Mam z nim jednak mały problem otóż liczba miniaturek w skrypcie jest ograniczona do 3 sztuk, ja potrzebowałbym 5. Nie wiem jak to zrobić.
Mam nadzieję że znajdę pomoc na forum winksmiley.jpg

Tu jest stronka ze skryptem: http://sorgalla.com/jcarousel/

Pozdrawiam serdecznie
vokiel
Wystarczy zajrzeć do dokumentacji:

[JAVASCRIPT] pobierz, plaintext
  1. jQuery('#mycarousel').jcarousel({
  2. // Explicitly set size. Otherwise, jCarousel will limit the
  3. // carousel to 3 items (the number of available items on initialization)
  4. size: 5
  5. });
[JAVASCRIPT] pobierz, plaintext
malin90
Dzięki za odpowiedź.
Mam jednak jeszcze jedno pytanie, otóż...gdzie to wpisać ;P
Próbowałem w kodzie który jest w "headzie" strony, tam jest taki kodzik:
  1. jQuery(document).ready(function() {
  2. jQuery('#mycarousel').jcarousel({
  3. size: mycarousel_itemList.length,
  4. itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
  5. });


W miejsce "size" wpisałem 5 ale nic to nie dało. Patrzyłem też w innych plikach ale nie ma tam podobnych kodów do tego wyżej.

To jest w sekcji head:
  1. <link href="style.css" rel="stylesheet" type="text/css" />
  2. <!--
  3. jQuery library
  4. -->
  5. <script type="text/javascript" src="lib/jquery-1.2.3.pack.js"></script>
  6. <!--
  7. jCarousel library
  8. -->
  9. <script type="text/javascript" src="lib/jquery.jcarousel.pack.js"></script>
  10. <!--
  11. Thickbox 3 library
  12. -->
  13. <script type="text/javascript" src="lib/thickbox/thickbox.js"></script>
  14. <!--
  15. jCarousel core stylesheet
  16. -->
  17. <link rel="stylesheet" type="text/css" href="lib/jquery.jcarousel.css" />
  18.  
  19. <!--
  20. Thickbox stylesheet
  21. -->
  22. <link rel="stylesheet" type="text/css" href="lib/thickbox/thickbox.css" />
  23. <!--
  24. jCarousel skin stylesheet
  25. -->
  26. <link rel="stylesheet" type="text/css" href="skins/ie7/skin.css" />
  27.  
  28. <script type="text/javascript">
  29.  
  30. // Set thickbox loading image
  31. tb_pathToImage = "images/loading-thickbox.gif";
  32.  
  33. var mycarousel_itemList = [
  34. {url: "http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg", title: "Flower1"},
  35. {url: "http://static.flickr.com/75/199481072_b4a0d09597_s.jpg", title: "Flower2"},
  36. {url: "http://static.flickr.com/57/199481087_33ae73a8de_s.jpg", title: "Flower3"},
  37. {url: "http://static.flickr.com/77/199481108_4359e6b971_s.jpg", title: "Flower4"},
  38. {url: "http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg", title: "Flower5"},
  39. {url: "http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg", title: "Flower6"},
  40. {url: "http://static.flickr.com/58/199481218_264ce20da0_s.jpg", title: "Flower7"},
  41. {url: "http://static.flickr.com/69/199481255_fdfe885f87_s.jpg", title: "Flower8"},
  42. {url: "http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg", title: "Flower9"},
  43. {url: "http://static.flickr.com/70/229228324_08223b70fa_s.jpg", title: "Flower10"}
  44. ];
  45.  
  46. function mycarousel_itemLoadCallback(carousel, state)
  47. {
  48. for (var i = carousel.first; i <= carousel.last; i++) {
  49. if (carousel.has(i)) {
  50. continue;
  51. }
  52.  
  53. if (i > mycarousel_itemList.length) {
  54. break;
  55. }
  56.  
  57. // Create an object from HTML
  58. var item = jQuery(mycarousel_getItemHTML(mycarousel_itemList[i-1])).get(0);
  59.  
  60. // Apply thickbox
  61. tb_init(item);
  62.  
  63. carousel.add(i, item);
  64. }
  65. };
  66.  
  67. /**
  68. * Item html creation helper.
  69. */
  70. function mycarousel_getItemHTML(item)
  71. {
  72. var url_m = item.url.replace(/_s.jpg/g, '_m.jpg');
  73. return '<a href="' + url_m + '" title="' + item.title + '"><img src="' + item.url + '" width="75" height="75" border="0" alt="' + item.title + '" /></a>';
  74. };
  75.  
  76. jQuery(document).ready(function() {
  77. jQuery('#mycarousel').jcarousel({
  78. size: mycarousel_itemList.length,
  79. itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
  80. });
  81. });
  82.  
  83. </script>
  84.  



Pozdrawiam
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.