Ask your WordPress questions! Pay money and get answers fast! (more info)

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)

2014-07-09

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)