Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [html][js][css] Blueimp z filmami z YouTube, Zamiast zwykłej galerii ze zdjęciami
lukash82
post 22.03.2018, 15:23:30
Post #1





Grupa: Zarejestrowani
Postów: 320
Pomógł: 2
Dołączył: 17.03.2006
Skąd: Siemianowice

Ostrzeżenie: (0%)
-----


Witam,

Próbuję zmusić skrypt bluimp do pokazania filmu z YT zamiast zdjęć jak to standardowo się robi w galeriach na www. Chodzi o przyciemnienie ekranu i pokazanie okienka z filmem zamiast dużego zdjęcia. Niestety nijak mi się to nie udaje. Przetestowałem kilka porad z stackoverflow, ale żadna nie zadziałała. Póki co wróciłem do początku i tak wygląda u mnie całkiem czysty kod. Może ktoś mógłby rzucić na niego okiem. Może coś przeoczyłem... Już sam nie wiem czy wogóle jest to możliwe. Pozdrawiam, Ł.

  1. <!DOCTYPE html>
  2. <html lang="pl">
  3.  
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7.  
  8. <link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery.css">
  9. <link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery-indicator.css">
  10. <link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery-video.css">
  11.  
  12. </head>
  13.  
  14. <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-use-bootstrap-modal="false">
  15. <div class="slides"></div>
  16. <h3 class="title">&nbsp;</h3>
  17. <a class="prev">&lsaquo;</a>
  18. <a class="next">&rsaquo;</a>
  19. <a class="close">&times;</a>
  20. <a class="play-pause"></a>
  21. <ol class="indicator"></ol>
  22. <div class="modal fade">
  23. <div class="modal-dialog">
  24. <div class="modal-content">
  25. <div class="modal-header">
  26. <button type="button" class="close" aria-hidden="true">&times;</button>
  27. <h4 class="modal-title">&nbsp;</h4>
  28. </div>
  29. <div class="modal-body next"></div>
  30. <div class="modal-footer">
  31. <button type="button" class="btn btn-default pull-left prev">
  32. <i class="glyphicon glyphicon-chevron-left"></i>
  33. Previous
  34. </button>
  35. <button type="button" class="btn btn-primary next">
  36. Next
  37. <i class="glyphicon glyphicon-chevron-right"></i>
  38. </button>
  39. </div>
  40. </div>
  41. </div>
  42. </div>
  43. </div>
  44.  
  45. <a href="https://www.youtube.com/watch?v=7REKFHwvjzc" data-youtube="7REKFHwvjzc" data-poster="http://img.youtube.com/vi/7REKFHwvjzc/maxresdefault.jpg" data-type="text/html">
  46. <img src="http://img.youtube.com/vi/7REKFHwvjzc/maxresdefault.jpg" style="width:400px; height: 300px">
  47. </a>
  48.  
  49. <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
  50.  
  51. <script src="http://blueimp.github.io/Gallery/js/blueimp-helper.js"></script>
  52. <script src="http://blueimp.github.io/Gallery/js/blueimp-gallery.js"></script>
  53. <script src="http://blueimp.github.io/Gallery/js/blueimp-gallery-fullscreen.js"></script>
  54. <script src="http://blueimp.github.io/Gallery/js/blueimp-gallery-indicator.js"></script>
  55. <script src="http://blueimp.github.io/Gallery/js/blueimp-gallery-video.js"></script>
  56. <script src="http://blueimp.github.io/Gallery/js/blueimp-gallery-vimeo.js"></script>
  57. <script src="http://blueimp.github.io/Gallery/js/blueimp-gallery-youtube.js"></script>
  58. <script src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.js"></script>
  59.  
  60. </body>
  61. </html>
Go to the top of the page
+Quote Post
trueblue
post 22.03.2018, 15:51:33
Post #2





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


A gdzie jest podpięty skrypt JS zgodnie z https://github.com/blueimp/Gallery#lightbox-setup ?


--------------------
Go to the top of the page
+Quote Post
lukash82
post 23.03.2018, 11:12:23
Post #3





Grupa: Zarejestrowani
Postów: 320
Pomógł: 2
Dołączył: 17.03.2006
Skąd: Siemianowice

Ostrzeżenie: (0%)
-----


Sprawdziłem jeszcze raz tą sekcję, którą wskazałeś. Ale niestety ona nie rozwiązuje mojego problemu. Chyba, że czegoś nie zrozumiałem...

Jest tam mowa o dodaniu kontrolek do galerii, które mam nieco rozbudowane w linijkach 16-45. Jest mowa aby dodać dwa pliki blueimp-gallery.min.js i blueimp-gallery.min.css. Mam je dodane w linijkach 9 i 54 w wersji bez ".min".

Następnie jest mowa aby dodać div-a z id=links i potem kawałek skryptu w js, który "wywoła" to co jest w tym div-ie. Problem w tym, że to dotyczy zdjęć i nawet bez tego moja wersja działa, ale tylko dla zdjęć. Niestety dla video zaciąganego linkiem z YouTube to nie hula. Po kliknięciu otwiera się YT z wybranym filmem.


W załączonym demo filmiki są odpalane ale bezpośrednio w okienku na stronie. A ja chciałbym aby to przyciemniło ekran i wjechało na ekran tak jak pokaz zdjęć. Wydaje mi się, że gdzieś takie coś widziałem ale nie pamiętam gdzie...:/ Niekoniecznie musi to być karuzela, wystarczy pojedynczy film.

Pozdrawiam, Ł.
Go to the top of the page
+Quote Post
aras785
post 23.03.2018, 11:32:15
Post #4





Grupa: Zarejestrowani
Postów: 859
Pomógł: 177
Dołączył: 29.10.2009

Ostrzeżenie: (0%)
-----


sprawdź:
http://jsfiddle.net/wpasq2nm/
http://jsfiddle.net/cwilldev/Q86Jc/1/
http://jsfiddle.net/9uZ6P/3/


Go to the top of the page
+Quote Post
Pyton_000
post 23.03.2018, 11:37:27
Post #5





Grupa: Zarejestrowani
Postów: 8 068
Pomógł: 1414
Dołączył: 26.10.2005

Ostrzeżenie: (0%)
-----


Dodaj `data-gallery` do <a>
Go to the top of the page
+Quote Post
lukash82
post 23.03.2018, 12:18:28
Post #6





Grupa: Zarejestrowani
Postów: 320
Pomógł: 2
Dołączył: 17.03.2006
Skąd: Siemianowice

Ostrzeżenie: (0%)
-----


data-gallery rozwiązało problem wink.gif

Myślę, że 3 przykład od aras785 także naprowadziłby mnie na rozwiązanie.

Wielkie dzięki za pomoc! Pozdrawiam, Ł.
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 29.03.2024 - 00:46