Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

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)