Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][JavaScript]Zagnieżdżenie galerii w tabelce, jak?
Forum PHP.pl > Forum > Przedszkole
kamil9012
Jak mogę wrzucić taką galerię http://jquerytools.org/demos/scrollable/gallery.htm w jedną z 3 części takiej tabelki: http://jquerytools.org/demos/tabs/index.htm ?


Tabelka osobno i galeria osobno działają mi, ale w momencie kiedy wrzucam kod galerii między divy jednej z 3 części tabelki galeria przestaje działać. Przeczuwam, że to coś z javascript :/


Proszę o rady i z góry dzięki.
krispak
Zapewne masz konflikt bibliotek jquery. Poczytaj o jQuery.noConflict() na tej stronie i zastosuj sie do tego, a bedzie dzialac.

Pozdrawiam
kamil9012
Poczytałem i z takiego kodu:
  1. <script type="text/javascript">
  2.  
  3. $(function() {
  4. // setup ul.tabs to work as tabs for each div directly under div.panes
  5. $("ul.tabs").tabs("div.panes > div");
  6. });
  7.  
  8.  
  9. $(function() {
  10. $(".scrollable").scrollable();
  11.  
  12. $(".items img").click(function() {
  13. // see if same thumb is being clicked
  14. if ($(this).hasClass("active")) { return; }
  15.  
  16. // calclulate large image's URL based on the thumbnail URL (flickr specific)
  17. var url = $(this).attr("src").replace("thumbs", "images");
  18.  
  19. // get handle to element that wraps the image and make it semi-transparent
  20. var wrap = $("#image_wrap").fadeTo("medium", 0.5);
  21.  
  22. // the large image from www.flickr.com
  23. var img = new Image();
  24.  
  25.  
  26. // call this function after it's loaded
  27. img.onload = function() {
  28.  
  29. // make wrapper fully visible
  30. wrap.fadeTo("fast", 1);
  31.  
  32. // change the image
  33. wrap.find("img").attr("src", url);
  34.  
  35. };
  36.  
  37. // begin loading the image from www.flickr.com
  38. img.src = url;
  39.  
  40. // activate item
  41. $(".items img").removeClass("active");
  42. $(this).addClass("active");
  43.  
  44. // when page loads simulate a "click" on the first image
  45. }).filter(":first").click();
  46. });
  47.  
  48.  
  49.  
  50.  
  51.  
  52. </script>



zrobiłem tak:
  1. <script type="text/javascript">
  2. $.noConflict();
  3. jQuery(document).ready(function($) {
  4.  
  5.  
  6. $(function() {
  7. // setup ul.tabs to work as tabs for each div directly under div.panes
  8. $("ul.tabs").tabs("div.panes > div");
  9. });
  10.  
  11.  
  12. });
  13.  
  14.  
  15. $(function() {
  16. $(".scrollable").scrollable();
  17.  
  18. $(".items img").click(function() {
  19. // see if same thumb is being clicked
  20. if ($(this).hasClass("active")) { return; }
  21.  
  22. // calclulate large image's URL based on the thumbnail URL (flickr specific)
  23. var url = $(this).attr("src").replace("thumbs", "images");
  24.  
  25. // get handle to element that wraps the image and make it semi-transparent
  26. var wrap = $("#image_wrap").fadeTo("medium", 0.5);
  27.  
  28. // the large image from www.flickr.com
  29. var img = new Image();
  30.  
  31.  
  32. // call this function after it's loaded
  33. img.onload = function() {
  34.  
  35. // make wrapper fully visible
  36. wrap.fadeTo("fast", 1);
  37.  
  38. // change the image
  39. wrap.find("img").attr("src", url);
  40.  
  41. };
  42.  
  43. // begin loading the image from www.flickr.com
  44. img.src = url;
  45.  
  46. // activate item
  47. $(".items img").removeClass("active");
  48. $(this).addClass("active");
  49.  
  50. // when page loads simulate a "click" on the first image
  51. }).filter(":first").click();
  52. });
  53.  
  54.  
  55.  
  56.  
  57.  
  58. </script>



Niestety problem cały czas jest. Problem dotyczy tej strony
  1. http://wiki.zarabianie24.net/florystyka_slubna.php
krispak
Na szybko zrobione z malymi modyfikacjami... Prosze zerknac. Wystarczy ostylowac w csspod swoja strone i wszystko ladnie dziala.

Pozdrawiam
kamil9012
dzięki, super działa smile.gif teraz muszę pobawić się z selektorami bo każde tab 1, tab 2, tab 3 to osobne galerie będą.
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.