Jaxel
Well-known member
I changed the [medio] custom BBcode in my mod. You can see an example here: (click the image)
http://xen1.8wayrun.com/threads/media-hatsune-miku-po-pi-po-concert-ver.23/
The code below is how its being done. As you can see, I am taking the thumbnail to the media, setting it as the background of a DIV, and then setting the image on the DIV as the transparent play button...
You may however have noticed an issue when you clicked the link. An issue with the ugc css. By default, with XenForo, when you mouse over an image link, it will add a light brown box at the bottom to give a nice looking mouseover effect. The problem is that the image itself is transparent and thus the brown box is viewable infront of the thumbnail.
Is there a way I can disable this behavior only in this specific spot?
http://xen1.8wayrun.com/threads/media-hatsune-miku-po-pi-po-concert-ver.23/
The code below is how its being done. As you can see, I am taking the thumbnail to the media, setting it as the background of a DIV, and then setting the image on the DIV as the transparent play button...
Code:
$link = XenForo_Link::buildPublicLink('full:media/popout', $media);
$back = XenForo_Link::buildPublicLink('full:data/media/').$media['media_id'].'.jpg';
$thum = XenForo_Link::buildPublicLink('full:js/8wayrun/').'EWRmedio_play.png';
return '<div style="text-align: center;">
<div style="display: inline-block; background: url(\''.$back.'\') no-repeat; background-size: 100%;">
<a href="'.$link.'" class="OverlayTrigger"><img src="'.$thum.'" /></a>
</div>
</div>';
You may however have noticed an issue when you clicked the link. An issue with the ugc css. By default, with XenForo, when you mouse over an image link, it will add a light brown box at the bottom to give a nice looking mouseover effect. The problem is that the image itself is transparent and thus the brown box is viewable infront of the thumbnail.
Is there a way I can disable this behavior only in this specific spot?