Fullscreen lighbox on rtmedia plugin (Will increase the pot if this is fixed soon) WordPress
- SOLVED
Hi!
I'm looking for a good and well coded solution for getting rtmedia plugin lightbox to fullscreen mode. Either by adding a fullscreen icon in the lightbox or so it's fullscreen all the time.
https://rtcamp.com/rtmedia/docs/developer/templating-system/
Changing the media-single.php are the recommendation by the rtmedia team and also the js in the lib on the buddypress media. Also I forgot to mention that the Lightbox is Magnific popup.
Answers (2)
timDesain Nanang answers:
no need to add Magnific popup again,
because the script was added by rtMedia wp plugin (/plugins/buddypress-media/lib/magnific/magnific.js)
try this trick to override rtMedia.js (/plugins/buddypress-media/app/assets/js/rtMedia.js)
put the code in the theme's functions.php
and check the result ([[LINK href="http://i.imgur.com/VhCRmM3.png"]]http://i.imgur.com/VhCRmM3.png[[/LINK]])
add_action('wp_head', 'wpq_head', 9999);
function wpq_head() {
?>
<style type="text/css">
.mfp-container{padding:0}
.rtmedia-container{padding:0}
.rtmedia-container .row{max-width:100%}
</style>
<?php
}
add_action('wp_footer', 'wpq_footer', 9999);
function wpq_footer() {
?>
<script type="text/javascript">
jQuery(document).ready(function(){
rtMediaHook.register('rtmedia_js_popup_after_content_added',
function() {
jQuery('#wpadminbar').hide();
jQuery('#rtmedia-single-media-container').removeClass();
jQuery('#rtmedia-single-media-container').addClass('rtmedia-single-media columns large-12');
var height = jQuery(window).height() ;
jQuery('.mfp-content .rtm-lightbox-container .rtmedia-single-meta').css({ 'color':'red', 'height' : 'auto', 'max-height' : 'auto' });
jQuery('.mfp-content .rtm-lightbox-container #rtmedia-single-media-container .rtmedia-media').css({ 'height' : height, 'max-height' : height, 'over-flow' : 'inherit' });
}
);
});//jQuery(document)
</script>
<?php
}
Veritus comments:
Nice, the only problem, it seems that the comment bar falls under the lightbox, in my theme. Also I want the fullscreen having the comment bar on side but quite small..can you achieve this?
timDesain Nanang comments:
i see,
try this:
add_action('wp_head', 'wpq_head', 9999);
function wpq_head() {
?>
<style type="text/css">
.mfp-container{padding:0}
.rtmedia-container{padding:0}
.rtmedia-container .row{max-width:100%}
</style>
<?php
}
add_action('wp_footer', 'wpq_footer', 9999);
function wpq_footer() {
?>
<script type="text/javascript">
jQuery(document).ready(function(){
rtMediaHook.register('rtmedia_js_popup_after_content_added',
function() {
jQuery('#wpadminbar').hide();
jQuery('#rtmedia-single-media-container').removeClass('large-8').addClass('large-9'); // change this
jQuery('.rtmedia-single-meta').removeClass('large-4').addClass('large-3'); // change this (12-above)
var height = jQuery(window).height() ;
jQuery('.mfp-content .rtm-lightbox-container .rtmedia-single-meta').css({ 'height' : height, 'max-height' : height });
jQuery('.mfp-content .rtm-lightbox-container #rtmedia-single-media-container .rtmedia-media').css({ 'height' : height, 'max-height' : height });
}
);
});//jQuery(document)
</script>
<?php
}
timDesain Nanang comments:
or you can override via template
copy this file: /plugins/buddypress-media/templates/media/media-single.php
to your-theme : /themes/your-theme/rtmedia/media/media-single.php
change:
line: 9
<div id="rtmedia-single-media-container" class="rtmedia-single-media columns <?php echo ($rt_ajax_request) ? "large-8" : "large-12"; ?>">
line: 40
<div class="rtmedia-single-meta columns <?php echo ($rt_ajax_request) ? "large-4" : "large-12"; ?>">
to
line: 9
<div id="rtmedia-single-media-container" class="rtmedia-single-media columns <?php echo ($rt_ajax_request) ? "large-9" : "large-12"; ?>">
line: 40
<div class="rtmedia-single-meta columns <?php echo ($rt_ajax_request) ? "large-3" : "large-12"; ?>">
then, remove this part from hooking above
jQuery('#rtmedia-single-media-container').removeClass('large-8').addClass('large-9'); // change this
jQuery('.rtmedia-single-meta').removeClass('large-4').addClass('large-3'); // change this (12-above)