Peters wrote:Hello
This is my first BBCode, some knows already Highslide, I have now in the context of my possibilities a BBCode for youtube in connection with Highslide provided. I thoroughly tested and hope everything is correct.
MOD Name: Highslide/youtube BBCode
MOD Authors: BBCode created by PeterS & script from http://vikjavev.no/highslide/
Demo: See Demo Link
How to do the modifications for Prosilver:
Download the zip file from here: http://vikjavev.no/highslide/download.php
Upload the highslide folder to the root of Your forum.
Open styles/prosilver/template/overall_header.html
At the bottom, on a new line, add:
<script type="text/javascript" src="highslide/highslide-with-html.js"></script>
<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
hs.outlineType = 'rounded-white';
hs.outlineWhileAnimating = true;
hs.preserveContent = false;
</script>
Open styles/prosilver/theme/colours.css
At the bottom, on a new line, add:
.highslide-html {
background-color: white;
}
.highslide-html-blur {
}
.highslide-html-content {
position: absolute;
display: none;
}
.highslide-loading {
display: block;
color: black;
font-size: 8pt;
font-family: sans-serif;
font-weight: bold;
text-decoration: none;
padding: 2px;
border: 1px solid black;
background-color: white;
padding-left: 22px;
background-image: url(highslide/graphics/loader.white.gif);
background-repeat: no-repeat;
background-position: 3px 1px;
}
a.highslide-credits,
a.highslide-credits i {
padding: 2px;
color: silver;
text-decoration: none;
font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
color: white;
background-color: gray;
}
/* Styles for the popup */
.highslide-wrapper {
background-color: white;
}
.highslide-wrapper .highslide-html-content {
width: 400px;
padding: 5px;
}
.highslide-wrapper .highslide-header div {
}
.highslide-wrapper .highslide-header ul {
margin: 0;
padding: 0;
text-align: right;
}
.highslide-wrapper .highslide-header ul li {
display: inline;
padding-left: 1em;
}
.highslide-wrapper .highslide-header ul li.highslide-previous, .highslide-wrapper .highslide-header ul li.highslide-next {
display: none;
}
.highslide-wrapper .highslide-header a {
font-weight: bold;
color: gray;
text-transform: uppercase;
text-decoration: none;
}
.highslide-wrapper .highslide-header a:hover {
color: black;
}
.highslide-wrapper .highslide-header .highslide-move a {
cursor: move;
}
.highslide-wrapper .highslide-footer {
height: 11px;
}
.highslide-wrapper .highslide-footer .highslide-resize {
float: right;
height: 11px;
width: 11px;
background: url(highslide/graphics/resize.gif);
}
.highslide-wrapper .highslide-body {
}
.highslide-move {
cursor: move;
}
.highslide-resize {
cursor: nw-resize;
}
/* These must be the last of the Highslide rules */
.highslide-display-block {
display: block;
}
.highslide-display-none {
display: none;
}
Save, close and upload both files. Purge cache and refresh template and theme in ACP
Go to ACP and create this BBCode:
BBCode:
HTML:
<body>
<div>
<a href="http://www.youtube.com/v/{TEXT}" onclick="return hs.htmlExpand(this, { objectType: 'iframe' } )" class="Highslide" ><img src="http://i.ytimg.com/vi/{TEXT}/default.jpg"></a>
</div>
</body>
Helpline:
[youtube]{Clip-Code,example "HO-BcoXYGuA"}[/youtube]
You get a Thumbnail from this clip indicated, after click a
Popup(moveable, increasable) are opened.
If someone has improvement suggestions, you welcome.
greetz Peter
Original topic: phpBB Academy
Demo: phpBB-Es Test 3