Hallo Wolfgang du hast mich so sehr inspiriert, dass ich heute Nacht bis jetzt eine Video Light Box Gallery gebastelt habe. Kann man benutzen, ohne Premiummitglied zu sein.
Ich habe mal eine Video - Galerie angelegt, bis zu 10 Stück, 2 habe ich ausgefüllt und der Rest nur mit ( # ) bestückt. Ich dachte mir, dass man es auch ohne Premiummitglied benutzen kann. Funktioniert nur in "Eigener Seiten".
Ich bin nicht so gut wie du. Darum habe ich es alles per HTML gebastelt. Du bist ein sehr gutes Vorbild für mich und ich dachte mir ich strenge mich jetzt mal so richtig an und versuche auch mal ein Video Light Box Gallery zu basteln.
Also nicht wundern, ich habe für Video und Bilder die leeren Slots mit ( # ) bestückt. Beschriftet habe ich sie so: Video <!-- Hier kann man das Video einfügen. Achtung ;autoplay=1 stehen lassen sonst geht's nicht-->
Hier bitte nur die Video-Adresse eingeben ( # ). ;autoplay=1 muss bleiben sonst geht das Video nicht mehr richtig.
Und für Bilder so: Bilder <!-- Hier kann man das Bild einfügen --> Bei den Bildern <!-- " #.jpg "--> Das rote markierte mit der Bilder-Adresse ausfüllen.
Für Video's muss man ein Bild angeben.
Ich entschuldige mich im Vorraus für meine schlechte Erklärung, bin darin noch nicht so gut.
<!DOCTYPE html> <html> <center><h1 class="section-header">Video Gallery</h1></center> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery Lightbox</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> </head> <p>Karel Gott</p> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="thumbnail"> <!-- Hier kann man das video einfügen Achtung ;autoplay=1 stehen lassen sonst geht das nicht--> <a data-fancybox="video-gallery" href="https://www.youtube.com/watch?v=XNWferBsNCw;autoplay=1"> <!-- Hier kann man das Bild einfügen --> <img src="https://bilderupload.org/image/335f56115-karl-gott-biene-maja.jpg"></a> </div> </div> <p>Freddy Quinn</p> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="thumbnail"> <!-- Hier kann man das video einfügen Achtung ;autoplay=1 stehen lassen sonst geht das nicht--> <a data-fancybox="video-gallery" href="https://www.youtube.com/watch?v=6Ag3QNdomuQ;autoplay=1"> <!-- Hier kann man das Bild einfügen --> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRx88tIf8hwSpdBNp36R9gzB_sVToXxAMtG6g&usqp=CAU"></a> </div> </div> <p>Christmas Jack Skellington | CSS Art | Speed Coding</p> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="thumbnail"> <!-- Hier kann man das video einfügen Achtung ;autoplay=1 stehen lassen sonst geht das nicht--> <a data-fancybox="video-gallery" href="https://www.youtube.com/watch?v=v8J73b_2u30&t=1s"> <!-- Hier kann man das Bild einfügen --> <img src="https://i.ytimg.com/vi/v8J73b_2u30/hqdefault.jpg?sqp=-oaymwEcCOADEI4CSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLCghLjH42fbE4BZn7C0S7MYIj5oyA"></a> </div> </div>
<div class="container"> <div class="row"> <div class="col-md-4"> <div class="thumbnail"> <!-- Hier kann man das video einfügen Achtung ;autoplay=1 stehen lassen sonst geht das nicht--> <a data-fancybox="video-gallery" href="#;autoplay=1"> <!-- Hier kann man das Bild einfügen --> <img src="#"></a> </div> </div> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="thumbnail"> <!-- Hier kann man das video einfügen Achtung ;autoplay=1 stehen lassen sonst geht das nicht--> <a data-fancybox="video-gallery" href="#;autoplay=1"> <!-- Hier kann man das Bild einfügen --> <img src="#"></a> </div> </div> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="thumbnail"> <!-- Hier kann man das video einfügen Achtung ;autoplay=1 stehen lassen sonst geht das nicht--> <a data-fancybox="video-gallery" href="#;autoplay=1"> <!-- Hier kann man das Bild einfügen --> <img src="#"></a> </div> </div> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="thumbnail"> <!-- Hier kann man das video einfügen Achtung ;autoplay=1 stehen lassen sonst geht das nicht--> <a data-fancybox="video-gallery" href="#;autoplay=1"> <!-- Hier kann man das Bild einfügen --> <img src="#"></a> </div> </div> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="thumbnail"> <!-- Hier kann man das video einfügen Achtung ;autoplay=1 stehen lassen sonst geht das nicht--> <a data-fancybox="video-gallery" href="#;autoplay=1"> <!-- Hier kann man das Bild einfügen --> <img src="#.jpg"></a> </div> </div> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="thumbnail"> <!-- Hier kann man das video einfügen Achtung ;autoplay=1 stehen lassen sonst geht das nicht--> <a data-fancybox="video-gallery" href="#;autoplay=1"> <!-- Hier kann man das Bild einfügen --> <img src="#.jpg"></a> </div> </div> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="thumbnail"> <!-- Hier kann man das video einfügen Achtung ;autoplay=1 stehen lassen sonst geht das nicht--> <a data-fancybox="video-gallery" href="#;autoplay=1"> <!-- Hier kann man das Bild einfügen --> <img src="#.jpg"></a> </div> </div> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="thumbnail"> <!-- Hier kann man das video einfügen Achtung ;autoplay=1 stehen lassen sonst geht das nicht--> <a data-fancybox="video-gallery" href="#;autoplay=1"> <!-- Hier kann man das Bild einfügen --> <img src="#.jpg"></a> </div> </div> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="thumbnail"> <!-- Hier kann man das video einfügen Achtung ;autoplay=1 stehen lassen sonst geht das nicht--> <a data-fancybox="video-gallery" href="#;autoplay=1"> <!-- Hier kann man das Bild einfügen --> <img src="#.jpg"></a> </div> </div> </div> </div> <script src="//code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Der Treffpunkt für Hilfe, Tricks & Tipps
»
XOBOR-Foren und Homepages
»
Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps
»
Video Lightbox Gallery
Foren Spende
Direkt zu PayPal
Thema drucken
23.07.2022 14:14 (zuletzt bearbeitet: 11.04.2024 09:35)
Antworten
