fourthelement

If you are still having issues with same height please copy and past this amend into the file template > content.php and it will resolve the issue for same height boxes as well as with images.

<?php
$post_type = “colorbox_panels”;

$AllColorbox = array( ‘p’ => $WPSM_Colorbox_ID, ‘post_type’ => $post_type, ‘orderby’ => ‘ASC’);
$loop = new WP_Query( $AllColorbox );

while ( $loop->have_posts() ) : $loop->the_post();
//get the post id
$post_id = get_the_ID();

$Colorbox_Settings = unserialize(get_post_meta( $post_id, ‘Colorbox_Settings’, true));
if(count($Colorbox_Settings))
{
$option_names = array(
“colorbox_sec_title” => “yes”,
“show_colorbox_title_icon” => “1”,
“show_colorbox_title_icon_align” => “left”,
“colorbox_radius” => “yes”,
“enable_colorbox_border” => “yes”,
“colorbox_shadow” => “yes”,
“colorbox_same_height” => “no”,
“colorbox_masonry” => “yes”,
“box_layout” => 6,
“colorbox_title_bg_clr” => “#e8e8e8”,
“colorbox_title_icon_clr” => “#000000”,
“colorbox_desc_bg_clr” => “#ffffff”,
“colorbox_desc_font_clr” => “#000000”,
“show_colorbox_desc_align” => “left”,
“title_size” => “18”,
“des_size” => “16”,
“font_family” => “Arial”,
“colorbox_styles” =>1,
“custom_css” =>””,
);

foreach($option_names as $option_name => $default_value) {
if(isset($Colorbox_Settings[$option_name]))
${“” . $option_name} = $Colorbox_Settings[$option_name];
else
${“” . $option_name} = $default_value;
}
}

$colorbox_data = unserialize(get_post_meta( $post_id, ‘wpsm_colorbox_data’, true));
$TotalCount = get_post_meta( $post_id, ‘wpsm_colorbox_count’, true );
if($TotalCount>0)
{
?>
<?php if($colorbox_sec_title == ‘yes’ ) { ?>
<h2 style=”margin-bottom:20px ;display:block;width:100%;margin-top:10px”><?php echo get_the_title( $post_id ); ?> </h2>
<?php } ?>
<style>
<?php
require(‘style.php’);
echo $custom_css; ?>
</style>
<div style=”display:block;overflow:hidden;width:100%;”>
<div id=”colorbox_main_container_<?php echo $post_id; ?>” style=”colorbox_main_container”>
<?php
foreach($colorbox_data as $colorbox_single_data)
{
$colorbox_image = $colorbox_single_data[‘colorbox_image’];
$colorbox_title = $colorbox_single_data[‘colorbox_title’];
$colorbox_desc = $colorbox_single_data[‘colorbox_desc’];
$colorbox_title_icon = $colorbox_single_data[‘colorbox_title_icon’];
$enable_single_icon = $colorbox_single_data[‘enable_single_icon’];
?>
<div class=” wpsm_col-md-<?php echo $box_layout; ?> wpsm_col-sm-6 colorbox_singel_box”>
<div class=”wpsm_panel wpsm_panel-default wpsm_panel_default_<?php echo $post_id; ?> “>
<?php
if(preg_match(‘/\S+/’,$colorbox_image)) { ?>
<div class=”wpsm_panel-body”>
<?php echo do_shortcode($colorbox_image); ?>
</div>
<?php } ?>
<?php if($show_colorbox_title_icon != ‘4’ )
{ ?>
<div class=”wpsm_panel-heading”>
<h3 class=”wpsm_panel-title”>
<?php if($show_colorbox_title_icon == ‘1’ || $show_colorbox_title_icon==3 )
{
if($enable_single_icon==”yes”)
{
?>
<span style=”margin-right:6px;” class=”fa <?php echo $colorbox_title_icon; ?>”></span>
<?php
}
}
if($show_colorbox_title_icon == ‘1’ || $show_colorbox_title_icon==2 )
{ echo $colorbox_title; } ?></h3>
</div> <?php } ?>
<?php
if(preg_match(‘/\S+/’,$colorbox_desc)) { ?>
<div class=”wpsm_panel-body”>
<p><?php echo do_shortcode($colorbox_desc); ?></p>
</div>
<?php } ?>
</div>
</div>
<?php
}
?>

</div>
</div>
<?php if($colorbox_masonry==”yes”) { ?>
<script>
jQuery(window).load(function(){
jQuery(‘#colorbox_main_container_<?php echo $post_id; ?>’).masonry({
itemSelector: ‘.colorbox_singel_box’
});
});
</script>
<?php } ?>
<?php if($colorbox_same_height==”yes”) { ?>
<script>
var col = new jColumn();
col.jcolumn(‘wpsm_panel_default_<?php echo $post_id; ?>’);
</script>

<!– ********************************************* this script has been added to sort out the problems with the same height option? –>
<script>

;( function( $, window, document, undefined )
{
‘use strict’;

var $list = $( ‘#colorbox_main_container_<?php echo $post_id; ?>’ ),
$items = $list.find( ‘.wpsm_panel’ ),
setHeights = function()
{
$items.css( ‘height’, ‘auto’ );

var perRow = Math.floor( $list.width() / $items.width() );
if( perRow == null || perRow < 2 ) return true;

for( var i = 0, j = $items.length; i < j; i += perRow )
{
var maxHeight = 0,
$row = $items.slice( i, i + perRow );

$row.each( function()
{
var itemHeight = parseInt( $( this ).outerHeight() );
if ( itemHeight > maxHeight ) maxHeight = itemHeight;
});
$row.css( ‘height’, maxHeight );
}
};

setHeights();
$( window ).on( ‘resize’, setHeights );
$list.find( ‘img’ ).on( ‘load’, setHeights );

})( jQuery, window, document );

</script>
<!– ********************************************* this script has been added to sort out the problems with the same height option? –>
<?php } ?>
<?php
}
else{
echo “<h3> No Colorbox Found </h3>”;
}
endwhile; ?>