Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [html][js][css] Blueimp z filmami z YouTube
Forum PHP.pl > Forum > Przedszkole
lukash82
22.03.2018, 15:23:30
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, Ł.

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html lang="pl">
  3. <head>
  4.  
  5. 	<meta charset="utf-8">
  6. 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. 	<meta name="viewport" content="width=device-width, initial-scale=1">
  8.  
  9. 	<link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery.css">
  10. 	<link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery-indicator.css">
  11. 	<link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery-video.css">
  12.  
  13. </head>
  14. <body>
  15.  
  16. 	<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-use-bootstrap-modal="false">
  17. 		<div class="slides"></div>
  18. 		<h3 class="title">&nbsp;</h3>
  19. 		<a class="prev">&lsaquo;</a>
  20. 		<a class="next">&rsaquo;</a>
  21. 		<a class="close">&times;</a>
  22. 		<a class="play-pause"></a>
  23. 		<ol class="indicator"></ol>
  24. 		<div class="modal fade">
  25. 			<div class="modal-dialog">
  26. 				<div class="modal-content">
  27. 					<div class="modal-header">
  28. 						<button type="button" class="close" aria-hidden="true">&times;</button>
  29. 						<h4 class="modal-title">&nbsp;</h4>
  30. 					</div>
  31. 					<div class="modal-body next"></div>
  32. 					<div class="modal-footer">
  33. 						<button type="button" class="btn btn-default pull-left prev">
  34. 							<i class="glyphicon glyphicon-chevron-left"></i>
  35. 							Previous
  36. 						</button>
  37. 						<button type="button" class="btn btn-primary next">
  38. 							Next
  39. 							<i class="glyphicon glyphicon-chevron-right"></i>
  40. 						</button>
  41. 					</div>
  42. 				</div>
  43. 			</div>
  44. 		</div>
  45. 	</div>
  46.  
  47. 	<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">
  48.         <img src="http://img.youtube.com/vi/7REKFHwvjzc/maxresdefault.jpg" style="width:400px; height: 300px">
  49.     </a>
  50.  
  51. 	<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
  52.  
  53. 	<script src="http://blueimp.github.io/Gallery/js/blueimp-helper.js"></script>
  54. 	<script src="http://blueimp.github.io/Gallery/js/blueimp-gallery.js"></script>
  55. 	<script src="http://blueimp.github.io/Gallery/js/blueimp-gallery-fullscreen.js"></script>
  56. 	<script src="http://blueimp.github.io/Gallery/js/blueimp-gallery-indicator.js"></script>
  57. 	<script src="http://blueimp.github.io/Gallery/js/blueimp-gallery-video.js"></script>
  58. 	<script src="http://blueimp.github.io/Gallery/js/blueimp-gallery-vimeo.js"></script>
  59. 	<script src="http://blueimp.github.io/Gallery/js/blueimp-gallery-youtube.js"></script>
  60. 	<script src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.js"></script>
  61.  
  62. </body>
  63. </html>
[HTML] pobierz, plaintext
trueblue
22.03.2018, 15:51:33
A gdzie jest podpięty skrypt JS zgodnie z https://github.com/blueimp/Gallery#lightbox-setup ?
lukash82
23.03.2018, 11:12:23
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, Ł.
aras785
23.03.2018, 11:32:15
sprawdź:
http://jsfiddle.net/wpasq2nm/
http://jsfiddle.net/cwilldev/Q86Jc/1/
http://jsfiddle.net/9uZ6P/3/


Pyton_000
23.03.2018, 11:37:27
Dodaj `data-gallery` do <a>
lukash82
23.03.2018, 12:18:28
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, Ł.
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-2024 Invision Power Services, Inc.