Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][HTML]jQuery - Tabs i lightbox
Forum PHP.pl > Forum > Przedszkole
PWN
Poszukuję pomocy w zrobieniu na stronie przełączalnych zakładake czyli nazywa się to chyba Tabs w jQuery i chciałbym umieszczać w zakładkach zjęcia które miałby się otwierać ala LightBox - z tego co sprawdziłem to jak działa Tabs na stronie to jquery już nie albo w drugą stronę jquery się odpala ale nie działa przełączanie się pomiędzy Tabsami.

Zależy mi bardzo aby można było do Tabsów przechodzi rónież poprzez adres w pasku czyli
np. mam 4 zakładki - Europa, Afryka, Ameryka , Azja - po wpisaniu w przegladarce - http://www.adres.pl/#afryka to wyświetla się tabs Afryka itd. smile.gif Potrzebuje takżeby żeby przycisk aktualnie przeglądanej karty był podświetlony smile.gif

Obecnie coś takiego używam ale w tym przypadku nie działa Lightbox i nie po skopiowaniu adresu z # nie przechodzi do wybranej karty smile.gif

HTML:
  1. <script type="text/javascript" src=
  2. "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  3. <script type="text/javascript" src="tabs.js"></script>
  4.  
  5. <div class="section">
  6.  
  7. <ul class="tabs">
  8. <li class="current"><a href="#europa" class="tabs">Europa</a></li>
  9. <li><a href="#afryka" class="tabs">Afryka</a></li>
  10. <li><a href="#ameryka" class="tabs">Ameryka</a></li>
  11. <li><a href="#azja" class="tabs">Azja</a></li>
  12. </ul>
  13.  
  14. <div id="europa" class="box visible">
  15. <a href="europa1_max.png" rel="lightbox[roadtrip]">
  16. <img src="europa1.png" border="0" alt="Europa" /></a><br/>
  17. <a href="europa2_max.png" rel="lightbox[roadtrip]">
  18. <img src="europa2.png" border="0" alt="Europa" /></a><br/>
  19. <a href="europa3_max.png" rel="lightbox[roadtrip]">
  20. <img src="europa3.png" border="0" alt="Europa" /></a><br/>
  21. </div>
  22.  
  23.  
  24. <div id="afryka" class="box">
  25. <a href="afryka1_max.png" rel="lightbox[roadtrip]">
  26. <img src="afryka1.png" border="0" alt="Afryka" /></a><br/>
  27. <a href="afryka2_max.png" rel="lightbox[roadtrip]">
  28. <img src="afryka2.png" border="0" alt="Afryka" /></a><br/>
  29. <a href="afryka3_max.png" rel="lightbox[roadtrip]">
  30. <img src="afryka3.png" border="0" alt="Afryka" /></a><br/>
  31. </div>
  32.  
  33. <div id="ameryka" class="box">
  34. <a href="ameryka1_max.png" rel="lightbox[roadtrip]">
  35. <img src="ameryka1.png" border="0" alt="Ameryka" /></a><br/>
  36. <a href="ameryka2_max.png" rel="lightbox[roadtrip]">
  37. <img src="ameryka2.png" border="0" alt="Ameryka" /></a><br/>
  38. <a href="ameryka3_max.png" rel="lightbox[roadtrip]">
  39. <img src="ameryka3.png" border="0" alt="Ameryka" /></a><br/>
  40. </div>
  41. <div id="azja" class="box">
  42. <a href="azja1_max.png" rel="lightbox[roadtrip]">
  43. <img src="azja1.png" border="0" alt="Azja" /></a><br/>
  44. <a href="azja2_max.png" rel="lightbox[roadtrip]">
  45. <img src="azja2.png" border="0" alt="Azja" /></a><br/>
  46. <a href="azja3_max.png" rel="lightbox[roadtrip]">
  47. <img src="azja3.png" border="0" alt="Azja" /></a><br/>
  48. </div>
  49.  
  50. </div>


plik tabs.js

  1. (function($) {
  2. $(function() {
  3.  
  4. $('ul.tabs').each(function() {
  5. $(this).find('li').each(function(i) {
  6. $(this).click(function(){
  7. $(this).addClass('current').siblings().removeClass('current')
  8. .parents('div.section').find('div.box').hide().end().find('div.box:eq('+i+')').fadeIn(150);
  9. });
  10. });
  11. });
  12.  
  13. })
  14. })(jQuery)


Gdy dodam
  1. <script type="text/javascript" src="js/prototype.js"></script>
  2. <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
  3. <script type="text/javascript" src="js/lightbox.js"></script>

z http://lokeshdhakar.com/projects/lightbox2/ - to przestaje działać przełączanie Tabs.

Dzięki za pomoc.

Pozdrawiam,
Posio
Aż tak trudno wpisać te 3 słowa w wyszukiwarkę ? GOOGLE
PWN
Posio, nie jest trudno wpisać ale tak czy inaczej to nie działa wyświetlanie Tabs z adresu który jest w pasku...
- chciałbym połączyć obie rzeczy naraz...

Bo jak dodaję np.:
Kod
   <script>
     jQuery.noConflict();
    
     // Use jQuery via jQuery(...)
     jQuery(document).ready(function(){
       jQuery("div").hide();
     });
    
     // Use Prototype with $(...), etc.
     $('someid').hide();
   </script>

to i tak to nie działa...
Posio
Ok, w takim razie odpowiem ładnie jak panicz sobie życzy ....

Użyje łaskaw pan coś opartego o jQuery np. (podaje na tacy) FancyBox - skoro nie potrafisz załatwić zgodniości jquery z prototype


@UP - i tak sprawdziłeś dopiero jak Cie do wyszukiwarki odesłałem ...
PWN
Posio, nie chcesz pomagać nie pomagaj - przecież nikt Cię do tego nie zmusza...
- ja nie byłem dla Ciebie "nie nimiły" więc prosze o to samo...
PS. Zachowanie świadczy o kulturze człowieka.
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.