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

Adding Thumbnails to lightbox for rtmedia plugin (higher the pot if this is fixed soon as possible!) WordPress

  • SOLVED

Hi,

I want to add thumbnail to the lightbox in rtmedia plugin..open for suggestions, maybe on the comment bar or on top of image..




Answers (1)

2014-07-11

timDesain Nanang answers:

screenshot: [[LINK href="http://i.imgur.com/xbNHbc9.jpg"]]http://i.imgur.com/xbNHbc9.jpg[[/LINK]]

put this code in theme's function

add_action('wp_enqueue_scripts', 'wpq_enqueue', 1000);
function wpq_enqueue(){
wp_enqueue_script('rtmedia-custom', get_bloginfo('stylesheet_directory').'/your-script.js', array('jquery', 'wp-mediaelement'), '1');
}


add_action('wp_head', 'wpq_head_thumb', 999);
function wpq_head_thumb() {
?>
<style type="text/css">
.wpq-rtmedia-thumb-wrap{display:block;height:128px;overflow-x:auto;}
.wpq-rtmedia-thumb-url{display:block;float:left;width:64px;height:64px;}
.wpq-rtmedia-thumb-url.wpq-rtmedia-thumb-current{background-color:#aaa;}
.wpq-rtmedia-thumb-url:hover{background-color:#333;}
.wpq-rtmedia-thumb-url img {display:block;width:60px;height:60px;margin:2px;}
.wpq-rtmedia-thumb-none{display:none !important}
</style>
<?php
}

add_action('wpq_rtmedia_action_thumb', 'wpq_rtmedia_thumb', 10, 2);
function wpq_rtmedia_thumb($author_id, $current_id){
global $wpdb;
$tmb_qry = " SELECT * FROM ".$wpdb->prefix."rt_rtm_media WHERE media_author='".$author_id."' AND media_type='photo' ORDER BY id DESC LIMIT 0, 8 ";
$tmb_res = $wpdb->get_results($tmb_qry);
if(!empty($tmb_res)) {
echo '<div class="wpq-rtmedia-thumb-wrap">';
foreach($tmb_res as $tmb_dat) {
$rtmedia_id = $tmb_dat->id;
$media_id = $tmb_dat->media_id;
echo '<a href="'.esc_url(get_rtmedia_permalink(($rtmedia_id))).'" title="'.esc_attr(get_rtmedia_title($rtmedia_id)).'" class="mfp-ajax wpq-rtmedia-thumb-url'.($current_id==$rtmedia_id ? ' wpq-rtmedia-thumb-current':'').'">'.wp_get_attachment_image( $media_id, array(60,60) ).'</a>';
}
echo '<span class="mfp-ajax wpq-rtmedia-thumb-url wpq-rtmedia-thumb-none" ></span>';
echo '</div>';
}
}



put this code in your-script.js and upload to theme folder

jQuery(document).ready(function(){
rtMediaHook.register('rtmedia_js_popup_after_content_added',
function() {
jQuery('.wpq-rtmedia-thumb-url').magnificPopup({
type: 'ajax',
});
}
);//register

});//jQuery(document)


put this code in media-single.php file

<?php
global $rtmedia_media;
do_action('wpq_rtmedia_action_thumb', $rtmedia_media->media_author, rtmedia_id() );
?>

before :
<?php if ( rtmedia_comments_enabled () ) { ?>