Forum - YouTube-Videogalerie für das eigene Forum installieren!

YouTube-Videogalerie für das eigene Forum installieren!
Aktualisiert 20.12.21

Übersicht der Videogalerie!

• Die Alben Übersicht in der Videogalerie ist mit einer Überschrift und einem Vorschau-Video ausgestattet!
• Die Doppelpfeile und die Themenüberschrift führen zum Videoalbum!
• Der Pfad-Button führt zur Alben Übersicht der Bilder- & Videogalerie!

Geöffnetes Videoalbum mit Themenüberschrift!

• Das Videoalbum ist zum besseren navidieren mit einer Pfadleiste und Pfad-Button ausgelegt!
• Die Pfad-Leiste und die Überschrift beinhaltet das Videothema.
• Ein Klick auf die Titelleiste eines Videos vergrößert die Ansicht!
• Zu besseren Übersicht bei einer Vielzahl von Videos im Album, lassen sich die Videofenster auch verkleinern!
• Die YouTube-Videos lassen sich, wie gewohnt ohne Abstriche bedienen!

Vergrößertes Videofenster mit Bedienung-Button!

• Wird das Videofenster vergrößert, lassen sich die Videos im Album in beiden Richtungen auswählen.
• Ein Schließen-Button führt immer zur Übersicht des Videoalbums.
• Auch ein Klick auf die Titelleiste des Videos schließt die vergrößerte Ansicht!

Geöffnetes Videoalbum mit verkleinerten Videofenstern!

• Werden die Videofenster verkleinert, sehr günstig bei vielen Videos, kann der Titel des Videos immer noch gelesen werden!
• Ein Klick auf die Titelleiste des Videos vergrößert das Videofenster!

Das neue Forum-Kino!

• Das Forum-Kino ist von der Forum-Übersicht in die Videogalerie umgezogen
• Das Forum-Kino hat mehrere Unter- und Videoalben!

Die Videogalerie mit ihren Plugin-Elementen

• Die Videogalerie ist mit ihren Plugin-Elementen und z.Z. nicht mit Einstellungen versehen!
• Die Videodaten werden übersichtlich im Skript eingetragen!
• Die Videogalerie ist an die Bildergalerie angehängt!
• Das Template wird nicht verändert und kann nach belieben ausprobiert und getestet werden!

Schließen

Als erstes wird ein Plugin mit dem Name z.B. Videogalerie angelegt.
Hier wird ein Template-Element "bottom_header" erstellt und das folgende Skript eingetragen!




• Wird Zeile 152 freigegeben und Zeile 151 gelöscht, kann die Anzahl der Alben beim Start der Alben-Übersicht bestimmt werden!
• Zeile 229 sorgt dafür, dass alle gängigen YouTube-Videoadressen verarbeiten werden können!
• Ist das Minimieren der Bilder- & Videogalerie nicht gewünscht, müssen Zeile 150-154 gelöscht oder auskommentiert werden!


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
 
