Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] jquery gryzie się z lightbox
Forum PHP.pl > Forum > Przedszkole
skw
Mam na stronie skrypt galerii lightbox i slider obrazków, który wykorzystuje jquery.
Oba skrypty nie chcą ze sobą działać. W takim układzie działa slider, ale nie działa lightbox

  1. <script type="text/javascript" src="{$adres}js/prototype.js"></script>
  2. <script type="text/javascript" src="{$adres}js/scriptaculous.js?load=effects,builder"></script>
  3. <script type="text/javascript" src="{$adres}js/lightbox.js"></script>
  4.  
  5. {literal}
  6. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function(){
  9. var currentPosition = 0;
  10. var slideWidth = 560;
  11. var slides = $('.slide');
  12. var numberOfSlides = slides.length;
  13.  
  14. // Remove scrollbar in JS
  15. $('#slidesContainer').css('overflow', 'hidden');
  16.  
  17. // Wrap all .slides with #slideInner div
  18. slides
  19. .wrapAll('<div id="slideInner"></div>')
  20. // Float left to display horizontally, readjust .slides width
  21. .css({
  22. 'float' : 'left',
  23. 'width' : slideWidth
  24. });
  25.  
  26. // Set #slideInner width equal to total width of all slides
  27. $('#slideInner').css('width', slideWidth * numberOfSlides);
  28.  
  29. // Insert controls in the DOM
  30. $('#slideshow')
  31. .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
  32. .append('<span class="control" id="rightControl">Clicking moves right</span>');
  33.  
  34. // Hide left arrow control on first load
  35. manageControls(currentPosition);
  36.  
  37. // Create event listeners for .controls clicks
  38. $('.control')
  39. .bind('click', function(){
  40. // Determine new position
  41. currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
  42.  
  43. // Hide / show controls
  44. manageControls(currentPosition);
  45. // Move slideInner using margin-left
  46. $('#slideInner').animate({
  47. 'marginLeft' : slideWidth*(-currentPosition)
  48. });
  49. });
  50.  
  51. // manageControls: Hides and Shows controls depending on currentPosition
  52. function manageControls(position){
  53. // Hide left arrow if position is first slide
  54. if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
  55. // Hide right arrow if position is last slide
  56. if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  57. }
  58. });
  59. {/literal}


Natomiast po przeniesieniu
  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
na początek działa lightbox, ale nie działa slider. Ktoś wie wie w czym problem?
melkorm
Jquery gryzie się z prototype'm noConflict

P.S. Do czego używasz prototype, bo troszkę zamotałeś.
skw
Przy 'instalacji' lightboxa jest standardowo prototype. Nie wgłębiam się jeszcze w frameworki js. Chciałbym tylko, żeby działały obydwa 'skrypty'.
darko
~melkorm -podał Ci rozwiązanie - użyj jQuery noconflict
#luq
a lightBox pod jQ? ;>
skw
Ok już czaje czarodziej.gif . Wielkie dzięki chłopaki. Gdyby kiedyś komuś było potrzebne to zrobiłem tak:
  1. <script type="text/javascript" src="{$adres}js/prototype.js"></script>
  2. <script type="text/javascript" src="{$adres}js/scriptaculous.js?load=effects,builder"></script>
  3. <script type="text/javascript" src="{$adres}js/lightbox.js"></script>
  4.  
  5. {literal}
  6. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
  7. <script type="text/javascript">
  8. var j = jQuery.noConflict();
  9. j(document).ready(function(){
  10. var currentPosition = 0;
  11. var slideWidth = 560;
  12. var slides = j('.slide');
  13. var numberOfSlides = slides.length;
  14.  
  15. // Remove scrollbar in JS
  16. j('#slidesContainer').css('overflow', 'hidden');
  17.  
  18. // Wrap all .slides with #slideInner div
  19. slides
  20. .wrapAll('<div id="slideInner"></div>')
  21. // Float left to display horizontally, readjust .slides width
  22. .css({
  23. 'float' : 'left',
  24. 'width' : slideWidth
  25. });
  26.  
  27. // Set #slideInner width equal to total width of all slides
  28. j('#slideInner').css('width', slideWidth * numberOfSlides);
  29.  
  30. // Insert controls in the DOM
  31. j('#slideshow')
  32. .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
  33. .append('<span class="control" id="rightControl">Clicking moves right</span>');
  34.  
  35. // Hide left arrow control on first load
  36. manageControls(currentPosition);
  37.  
  38. // Create event listeners for .controls clicks
  39. j('.control')
  40. .bind('click', function(){
  41. // Determine new position
  42. currentPosition = (j(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
  43.  
  44. // Hide / show controls
  45. manageControls(currentPosition);
  46. // Move slideInner using margin-left
  47. j('#slideInner').animate({
  48. 'marginLeft' : slideWidth*(-currentPosition)
  49. });
  50. });
  51.  
  52. // manageControls: Hides and Shows controls depending on currentPosition
  53. function manageControls(position){
  54. // Hide left arrow if position is first slide
  55. if(position==0){ j('#leftControl').hide() } else{ j('#leftControl').show() }
  56. // Hide right arrow if position is last slide
  57. if(position==numberOfSlides-1){ j('#rightControl').hide() } else{ j('#rightControl').show() }
  58. }
  59. });
  60. {/literal}
#luq
Ale dlaczego nie http://leandrovieira.com/projects/jquery/lightbox/?
skw
Cytat(#luq @ 5.12.2010, 19:12:43 ) *

Szczerze mówiąc próbowałem użyć lightboxa w jq, ale po prostu mi nie wychodziło. Próbowałem robić tak jak jest napisane na stronie, ale najwidoczniej coś źle zrobiłem. Nie jestem obeznany w jq, a takie rozwiązanie choć wiem, że jest niepoprawne na razie mi wystarcza
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.