<style>
.videostyle {display: inline-block; vertical-align: top;}
.videostyle .userinfo {padding: 5px 10px;background:{{global_box_header_background|rgb_lightness(91)}};color: {{global_boxheader_fontcolor}} !important;}
.videostyle .videoinfo {display:none;padding: 5px 10px 10px 10px;text-align:left;}
.videodiv {width:320px;margin: 0px 30px 18px 0px; position: relative; border: 1px solid {{global_box_header_background|rgb_lightness(80)}}; border-radius:6px; text-align: center;padding:0px;}
.videodivdiv {color: {{global_boxheader_fontcolor}} !important;padding: 10px 30px;cursor:pointer;
background: {{global_box_header_background}} bottom left repeat-x;
background-image: -moz-linear-gradient(15% 90% 90deg,{{global_box_header_background|rgb_lightness(90)}}, {{global_box_header_background}}, {{global_box_header_background}} 100%);	
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from({{global_box_header_background}}), to({{global_box_header_background|rgb_lightness(90)}}));
background-image:-ms-linear-gradient(90deg,{{global_box_header_background|rgb_lightness(90)}},{{global_box_header_background}});
}
.videodivdiv h5 {white-space: nowrap;overflow: hidden;text-overflow:ellipsis;}
.videodivdiv span {position:absolute;right:0px;font-size:10px;margin:-1px 10px 0 10px;}
.videoiframe {width:300px;height:200px;margin:10px;border: 1px groove rgb(86, 86, 86); border-radius: 4px; box-shadow: rgb(92, 92, 92) 3px 3px 3px;}
.convert_div {background:#eeeeee;}
 
.video .videosmall {display:none;}
.button.videoexit {visibility:hidden;width:60px;text-align:center;margin-right:10px;}
.button.videovor, .button.videozurueck {visibility:hidden;width:30px;text-align:center;margin-right:10px;}
.button.button_mehr,.button.button_video {font-size:12px;padding:2px 20px !important;margin-left:-10px;}
 
.video .gcat_further {margin-top: 3px; padding: 3px 0px 20px 0px; border-top: 1px solid {{global_boxcontent_background|rgb_lightness(95)}};}
.cat_video {width: 230px; border-right: 1px solid {{global_boxcontent_background|rgb_lightness(95)}};}
.cat_covervideo {width: 260px; line-height: 130px; vertical-align: middle; text-align: center; overflow: hidden; float: left; height: 130px;}
.video_cover {width:200px;height:125px;vertical-align: middle;}
.video ul.forum li {border-bottom: 1px solid {{global_box_header_background|rgb_lightness(80)}};}
.video {border-bottom: none;}
 
.boxcontent.titel {background:{{global_box_header_background|rgb_lightness(75)}};color: {{global_boxheader_fontcolor}};padding: 10px 30px;border-radius:6px;box-shadow:0px 0px 6px #ffffff;border:1px solid {{global_box_header_background}};font-weight:bold;}
 
.cat_coverpic {width:260px !important;}
</style>
 
<script>  
//Veänderung Navileiste Bilder- & Videogalerie
$("#link_gallery span:contains('Bildergalerie'),#breadcrumbs strong:contains('Bildergalerie')").text("Bilder- & Videogalerie");
$("#breadcrumbs small:contains('Bildergalerie')").text("Die Bilder- & Videogalerie des Forums.");
$("#breadcrumbs strong:contains('Album-Übersicht')").text("Alben anzeigen");
  
if ($('.page_gallery,.page_pages').length > 0) {
$('#breadcrumbs').before('&nbsp;<center><h3 style="margin:20px 0 30px 0;"><span class="boxcontent titel">Die Bilder- und Videogalerie</span></h3></center>'); 
$(".boxheader strong:contains('Bildergalerie - Alben')").html("Bildergalerie - <font color='#ffc628'>Alben Übersicht</font>");
  
// Video-Navileiste und Video-Button
$('.videonav').html('<div id="breadcrumbs"> \
<img alt="Forum" src="//files.homepagemodules.de/b2001010/a_750_0c1d25e4.png"><a href="/forum.php">Forum</a> &#8594; <a href="/gallery.php">Alben Übersicht</a> &#8594; \
<a href="/gallery.php#alben">Zur den Video Alben</a> &#8594; <font color="#ffc628"><strong>Zum Forum-Kino</strong></font> \
<div>&nbsp;&nbsp;<small>Die Videogalerie. Ein Klick auf die Titelleiste vergrößert oder verkleinert das Video!</small></div></div> \
<div class="clear"></div><br><br> \
<center><h3><span class="boxcontent titel">'+daten.Ersteller_Titel+'</span></h3></center><br><br><br> \
<a class="button" href="/gallery.php" style="margin:0 20px 0 10px;">Zurück zur Alben Übersicht</a> \
<a class="button" href="/gallery.php#alben" style="margin-right:20px;">Zur den Video Alben</a> \
<a class="button titel" href="/Video3.html" style="margin-right:20px;">Zur Forum-Kino Übersicht</a> \
<a class="button videosmall" style="margin-right:20px;color:{{global_boxheader_fontcolor|rgb_lightness(90)}};">Videofenster verkleinern</a> \
<a class="button videozurueck"><<</a> \
<a class="button videovor">>></a> \
<a class="button videoexit">Schließen</a>');
  
$('.videosmall').click(function(){
$('html,body').animate({scrollTop:$(this).offset().top-150},500); 
$('body').css('min-height','1300px');
$('.videodiv').show().css({'height': 'auto','width':'150px'});
$('.videoiframe').css({'height': '90px', 'width': '125px'});
$('.videovor').css('visibility','hidden');
$('.videoinfo,.breadcrumbs,.videosmall').hide();
$('.videodivdiv span').html('<img src="//files.homepagemodules.de/b104774/a_83_b849fb24.png">').css ({'margin-right':'0px'});
$('.videodivdiv h5').css({'font-size':'10px','text-align':'left','white-space':'unset'});
$('.videodivdiv').css({'padding':'5px 19px 7px 10px'});
$('.userinfo a,.userinfo strong').css({'font-size':'11px'});
});
 
if ($('.page_pages .video').length > 0) {
$('.videosmall,.button.titel').hide();  
}
  
$('.videozurueck').click(function(){
$('.videodivdiv').each(function(){  
$('.videostyle').each(function(){
if($(this).is(":visible")) { 
$(this).click();
};
});
});
});
 
$('.videovor').click(function(){
$('.videostyle').each(function(){
if($(this).is(":visible")) { 
$(this).click(); 
};
});
});
 
$('.videoexit').click(function(){
$('.videostyle').each(function(){
if($(this).is(":hidden")) {
$(this).click();
};
});
});
 
$(".convert_youtube,videoiframe,.userinfo").click(function(event){
event.stopPropagation();
});
 
$('.videostyle').toggle(function() {
$('.videodiv').hide().css({'height': 'auto','width':'820px'}); 
$('.videosmall').hide();
$('.videodiv',this).show();
$('.videoinfo').show();
$('.videodivdiv span').html('<img src="//files.homepagemodules.de/b2001010/a_970_7d763b7a.png"> Schließen').css('margin-right','10px');
$('.videodivdiv h5').css({'font-size':'','text-align':'','white-space':''});
$('.videodivdiv').css({'padding':''});
$('.userinfo a,.userinfo strong').css({'font-size':''});
$('.videoiframe',this).css({'height': '500px', 'width': '800px'});
$('.videovor,.videozurueck,.videoexit').css('visibility','visible');
$('html,body').animate({scrollTop:$(this).offset().top-200},500); 
$('.tms2 .spacer10').after('<div class="breadcrumbs" style="margin-top:30px;"> \
<img alt="Forum" src="//files.homepagemodules.de/b2001010/a_750_0c1d25e4.png"><a href="/forum.php">Forum</a> &#8594; <a href="/gallery.php"><font color="#ffc628">Album-Übersicht</font></a> &#8594; \
<a href="/gallery.php#alben">Zu den Video Alben</a> &#8594; <font color="#ffc628"><strong>Unteralben anzeigen</strong></font>');    
},function(){
  
$('.videodiv').show().css({'height': 'auto','width':'320px'});
$('.videosmall').show();
$('.videoiframe').css({'height': '200px', 'width': '300px'});
$('.videovor,.videozurueck,.videoexit').css('visibility','hidden');
$('.videoinfo,.breadcrumbs').hide();
$('.videodivdiv span').html('<img src="//files.homepagemodules.de/b104774/a_83_b849fb24.png">');
});
 
$('.videodivdiv span').html('<img src="//files.homepagemodules.de/b104774/a_83_b849fb24.png">');
  
$('.videostyle,.videovor').click(function(){
if($('.videostyle:last').is(":visible")) { 
$('.videovor').hide();
$('.videozurueck').show();
};
})  
 
$('.videostyle,.videozurück').click(function(){
if($('.videostyle:first').is(":visible")) { 
$('.videozurueck').hide();
$('.videovor').show();
}else{
$('.videozurueck').show();
};
});
 
if (location.href.indexOf('gallery.php') > -1) {
$('.gcat.forum li').hide()
$('.gcat.forum li:first, .box.video li:first').show();
//$('.gcat.forum li:nth-child(-n+1),.gcat.forum.video li:nth-child(-n+1)').show(); // Ein Album wird angezeigt. Zahl kann beliebig gewählt werden!
$('.cat_coverpic').after('<center><a class="button button_mehr">Alle Alben anzeigen</a></center>');
$('.cat_covervideo').after('<center><a class="button button_video">Alle Alben anzeigen</a></center>');
 
$('.button_mehr').click(function(){
$('.page_gallery').find('.box.video').hide();
$('.gcat.forum li').show()
$('.button_mehr').hide()
location.href = '#bild';
$('a.button:first').before('<a class="button" href="/gallery.php" style="float:right;margin-right:40px;">Zurück zur Alben Übersicht</a>');
$('.boxcontent.titel').html('Die Bildergalerie');
});
 
if (location.href.indexOf('#bild') > -1) {
$('.page_gallery').find('.box.video').hide();
$('.gcat.forum li').show()
$('.button_mehr').hide()
$('a.button:first').before('<a class="button" href="/gallery.php" style="float:right;margin-right:40px;">Zurück zur Alben Übersicht</a>');
$('.boxcontent.titel').text('Die Bildergalerie');
};
}else{
$('.box.video').hide();
if (!$('.page_pages').length > 0) {
$('.boxcontent.titel').text('Die Bildergalerie');
};
};
  
$('.button_video').click(function(){
$('.page_gallery .button').hide();
$('.page_gallery').find('.box').hide();
$('.box.video, .box.video li').show()
$('#breadcrumbs').before('<a class="button" href="/gallery.php" style="float:right;margin-right:40px;">Zurück zur Alben Übersicht</a>');
location.href = '#alben';
$('.boxcontent.titel').text('Die Videogalerie');
});
  
if (location.href.indexOf('#alben') > -1) {
$('.page_gallery .button').hide();
$('.page_gallery').find('.box').hide()
$('.box.video, .box.video li').show()
$('#breadcrumbs').before('<a class="button" href="/gallery.php" style="float:right;margin-right:40px;">Zurück zur Alben Übersicht</a>');
$('.boxcontent.titel').text('Die Videogalerie');
}
 
//// Videos Dateneingabe ////  
$('.videostyle .userinfo a').text(daten.Ersteller);
$('.videostyle .userinfo a').attr('href',daten.Ersteller_Link);
$('#breadcrumbs strong').text(daten.Ersteller_Titel);
 
 
function anzeige_video() {
$.each(daten.Titel, function(i) { 
$('#video_'+i+' .videodivdiv strong').text(daten.Titel[i]);
$('#video_'+i+' .videoiframe').attr('src',daten.Video[i]);
$('#video_'+i+' .videoinfo').html(daten.VideoInfo[i]);
$('#video_'+i+' .userinfo strong').text(daten.Ersteller_Datum[i]);
});
};
  
//// Themenübersicht Dateneingabe ////
$('.ThErsteller small').text(daten.Ersteller);
$('.ThErsteller').attr('href',daten.Ersteller_Link);
 
function Anzeige_VThema() {
$.each(daten.ThPage, function(i) { 
$('#VThema_'+i+' .cat_covervideo a, #VThema_'+i+' .spacer10 strong a').attr('href',daten.ThPage[i]);
$('#VThema_'+i+' .cat_covervideo .video_cover').attr('src',daten.ThStartVideo[i]);
$('#VThema_'+i+' .spacer10 strong a').text(daten.ThTitel[i]);
$('#VThema_'+i+' .gcat_further .ThDatum').text(daten.Ersteller_Datum[i]);
$('#VThema_'+i+' .ThInfo').html(daten.ThInfo[i]);
$('#VThema_'+i+' .gcat_further .ThCount').text(daten.Anzahl_Videos[i]);
});
};
  
};
 
//// Video konvertieren (link_converter.js) ////
$(function(){$('.convert_youtube').html(function(index, link) {return link.replace("/watch?v=", "/embed/").replace("youtu.be/" , "youtube.com/embed/").replace("https://www.youtube.com/" , "https://www.youtube.com/");});}); 
 </script>
 



Schließen




Als nächsten Schritt wird ein zweites Template-Element "gallery_footer" für die Themenübersicht benötigt!
Template-Element "gallery_footer" erstellen und das folgende Skript eingetragen!




• In Zeile 8+9 wird der Name des Erstellers und der Link zum Profil eingetragen!
• In Zeile 13-17 werden die Videodaten zum 1. Thema eingetragen.
• Die Videogalerie ist für 3 Themen mit je 3 Videos voreingestellt!
• Werden weitere Themen benötigt, müssen Zeile 11-19 kopiert und wiederholt eingetragen werden!
• In Zeile 12 führt die Verlinkung zu den Videos des Themas.
• Wichtig! Die Verlinkung in Zeile 12 muss mit der erstellten Videoadresse für "Eigene Seite" übereinstimmen (Installation Punkt 8)!
• Die Zahl vom Video-Link "/video1.html" muss bei jedem weiteren Thema um 1 erhöht werden!


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<script>
$('.page_gallery .box:last').after('<div class="box video"><div class="boxheader"><strong>Videogalerie - <font color="#ffc628">Alben Übersicht</font></strong></div></div>');
 
var daten = {ThPage: [],ThStartVideo: [],ThTitel: [],Ersteller_Datum: [],ThInfo: [],Anzahl_Videos: []}
var them = 0;
  
// Erstellerdaten
daten.Ersteller = 'Name des Erstellers'; 
daten.Ersteller_Link = 'https://www.Link_zum_Profil';
 
// Video-Thema 1
daten.ThPage[them] = '/video1.html';
daten.ThStartVideo[them] = 'https://youtu.be/bGJOmGL6mYM';
daten.ThTitel[them] = 'In Arbeit - Titel Thema 1';
daten.Ersteller_Datum[them] = '03.06.2020';
daten.ThInfo[them] = 'Beschreibung Thema: In Arbeit .........';
daten.Anzahl_Videos[them] = '3';
$('.video').append('<div id="VThema_'+them+'" class="boxcontent vid"></div>');
them++;
  
// Video-Thema 2
daten.ThPage[them] = '/video2.html';
daten.ThStartVideo[them] = 'https://youtu.be/bGJOmGL6mYM';
daten.ThTitel[them] = 'In Arbeit - Titel Thema 2';
daten.Ersteller_Datum[them] = '03.06.2020';
daten.ThInfo[them] = 'Beschreibung Thema: In Arbeit .........';
daten.Anzahl_Videos[them] = '3';
$('.video').append('<div id="VThema_'+them+'" class="boxcontent vid"></div>');
them++;
  
// Video-Thema 3
daten.ThPage[them] = '/video3.html';
daten.ThStartVideo[them] = 'https://youtu.be/bGJOmGL6mYM';
daten.ThTitel[them] = 'In Arbeit - Titel Thema 3';
daten.Ersteller_Datum[them] = '03.06.2020';
daten.ThInfo[them] = 'Beschreibung Thema: In Arbeit .........';
daten.Anzahl_Videos[them] = '3';
$('.video').append('<div id="VThema_'+them+'" class="boxcontent vid"></div>');
them++;
 
//// Ende der Dateneingabe ////
  
$('.vid').html('<ul class="gcat forum"><li><table><tr><td class="cat_video"><div class="cat_covervideo convert_youtube"><iframe class="video_cover" allowfullscreen></iframe><a title="Zu den Videos"><img src="//files.homepagemodules.de/b2001010/a_234.png"><img style="margin:0 -12px 0 -12px;" src="//files.homepagemodules.de/b2001010/a_234.png"></a></div></td><td><div class="spacer10"><strong><a  title="Zu den Videos"></a></strong><div class="gcat_further"><small> &nbsp;&nbsp;&nbsp; Hochgeladene Videos: <span class="ThCount"></span> &nbsp;&nbsp;&nbsp; Album erstellt von: <a class="ThErsteller" title="Zum Profil"><small></small></a>&nbsp;&nbsp;&nbsp; Letzter Upload: <span class="ThDatum"></span></small></div><small><span class="ThInfo"></span></small></div></td></tr></table><div class="clear"></div></li></ul>'); $(function(){Anzeige_VThema(); });
 



Schließen




Für jedes Video-Thema wird im Plugin eine "Eigene Seite" angelegt mit den Namen "video1.html", "video2.html", "video3.html" .....u.s.w.
Eigene Seite "video1" erstellen und alle 4 Kästchen anhaken!
Ebenso für "video2", "video3", ..... !
Jeweils das folgende Skript eintragen!
Für jedes weitere Video eine neue "Eigene Seite" erstellen, "video4", "video5", ....!




• In Zeile 8+9 wird der Name des Erstellers und der Link zum Profil eingetragen!
• In Zeile 10 wird nochmal der Titel des Thema eingetragen.
• In Zeile 13-16, 20-23, 27-30,... werden die Videodaten der einzelnen Videos zum Thema eingetragen.
• Die Videogalerie ist mit 3 Videos je Thema voreingestellt!
• Werden weitere Videos benötigt, müssen Zeile 12-18 kopiert und wiederholt eingetragen werden!


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
<div class="videonav"></div><div class="spacer10" style="margin-left:55px;"><ul class="video_galerie"></ul><div class="clear"></div></div>
 
<script>
var daten = {Titel: [],Video: [],VideoInfo: [],Ersteller_Datum: []}
var vid = 0;
  
// Erstellerdaten
daten.Ersteller = 'Name des Erstellers';
daten.Ersteller_Link = 'https://www.Link_zum_Profil';
daten.Ersteller_Titel = 'Thema der Videogalerie';
 
// Videodaten
daten.Titel[vid] = 'In Arbeit - Titel Video 1';
daten.Video[vid] = 'https://youtu.be/bGJOmGL6mYM';
daten.VideoInfo[vid] = 'Beschreibung: In Arbeit .........';
daten.Ersteller_Datum[vid] = '08.07.2020';
$('.video_galerie').append('<li id="video_'+vid+'" class="videostyle"></li>');
vid++;
  
daten.Titel[vid] = 'In Arbeit - Titel Video 2';
daten.Video[vid] = 'https://youtu.be/bGJOmGL6mYM';
daten.VideoInfo[vid] = 'Beschreibung: In Arbeit .........';
daten.Ersteller_Datum[vid] = '08.07.2020';
$('.video_galerie').append('<li id="video_'+vid+'" class="videostyle"></li>');
vid++;
 
daten.Titel[vid] = 'In Arbeit - Titel Video 3';
daten.Video[vid] = 'https://youtu.be/bGJOmGL6mYM';
daten.VideoInfo[vid] = 'Beschreibung: In Arbeit .........';
daten.Ersteller_Datum[vid] = '08.07.2020';
$('.video_galerie').append('<li id="video_'+vid+'" class="videostyle"></li>');
vid++;
 
//// Ende Dateneingabe ////
 

$('.videostyle').html('<div class="videodiv"><div class="videodivdiv" title="Video mit einem Klick, vergrößern oder verkleinern!"><h5><strong></strong><span></span></h5></div><div class="convert_youtube convert_div"><iframe class="videoiframe" frameborder="0" allowfullscreen></iframe></div><div class="userinfo"><div class="videoinfo"></div><small><strong></strong> - <a title="Hier geht es mit einem Klick zum Profil"></a></small></div></div>'); $(function(){anzeige_video();});
$(function(){$('.button.titel').hide();});  
</script>
 



Schließen

YouTube-Videogalerie für das Xobor (v6) - Template!
Aktualisiert 20.12.21

Übersicht der Videogalerie!

• Die Alben Übersicht in der Videogalerie ist mit einem Vorschau-Video und einer Themenüberschrift ausgestattet!
• Die Doppelpfeile und die Themenbeschreibung führen zum Videoalbum!

Videofenster mit Titel und Videobeschreibung!

• Das Video hat eine Titel- und Videobeschreibung.
• Ist der Titel oder die Videobeschreibung länger als das Feld, wird das durch anhängende 3 Punkte gekennzeichnet.
• Der Ersteller ist zum Profil verlinkt!
• Das geöffnetes Videoalbum ist mit einer Themenüberschrift ausgestattet!
• Die YouTube-Videos lassen sich, wie gewohnt ohne Abstriche bedienen!

Ein Klick auf die Titel- und Videobeschreibung!

• Mit einem Klick auf Titel oder Beschreibung kann der komplette Text gelesen werden!
  Ein weiterer Klick schließt die Ansicht.

Unterstützte Templates!

• Damit das Plugin auch im V6 und Mobil funktioniert, muss unbedingt Mobile Template (177) mit einem Klick markiert werden!
• Soll das Plugin noch in andere Template aktiviert werden, strg/ctrl -Taste festhalten und das Template, das hinzukommt mit der Maus anklicken!

Schließen

{{template==177.start}}
<style>
.catstats{background:#ffffff !important;opacity:0.9;color:#000000 !important}
.card{padding:0 !important;box-shadow: 2px 2px 5px #383838;cursor:default} 
.card-image-container {padding:0px  !important;}
.card-img-top {margin:0px  !important;} 
.gallery .hidden {color:#222222 !important;}
.gallerycat {margin-top:30px !important;}
 
.video_cover {width:102.5%;height:200px;}
.videoiframe {width:102.5%;height:200px;}
.videodivdiv h6 {width:102.5%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding:8px 10px;text-align:center;background: #cccccc;margin:0px;z-index:999;cursor:pointer;}
.videodivdiv h6.activ {height:auto;white-space:normal;padding:6px 10px;margin:2px 5% !important;width:90%;border-radius: 4px; box-shadow: rgb(92, 92, 92) 3px 3px 3px;}
.videoinfo {width:102.5%;height:40px;line-height:24px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding:10px;background: #cccccc;font-size:13px;margin:0 0 0 0;z-index:999;cursor:pointer;}
.videoinfo.activ {height:auto;white-space:normal;position:absolute;margin-top:1.5% !important;left:5%;width:90%;border-radius: 4px; box-shadow: rgb(92, 92, 92) 3px 3px 3px;text-align:left;}
 
.pages .scndrow{display:none !important}
  
.thtitel {text-decoration:none !important;}
.thtitelhover {margin-top:5px;}
.thtitelhover:hover {background:#ffffff;}
.ThTitel {text-overflow:ellipsis;overflow:hidden;padding:1px 15px;font-size:13px;}
  
/* Forum-Hintergrund V6 */  
body {background: url('//files.homepagemodules.de/b214495/a_677_b71462b6.png') top left repeat #aaa;background-position: bottom;}
</style>
 
<script>
{{footerjs.start}}
{{footerjs}}
  
//Veränderung Navileiste Bilder- & Videogalerie
$("#link_gallery:contains('Bildergalerie'),#breadcrumbs a:contains('Bildergalerie')").text("Bilder- & Videogalerie");
$(".navbar-nav .dropdown-menu a:contains('Zur Bildergalerie')").html("Zur Bilder- & Videogalerie");
 
//Navileiste 
$('.video_galerie').before('<nav id="breadcrumbs">\
<ol class="breadcrumb">\
<li class="breadcrumb-item"><a href="/"><span class="xob xob-lg xob-home"></span></a></li>\
<li class="breadcrumb-item "><a href="/gallery.php">Bilder- & Videogalerie</a></li>\
</ol></nav>\
<div class="bg-light p-3 mb-3 cat-desc"><center><h4>'+daten.Ersteller_Titel+'</h4></center></div>\
<br><div class="row"><div class="col-12"><h4 class="page-header">Videos <small class="d-block"><small>'+daten.ThInfo+'</small></small></h4></div></div>');
 
// Videogalerie ausblenden, wenn Bildergalerie aktiv ist
if ($('#emptycat,.page-header').length > 0) {
$('.videohide').hide();
};
 
// Video Dateneingabe //
function anzeige_video() {
$('.userinfo span').text(daten.Ersteller);
$('.videostyle .userinfo').attr('href',daten.Ersteller_Link);
  
$.each(daten.Titel, function(i) { 
$('#video_'+i+' .videodivdiv strong').text(daten.Titel[i])
$('#video_'+i+' .videoiframe').attr('src',daten.Video[i]);
$('#video_'+i+' .videoinfo').html(daten.VideoInfo[i]);
$('#video_'+i+' .userinfodate').text(daten.Ersteller_Datum[i]);
  
$('#video_'+i+' .videodivdiv h6,#video_'+i+' .videoinfo').click(function() {
$(this).toggleClass("activ");
$('#video_'+i+' .albumcreator').toggle();
});
});
};
anzeige_video();
 
//// Themenübersicht Dateneingabe ////
function anzeige_thema() {
$('.ThErsteller span').text(daten.Ersteller);
$('.ThErsteller').attr('href',daten.Ersteller_Link);
 
$.each(daten.ThPage, function(i) { 
$('#VThema_'+i+' .cat_covervideo a, #VThema_'+i+' a.thtitel').attr('href',daten.ThPage[i]);
$('#VThema_'+i+' .cat_covervideo .video_cover').attr('src',daten.ThStartVideo[i]);
$('#VThema_'+i+' .ThTitel').text(daten.ThTitel[i]);
$('#VThema_'+i+' .ThDatum').text(daten.Ersteller_Datum[i]);
$('#VThema_'+i+' .ThCount').text(daten.Anzahl_Videos[i]);
});
};
anzeige_thema();
 
{{footerjs.end}}
 
//// Videokonverter ////
window.addEventListener('load', function ( ) {
$('.convert_youtube').html(function(index, link) {return link.replace("/watch?v=", "/embed/").replace("youtu.be/" , "youtube.com/embed/").replace("https://www.youtube.com/" , "https://www.youtube.com/");});
});
</script>
{{template==177.end}}
 

{{template==177.start}}
<script>
{{footerjs.start}}
{{footerjs}}
 
$(".gallery #gallery_options_container h3.float-left").after('<br><br>Hier finden Sie Bilder zum Lachen, zum Schmunzeln, witziges und humorvolles in allen Varianten.<br>Auch faszinierende Autos, Bauwerke, Brücken, Hotels, besondere Türme, Bilder zu Technik, Kunst, Natur und Ausgefallenes sind auch dabei.<br>Haben Sie selbst Bilder gemacht, dann sind Sie hier genau richtig!<br>');
$(".gallery #gallery_options_container").append('<br><div class="videohide"><h3>Videogalerie</h3>\
Die neue Videogalerie hat viel zu bieten. Interessante Videos zu den verschiedensten Themen! <br> \
Haben Sie selber ein interessantes Video gefunden, bitte im Forum per "<a href="/private_new.php?sendto=1&title=Habe ein interessantes Video gefunden!">Forum Mail</a>" bescheid sagen! \
<div id="cat_container">\
<div id="cat_content" class="container">\
<div class="row video">\
</div></div></div></div>');
 
var divvideo = 'col-12 col-sm-6 col-xl-3 gallerycat text-center mb-2 mb-xl-4 fadeIn';
var daten = {ThPage: [],ThStartVideo: [],ThTitel: [],Ersteller_Datum: [],Anzahl_Videos: []};
var them = 0;
  
// Erstellerdaten
daten.Ersteller = 'Admin (Name)'; 
daten.Ersteller_Link = '/u1_.html';
  
// Video-Thema 1
daten.ThPage[them] = '/Video1.html';
daten.ThStartVideo[them] = '//youtu.be/bGJOmGL6mYM';
daten.ThTitel[them] = 'Thementitel 1';
daten.Ersteller_Datum[them] = '01.01.2020';
daten.Anzahl_Videos[them] = '10';
$('.video').append('<div id="VThema_'+them+'" class="'+divvideo+' vid"></div>');
them++;
  
// Video-Thema 2
daten.ThPage[them] = '/Video2.html';
daten.ThStartVideo[them] = '//youtu.be/bGJOmGL6mYM';
daten.ThTitel[them] = 'Thementitel 2';
daten.Ersteller_Datum[them] = '01.01.2020';
daten.Anzahl_Videos[them] = '10';
$('.video').append('<div id="VThema_'+them+'" class="'+divvideo+' vid"></div>');
them++;
 
// Video-Thema 3
daten.ThPage[them] = '/Video3.html';
daten.ThStartVideo[them] = '//youtu.be/bGJOmGL6mYM';
daten.ThTitel[them] = 'Thementitel 3';
daten.Ersteller_Datum[them] = '01.01.2020';
daten.Anzahl_Videos[them] = '10';
$('.video').append('<div id="VThema_'+them+'" class="'+divvideo+' vid"></div>');
them++;
 
//// Ende der Dateneingabe ////   
 
$('.vid').html('<div class="card albumcard hoverable  x-depth-1">\
<div class="card-image-container cat_video" style="height:17rem;overflow:hidden;">\
<div class="catstats text-right"><span class="ThCount"></span> <i class="far fa-image"></i></div>\
<div class="cat_covervideo convert_youtube"><iframe class="video_cover" allowfullscreen></iframe></div>\
<div class="thtitelhover"><a class="thtitel"><img src="//files.homepagemodules.de/b2001010/a_234.png"><img style="margin-left:-8px;" src="//files.homepagemodules.de/b2001010/a_234.png"><small>Weiter</small><h5 class="text-nowrap cmb-2 ThTitel"></h5></a></div>\
</div>\
<div class="card-text" style="margin:-8px 0 5px 0;">\
<div class="albumcreator">\
<a title="Zum Profil" class="userlink user_1 ThErsteller" style="color:#e6ab15;"><img class="img-responsive img-circle avatar avatar_round_xsmall" src="//files.homepagemodules.de/b104774/avatar-e1e3f372-1.gif" style="margin:5px !important;"><span></span> - <span class="ThDatum" style="color:#e6ab15;"></span></a>\
</div></div>\
</div>'); 
 
{{footerjs.end}}
</script>
{{template==177.end}}
 

{{template==177.start}}
<div class="container row mainrow p-0"><div class="container"><div id="cat_container"><div id="cat_content" class="container"><div class="row video_galerie"></div></div></div></div></div>
 
<script>
{{footerjs.start}}
{{footerjs}}
  
$(".firstrow").removeClass( "col-xl-8" )
 
var divvideo = 'col-12 col-sm-6 col-xl-3 gallerycat text-center mb-2 mb-xl-4 fadeIn'
var daten = {Titel: [],Video: [],VideoInfo: [],Ersteller_Datum: []}
var vid = 0;
  
// Erstellerdaten
daten.Ersteller = 'Admin (Name)';
daten.Ersteller_Link = '/u1_.html';
daten.Ersteller_Titel = 'Thementitel 1';
daten.ThInfo = 'Beschreibung: In Arbeit!';
  
daten.Titel[vid] = 'In Arbeit (Video 1)';
daten.Video[vid] = '//youtu.be/bGJOmGL6mYM';
daten.VideoInfo[vid] = 'Themenbeschreibung: In Arbeit .........';
daten.Ersteller_Datum[vid] = '01.01.2020';
 
// Videodaten 1
daten.Titel[vid] = 'In Arbeit (Video 1)';
daten.Video[vid] = '//youtu.be/bGJOmGL6mYM';
daten.VideoInfo[vid] = 'Beschreibung: In Arbeit .........';
daten.Ersteller_Datum[vid] = '01.01.2020';
$('.video_galerie').append('<div id="video_'+vid+'" class="'+divvideo+' videostyle"></div>');
vid++;
  
// Videodaten 2
daten.Titel[vid] = 'In Arbeit (Video 2)';
daten.Video[vid] = '//youtu.be/bGJOmGL6mYM';
daten.VideoInfo[vid] = 'Beschreibung: In Arbeit .........';
daten.Ersteller_Datum[vid] = '01.01.2020';
$('.video_galerie').append('<div id="video_'+vid+'" class="'+divvideo+' videostyle"></div>');
vid++;
 
//// Ende Dateneingabe ////
 
$('.videostyle').html('<div class="card albumcard hoverable">\
<div class="card-image-container" style="height:20rem;overflow:hidden;">\
<div class="videodivdiv"><h6><strong></strong><span></span></h6></div>\
<div class="convert_div convert_youtube"><iframe class="videoiframe" allowfullscreen></iframe></div>\
<div style="margin:-8px 0 5px 0;"><div class="videoinfo"></div></div>\
<div class="card-text"><div class="albumcreator">\
<span class="text-muted">\
<a class="userlink user_1 userinfo" style="color:#e6ab15;"><img class="img-responsive img-circle avatar avatar_round_xsmall" src="//files.homepagemodules.de/b104774/avatar-e1e3f372-1.gif" style="margin:5px;"><span></span> - <span class="userinfodate" style="color:#e6ab15;"></span></a> \
</span>\
</div></div>\
</div></div>');
 
{{footerjs.end}}
</script>
{{template==177.end}}