I'm trying to get further, new Image Links that are loaded to display.
Currently 5 are displayed, but we want to add a sixth & maybe 2 or 3 others in the future.
The issue we are having is when we add the sixth, it overwrites one of the existing 5.
Can anyone help with, what I suspect is the Function, to allow us to add more?
Thanks
HTML
<div class="content">
<div class="visible-xs visible-sm" style="background: #367586;color: white;width: 100%;">
<h2 style="color: white;padding: 20px;text-align: center;">Call us on <a style="text-decoration: none;color: white;" href="tel:0141999999">0131 344 4146</a></h2>
</div>
<div class="pageTitle">
<h1><?php single_cat_title(); ?></h1>
</div>
<?php
$posts = get_posts('category='.$cat);
vvwc_carouselList($posts);
?>
<div class="clearfix"></div>
PHP
function vvwc_carouselList($posts, $postId=null){
if(!empty($posts)){
echo '
<div class="nonCarousel">
<ul class="list-inline">
';
$x = 1;
foreach($posts as $post){
$active = '';
$feature = '';
if($postId == $post->ID){
$active = 'active';
$feature = 'feature';
}
if($x == 5 || $x == 1){
?>
<div class='row'>
<?php
}
echo '
<li class="col-md-3 '.$feature.'">
<div class="'.$active.' carousel-border">
<div class="carousel-item">
<a data-item="'.$post->ID.'" href="'.get_permalink($post->ID).'">
';
if(has_post_thumbnail($post->ID)){
echo get_the_post_thumbnail($post->ID);
}
echo "<div class='camperTitle'>" . strtoupper($post->post_title) . "</div>";
echo '
</a>
</div>
</div>
</li>
';
if($x == 4 || $x == count($posts)+1 ){
?>
</div>
<?php
}
$x ++;
}
echo '
</ul>
<div class="clearfix"></div>
</div>
';
}
echo '
<div class="clearfix"></div>
<script>
jQuery(document).ready(function($){
$(".carousel ul").owlCarousel({
items: 4,
pagination: false,
navigation: true,
navigationText: false,
slideSpeed: 1000,
rewindSpeed: 1000
});
});
</script>
';
}
Found it, I replaced:
$posts = get_posts('category='.$cat);
with
$posts = get_posts(array(
'category' =>15,
'orderby' => 'title',
'posts_per_page'=> 10,
'order' => 'ASC',
));
Related
With php print_r I got final result as :
Array ( [0] => 31 [1] => 21 ) Array ( [0] => 33 [1] => 27 )
And I want result to be like 31,21,33,27.
I am stuck up. Please guide me through.
Thanks,
Vikram
**Please bare with lengthy stuff. **
I have 2 main categories and need to display 3 fourth level children on home page. Categories are like :
Category > Clothing.
Category > Clothing > Mens.
Category >> Clothing > Mens > Top.
Category > Clothing > Mens > Top > Jeans.
CODES
<div class="container products" data-aos="fade-down">
<div class="page-titles" data-aos="fade-up">
Products
<hr />
</div>
<!--page-titles-->
<?php
$homepage_products=get_post_meta($post->ID, 'homepage_products', TRUE);
$homepage_parent=explode(',', $homepage_products);
global $parent_one;
global $x;
$x=1;
foreach($homepage_parent as $parent_one)
{
$parent_one_title = get_the_title( $parent_one );
$content_post = get_post($parent_one);
$content = $content_post->post_content;
$content = apply_filters('the_content', $content);
?>
<div class="row clothing">
<div id="<?php echo $x++; ?>" class="col-xs-12 col-sm-12 col-md-4 col-lg-4
<?php if($x % 2)
{
echo 'col-md-push-8 col-lg-push-8';
}
?>
">
<?php echo get_the_post_thumbnail($parent_one, 'medium_large', array('class' => 'img-'.$x)); ?>
</div>
<!--col-4 img-->
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8
<?php if($x % 2)
{
echo 'col-md-pull-4 col-lg-pull-4';
}
?>
">
<h2><?php echo $parent_one_title; ?></h2>
<?php echo $content; ?>
<!-- child pages of <?php echo strtolower($parent_title); ?> starts-->
<div class="row">
<?php
$parent_two=get_pages( array('parent'=>$parent_one,'child_of'=>$parent_one) );
foreach($parent_two as $parent_two_ids)
{
$parent_two_id=$parent_two_ids->ID;
$parent_two_id.=",";
$parent_three=get_pages( array('parent'=>$parent_two_id) );
$str_id = array();
foreach($parent_three as $parent_three_ids)
{
$parent_three_id=$parent_three_ids->ID;
$parent_three_id.=',';
$parent_four=get_pages( array('parent'=>$parent_three_id) );
$four_ids=array();
foreach($parent_four as $parent_four_ids)
{
$four_id=$parent_four_ids->ID;
$four_ids[]=$four_id;
}//parent_four_ids
// HERE IS MY ISSUE //
echo implode(',', array_merge($four_ids) );
// HERE IS MY ISSUE //
//$ids=implode(',',$four_ids);
//$idx=$ids;
//$idv=preg_replace('#\s+#',',',trim($idx));
//echo $idv;
//$str_id[]=$idx;
//$str_idx=implode(',',$str_id);
//echo $str_idx;
$content=apply_filters('the_content', $parent_four_ids->post_content);
$c_length = 80;
if (strlen($content) > $c_length)
{
$content = wordwrap($content, 80);
$i = strpos($content, "\n");
if ($i) {
$content = substr($content, 0, $i);
}
}
?>
<!-- <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 product">
< ?php echo get_the_post_thumbnail($parent_four_ids, 'medium_large'); ?>
<a href="< ?php echo get_permalink($parent_four_ids);?>">
<h4>< ?php echo $parent_four_ids->post_title; ?></h4>
</a>
< ?php echo $content; ?>
</div><!--col 3 #< ?php echo $parent_four_ids->ID; ?>-->
<?php
}//parent_three_ids
} // parent_two_ids
?>
</div>
<!-- row category - slider- child pages of <?php echo strtolower($parent_one_title); ?> ends-->
</div>
<!-- col-6 content - child pages-->
</div>
<!--row <?php echo strtolower($parent_title); ?>-->
<? } //home_parent ?>
</div>
<!--container products-->
Just as iainn said above:
php > echo implode(',', array_merge([31, 21], [33, 27]));
31,21,33,27
If you wanted a single array and not a string, remove the implode() call.
I am trying to create a new row or breaking my row of results to drop down to a new row in my results set because at the moment they just go on and on and break out of the container and do not create a new row as it hits the end of the container.
My code is fairly simple - I am using the bulma css framework and specifically the is-3 class to display each result so its gives me 4 columns in the container. So after every four a new row should be created.
My code is is fairly simple:
<div class="container">
<div class="columns projectList">
<?php while($stmt->fetch()) { ?>
<div class="column is-3">
<div class="card">
<div class="card-content">
<div class="content">
<p class="projectStatus">
<?php
if($phase == 0){
echo 'Phase: Pending';
}
elseif($phase == 1){
echo 'Phase: Planning';
}
elseif($phase == 2){
echo 'Phase: Design';
}
elseif($phase == 4){
echo 'Phase: Development';
}
else{
echo 'No Phase Added';
}
?>
</p>
<p class="projectTitle"><span>!</span><?php echo $projectName; ?></p>
<div class="projectTimes">
<div class="inner">
<span class="days">12</span>
<span class="for">Days Left In Design</span>
</div>
<div class="inner">
<span class="days">42</span>
<span class="for">Days to finish</span>
</div>
</div>
</div>
</div>
<footer class="card-footer">
<a class="card-footer-item"><i class="material-icons"></i>32</a>
<a class="card-footer-item"><i class="material-icons"></i>10</a>
</footer>
</div>
</div>
<!-- END ROW HERE AND CREATE NEW ONE -->
<?php } $stmt->close(); } ?>
</div>
</div>
My question: How do I line break after every fourth result?
<div class="container">
<?php
$i = 0;
while($stmt->fetch()) {
if($i%4==0){
echo '<div class="columns projectList">';
}
$i++;
?>
<div class="column is-3">
<div class="card">
<div class="card-content">
<div class="content">
<p class="projectStatus">
<?php
if($phase == 0){
echo 'Phase: Pending';
}
elseif($phase == 1){
echo 'Phase: Planning';
}
elseif($phase == 2){
echo 'Phase: Design';
}
elseif($phase == 4){
echo 'Phase: Development';
}
else{
echo 'No Phase Added';
}
?>
</p>
<p class="projectTitle"><span>!</span><?php echo $projectName; ?></p>
<div class="projectTimes">
<div class="inner">
<span class="days">12</span>
<span class="for">Days Left In Design</span>
</div>
<div class="inner">
<span class="days">42</span>
<span class="for">Days to finish</span>
</div>
</div>
</div>
</div>
<footer class="card-footer">
<a class="card-footer-item"><i class="material-icons"></i>32</a>
<a class="card-footer-item"><i class="material-icons"></i>10</a>
</footer>
</div>
</div>
<?php
if($i%4==0){
echo '</div>'
$i = 0;
}
?>
<!-- END ROW HERE AND CREATE NEW ONE -->
<?php } $stmt->close(); } ?>
</div>
</div>
There is something called the modulus.
for ($c = 1; $c < count($results); $c++) {
if ($c % 4 == 0) {
// This is the fourth iteration
}
}
is this what you are looking for ?
<div class="container">
<?php
$x = 1;
while($stmt->fetch()) {
?>
<?php if($x == 1) { ?> <div class="columns projectList"> <?php }
$x++;
?>
<div class="column is-3">
<div class="card">
<div class="card-content">
<div class="content">
<p class="projectStatus">
<?php
if($phase == 0){
echo 'Phase: Pending';
}
elseif($phase == 1){
echo 'Phase: Planning';
}
elseif($phase == 2){
echo 'Phase: Design';
}
elseif($phase == 4){
echo 'Phase: Development';
}
else{
echo 'No Phase Added';
}
?>
</p>
<p class="projectTitle"><span>!</span><?php echo $projectName; ?></p>
<div class="projectTimes">
<div class="inner">
<span class="days">12</span>
<span class="for">Days Left In Design</span>
</div>
<div class="inner">
<span class="days">42</span>
<span class="for">Days to finish</span>
</div>
</div>
</div>
</div>
<footer class="card-footer">
<a class="card-footer-item"><i class="material-icons"></i>32</a>
<a class="card-footer-item"><i class="material-icons"></i>10</a>
</footer>
</div>
</div>
<!-- END ROW HERE AND CREATE NEW ONE -->
<?php
if($x % 4 == 0)
{
echo '<div/>';
$x = 1;
}
} $stmt->close(); } ?>
</div>
Using this logic you can break your ROW at fourth iteration
$i = 0;
while(while($stmt->fetch())){
if($i%4==0){
//div to create new ROW
}
<div class="column is-3">
//all your logic go here
</div>
if($i%4==0){
// close the div for create new ROW
}
$i++;
}
This is a fairly simple one. I take from your question that you essentially want to split your results from the query into groups of 3? With each group being displayed as a row?
What i would recommened is fetching all of your results at once and storing as a variable. Assuming this variable is an array you can use array_chunk() to split the array of rows into the cunks you need. This will result in an array of arrays with each of the inner arrays containing the specified number of items. See: http://php.net/manual/en/function.array-chunk.php
Ive mocked up a quick example for you here:
<?php
//Fetch all data, this will become the $items array
$items = array(
'item 1',
'item 2',
'item 3',
'item 4',
'item 5',
'item 6',
'item 7',
'item 8',
'item 9',
'item 10',
'item 11',
'item 12',
'item 13',
'item 14',
);
//Split the items into 'rows' (chunks)
//The second parameter here basically indiciates how many items you want in each row
$rows = array_chunk($items, 3);
//Loop over each row group, remembering each row is an array of items (columns)
//Do your row building HTML within this foreach loop
//Do your columnd building HTML within the inner foreach loop
foreach($rows as $columns){
echo "---------------<br />";
//Build column html for each item within the row
foreach($columns as $column){
echo $column.' | ';
}
echo "<br />";
echo "---------------";
echo "<br /><br />";
}
?>
Run the abover here: http://phpfiddle.org/
You can see how it splits up the rows etc.
Hope this helps!
I am trying to get a bootstrap carousel to perform like this example below but with some php code.
http://www.bootply.com/81478
But with php code where it has row and columns. I have 5 images that I have displayed but each one for some reason comes in as a new slide.
It should show about 4 - 5 images on one row. But with my php code does not seem to work properly only shows one image each slide.
My Question is: In my view is there any way to be able to make each slide to display about 4 images.
My View Is
<div id="carousel-thumbnail<?php echo $module;?>" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<?php foreach ($banners as $i => $banner) { ?>
<li data-target="#carousel-thumbnail<?php echo $module; ?>" data-slide-to="<?php echo $i; ?>"<?php echo !$i ? ' class="active"' : ''; ?>></li>
<?php } ?>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php foreach ($banners as $i => $banner) { ?>
<div class="item<?php echo !$i ? ' active' : ''; ?>">
<div class="row">
<div class="col-lg-3">
<img src="<?php echo $banner['src']; ?>" class="img-thumbnail">
</div>
</div>
</div>
<?php } ?>
</div>
<!-- Controls -->
<?php if (count($banners) > 1) { ?>
<a class="carousel-control left" href="#carousel-thumbnail<?php echo $module; ?>" data-slide="prev">‹</a>
<a class="carousel-control right" href="#carousel-thumbnail<?php echo $module; ?>" data-slide="next">›</a>
<?php } ?>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#carousel<?php echo $module;?>').carousel({
interval: 10000
});
});
</script>
My Controller
<?php
class Carousel extends MX_Controller {
public function __construct() {
parent::__construct();
}
public function index($info) {
static $module = 0;
$data['banners'] = array();
$banners = $this->get_banner($info[0]['module_display_id']);
foreach ($banners as $banner) {
if (is_file(FCPATH . 'images/' . $banner['banner_image'])) {
$data['banners'][] = array(
'src' => base_url() . 'images/' . $banner['banner_image']
);
} else {
$data['banners'][] = array(
'src' => $banner['banner_image']
);
}
}
$data['module'] = $module++;
$this->load->view('theme/default/template/module/carousel', $data);
}
public function get_banner($banner_id) {
$this->db->select('*');
$this->db->from('banner b', 'LEFT');
$this->db->join('banner_image bi', 'bi.banner_id = b.banner_id', 'LEFT');
$this->db->where('b.banner_id', $banner_id);
$this->db->where('b.banner_status', '1');
$this->db->order_by('banner_sort_order', 'ASC');
$query = $this->db->get();
return $query->result_array();
}
}
PHP code for groups of four images
Indicators
Each item is a group of four images. The indicator indicates the group, rather than the image. Therefore, the number of indicators is four times less than the number of images.
<!-- Indicators -->
<ol class="carousel-indicators">
<?php for ($i = 0; $i < ceil(count($banners) / 4); $i++) { ?>
<li data-target="#carousel-thumbnail<?php echo $module; ?>" data-slide-to="<?php echo $i; ?>"<?php echo !$i ? ' class="active"' : ''; ?>></li>
<?php } ?>
</ol>
Items
You need to wrap in the row a series of four slide, rather than one by one:
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<?php foreach ($banners as $i => $banner) { ?>
<?php if (($i > 0) && ($i % 4 == 0)) { ?>
</div>
</div>
<div class="item">
<div class="row">
<?php } ?>
<div class="col-lg-3">
<img src="<?php echo $banner['src']; ?>" class="img-thumbnail">
</div>
<?php } ?>
</div>
</div>
</div>
I am new in php, so I like to get some help.
My clients want the next and previous button to be looped in the single page portfolio. Well this is the code I am using.
<?php
$prev_post = get_previous_post();
$next_post = get_next_post();
$prev_post_link = !empty($prev_post) ? get_permalink($prev_post->ID) : true;
$next_post_link = !empty($next_post) ? get_permalink($next_post->ID) : true;
if(!empty($prev_post) && empty($prev_post_thumb)) $prev_post_thumb = prev_next_post_format_icon($prev_post->ID);
if(!empty($next_post) && empty($next_post_thumb)) $next_post_thumb = prev_next_post_format_icon($next_post->ID);
?>
When I use True, for both the Previous & Next Links, Its appearing in the first and last portfolio, but the hyperlink is showing as http://1 and not the next portfolio. Thanks in Advance
This my html code:
<div class="dfd-controls mobile-hide">
<?php if(!empty($prev_post_link)) : ?>
<a href="<?php echo esc_url($prev_post_link); ?>" class="page-inner-nav nav-prev">
<div class="dfd-controler prev">
<div style="margin-top:7px; color:#fff;">Previous</div>
<!-- <div class="thumb prev">
<?php echo $prev_post_thumb; ?>
</div> -->
</div>
<!--<div class="pagination-title">Previous Project</div> -->
</a>
<?php endif; ?>
<?php if(!empty($next_post_link)) : ?>
<a href="<?php echo esc_url($next_post_link); ?>" class="page-inner-nav nav-next">
<div class="dfd-controler next">
<div style="margin-top:7px; color:#fff;">Next</div>
<!-- <div class="thumb next">
<?php echo $next_post_thumb; ?>
</div>-->
</div>
<!--<div class="pagination-title">Next Project</div>-->
</a>
<?php endif; ?>
change the value from true to false. Setting a variable to true will give empty a false value see here.
Now 'next' will only show if there is a next post
your PHP should be:
$prev_post = get_previous_post();
$next_post = get_next_post();
$prev_post_link = !empty($prev_post) ? get_permalink($prev_post->ID) : false;
$next_post_link = !empty($next_post) ? get_permalink($next_post->ID) : false;
if(!empty($prev_post) && empty($prev_post_thumb)) $prev_post_thumb = prev_next_post_format_icon($prev_post->ID);
if(!empty($next_post) && empty($next_post_thumb)) $next_post_thumb = prev_next_post_format_icon($next_post->ID);
UPDATE: To have the posts loop:
if( get_adjacent_post(false, '', true) ) {
previous_post_link('%link', '<div class="dfd-controler prev"><div style="margin-top:7px; color:#fff;">Previous</div></div>');
} else {
$first = new WP_Query('posts_per_page=1&order=DESC'); $first->the_post();
echo '<div class="dfd-controler prev"><div style="margin-top:7px; color:#fff;">Previous</div></div>';
wp_reset_query();
};
if( get_adjacent_post(false, '', false) ) {
next_post_link('%link', '<div class="dfd-controler next"><div style="margin-top:7px; color:#fff;">Next</div></div>');
} else {
$last = new WP_Query('posts_per_page=1&order=ASC'); $last->the_post();
echo '<a href="' . get_permalink() . '"><div class="dfd-controler next"><div style="margin-top:7px; color:#fff;">Next</div></div>';
wp_reset_query();
};
Loop Portfolio Next/Previous Button in Wordpress
<div class='next_post_link_align'>
<?php next_post_link('<span class="previous_post_link">← %link </span> <span class="post_link_text">'.__('(previous entry)','avia_framework'))."</span>";?>
</div>
<div class='previous_post_link_align'>
<?php previous_post_link('<span class="next_post_link"><span class="post_link_text">'.__('(next entry)','avia_framework').'</span> %link →</span>'); ?>
</div>
I've seen lots of questions and answers around how to do this but I am very stuck how I implement this into my webpage. I have a div named "banner" that contains an image drawn from a custom field that is on all my artist pages as a banner for each page. I would like to be able to drag this image inside the div and to save it's position. (I only want this function for myself, not visitors to the website) AKA Facebook page cover image.. This would allow me to add an image that is bigger than the div container to my custom field and for me to edit how this is showing inside the div.
This demonstates what I want to do- http://w3lessons.info/2014/08/31/facebook-style-cover-image-reposition-using-jquery-php/
but i don't understand where i put these codes in my wordpress files and how to make this work for me.. I only want this on my artist pages, and therefore using my single-artists.php template..
Here is my php code-
<?php
// artist download start
// if ( isset($_GET['download']) ) {
// header('Content-type: application/mp3');
// header('Content-Disposition: attachment; filename='.basename($_GET['download']));
// readfile( $_GET['download'] );
// }
// artist download end
get_header();
global $cs_transwitch,$prettyphoto_flag;
$prettyphoto_flag = "true";
$cs_artist = get_post_meta($post->ID, "cs_artist", true);
if ( $cs_artist <> "" ) {
$xmlObject = new SimpleXMLElement($cs_artist);
$cs_layout = $xmlObject->cs_layout;
$cs_sidebar_left = $xmlObject->cs_sidebar_left;
$cs_sidebar_right = $xmlObject->cs_sidebar_right;
}
if ( $cs_layout == "left" ) {
$cs_layout = "two-thirds column right";
$show_sidebar = $cs_sidebar_left;
}
else if ( $cs_layout == "right" ) {
$cs_layout = "two-thirds column left";
$show_sidebar = $cs_sidebar_right;
}
else $cs_layout = "sixteen columns left";
?>
<div id="banner">
<div id="bannercontent"><?php
list($src, $w, $h) = get_custom_field('banner:to_image_array');
?>
<img src="<?php print $src; ?>" width="100%" />
</div></div>
<script>$( "#bannercontent" ).draggable({
stop: function(){
alert('top offset: ' + $('#bannercontent').offset().top + ' left offset: ' + $('#bannercontent').offset().left);
}
});</script>
<div class="clear:both;"></div>
<div id="container" class="container row">
<div role="main" class="<?php echo $cs_layout;?>" >
<?php
/* Run the loop to output the post.
* If you want to overload this in a child theme then include a file
* called loop-single.php and that will be used instead.
*/
//get_template_part( 'loop', 'single_cs_artist' );
?>
<?php if ( have_posts() ): while ( have_posts() ) : the_post(); ?>
<?php
//showing meta start
$cs_artist = get_post_meta($post->ID, "cs_artist", true);
if ( $cs_artist <> "" ) {
$xmlObject = new SimpleXMLElement($cs_artist);
$cs_layout = $xmlObject->cs_layout;
$cs_sidebar_left = $xmlObject->cs_sidebar_left;
$cs_sidebar_right = $xmlObject->cs_sidebar_right;
$artist_release_date = $xmlObject->artist_release_date;
$artist_social_share = $xmlObject->artist_social_share;
$artist_buy_amazon = $xmlObject->artist_buy_amazon;
$artist_buy_apple = $xmlObject->artist_buy_apple;
$artist_buy_groov = $xmlObject->artist_buy_groov;
$artist_buy_cloud = $xmlObject->artist_buy_cloud;
}
//showing meta end
?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h1 class="heading"><?php the_title(); ?></h1>
<div class="in-sec">
<?php
// getting featured image start
$image_id = get_post_thumbnail_id ( $post->ID );
if ( $image_id <> "" ) {
//$image_url = wp_get_attachment_image_src($image_id, array(208,208),true);
$image_url = cs_attachment_image_src($image_id, 208, 208);
$image_url = $image_url;
//$image_url_full = wp_get_attachment_image_src($image_id, 'full',true);
$image_url_full = cs_attachment_image_src($image_id, 0, 0);
$image_url_full = $image_url_full;
}
else {
$image_url = get_template_directory_uri()."/images/admin/no_image.jpg";
$image_url_full = get_template_directory_uri()."/images/admin/no_image.jpg";
}
//$image_id = get_post_thumbnail_id ( $post->ID );
//$image_url = wp_get_attachment_image_src($image_id, array(208,198),true);
//$image_url_full = wp_get_attachment_image_src($image_id, 'full',true);
// getting featured image end
?>
<div class="light-box artist-tracks artist-detail <?php if($image_id == "") echo "no-img-found";?> ">
<div id="main-container">
<div id="leftcolumn">
<a rel="prettyPhoto" name="<?php the_title(); ?>" href="<?php echo $image_url_full?>" class="thumb" >
<?php echo "<img src='".$image_url."' />";?>
</a>
<br>
<br>
<div id="inpostgallery"><?php echo do_shortcode('[inpost_gallery thumb_width="104" thumb_height="104" post_id="' . get_the_ID() . '" thumb_margin_left="0" thumb_margin_bottom="0" thumb_border_radius="2" thumb_shadow="0 1px 4px rgba(0, 0, 0, 0.2)" js_play_delay="3000" id="" random="0" group="0" border="" type="yoxview" show_in_popup="0" artist_cover="" artist_cover_width="200" artist_cover_height="200" popup_width="800" popup_max_height="600" popup_title="Gallery"][/inpost_gallery]'); ?></div>
</div>
<div id="rightcolumn">
<div class="desc">
<p style="font-size:12px;"><span class="bold" style="text-transform:uppercase; color:#262626;"><?php _e('Categories', CSDOMAIN); ?> :</span>
<?php
/* translators: used between list items, there is a space after the comma */
$before_cat = " ".__( '',CSDOMAIN );
$categories_list = get_the_term_list ( get_the_id(), 'artist-category', $before_cat, ', ', '' );
if ( $categories_list ): printf( __( '%1$s', CSDOMAIN ),$categories_list ); endif; '</p>';
?>
</p>
<br>
<h5><?php print_custom_field('stars:formatted_list', array('<li><img src="http://www.entertaininc.co.uk/wp-content/uploads/2015/09/gold-star-graphic-e1441218522835.png">[+value+]</li>','<ul>[+content+]</ul>') );
?></h5><br />
<h2><strong>Price</strong> <?php print_custom_field('price'); ?></h2> <br />
<h2><strong>Location</strong> <?php echo do_shortcode('[gmw_post_info info="city, country" divider=","]'); ?></h2><br />
<h4><?php _e('Description', CSDOMAIN); ?></h4>
<div class='txt rich_editor_text'>
<?php
the_content();
?>
</div>
<div class="clear"></div>
<?php edit_post_link( __( 'Edit', CSDOMAIN ), '<span class="edit-link">', '</span>' ); ?>
</div></div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="in-sec">
<div class="artist-opts">
<div class="share-artist">
<?php
$cs_social_share = get_option("cs_social_share");
if($cs_social_share != ''){
$xmlObject_artist = new SimpleXMLElement($cs_social_share);
if($artist_social_share == 'Yes'){
social_share();
}?>
<?php }?>
</div>
<?php if($artist_buy_amazon != '' or $artist_buy_apple != '' or $artist_buy_groov != '' or $artist_buy_cloud != ''){?>
<div class="availble">
<h4><?php if($cs_transwitch =='on'){ _e('Buy This',CSDOMAIN); }else{ echo __CS('buy_now', 'Buy This'); }?></h4>
<?php
if ( $artist_buy_amazon <> "" ) echo ' <a target="_blank" href="'.$artist_buy_amazon.'" class="amazon-ind"> <span>';if($cs_transwitch =='on'){ _e('Amazon',CSDOMAIN); }else{ echo __CS('amazon', 'Amazon'); } echo '</span></a> ';
if ( $artist_buy_apple <> "") echo ' <a target="_blank" href="'.$artist_buy_apple.'" class="apple-ind"> <span>'; if($cs_transwitch =='on'){ _e('Apple',CSDOMAIN); }else{ echo __CS('itunes', 'iTunes'); } echo '</span></a> ';
if ( $artist_buy_groov <> "") echo ' <a target="_blank" href="'.$artist_buy_groov.'" class="grooveshark-ind"> <span>'; if($cs_transwitch =='on'){ _e('GrooveShark',CSDOMAIN); }else{ echo __CS('grooveshark', 'GrooveShark'); } echo '</span></a> ';
if ( $artist_buy_cloud <> "") echo ' <a target="_blank" href="'.$artist_buy_cloud.'" class="soundcloud-ind"> <span>'; if($cs_transwitch =='on'){ _e('SoundCloud',CSDOMAIN); }else{ echo __CS('soundcloud', 'SoundCloud '); } echo '</span></a> ';
?>
</div>
<?php }?>
<div class="clear"></div>
</div>
</div>
<?php
foreach ( $xmlObject as $track ){
if ( $track->getName() == "track" ) {
?>
<div class="in-sec">
<?php
enqueue_alubmtrack_format_resources();
?>
<div class="artist-tracks light-box">
<?php
$counter = 0;
foreach ( $xmlObject as $track ){
$counter++;
if ( $track->getName() == "track" ) {
echo "<div class='track'>";
echo "<h5>";
echo $artist_track_title = $track->artist_track_title;
echo "</h5>";
echo "<ul>";
if ($track->artist_track_playable == "Yes") {
echo '
<li>
<div class="cp-container cp_container_'.$counter.'">
<ul class="cp-controls">
<li><a style="display: block;" href="#" class="cp-play" tabindex="1"> <span>'; if($cs_transwitch =='on'){ _e('Play',CSDOMAIN); }else{ echo __CS('play', 'Play'); } echo '</span></a></li>
<li> <span>'; if($cs_transwitch =='on'){ _e('Pause',CSDOMAIN); }else{ echo __CS('pause', 'Pause'); } echo '</span></li>
</ul>
</div>
<div style="width: 0px; height: 0px;" class="cp-jplayer jquery_jplayer_'.$counter.'">
<img style="width: 0px; height: 0px; display: none;" id="jp_poster_0">
<audio src="'.$track->artist_track_mp3_url.'" preload="metadata" ></audio>
</div>
<script>
jQuery(document).ready(function($){
var myCirclePlayer = new CirclePlayer(".jquery_jplayer_'.$counter.'",
{
mp3: "'.$track->artist_track_mp3_url.'"
}, {
cssSelectorAncestor: ".cp_container_'.$counter.'",
swfPath: "'.get_template_directory_uri().'/scripts/frontend/Jplayer.swf",
wmode: "window",
supplied: "mp3"
});
});
</script>
</li>
';
}
if ($track->artist_track_downloadable == "Yes"){ echo '<li> <span>'; if($cs_transwitch =='on'){ _e('Download',CSDOMAIN); }else{ echo __CS('download', 'Download'); } echo '</span></li>'; }
if ($track->artist_track_lyrics <> "") { echo '<li> <span>'; if($cs_transwitch =='on'){ _e('Lyrics',CSDOMAIN); }else{ echo __CS('lyrics', 'Lyrics'); } echo '</span></li>';}
if ($track->artist_track_buy_mp3 <> ""){ echo '<li> <span>'; if($cs_transwitch =='on'){ _e('Buy Song',CSDOMAIN); }else{ echo __CS('buy_now', 'Buy Song'); } echo '</span></li>';}
echo "</ul>";
echo '
<div id="lyrics'.$counter.'" style="display:none;">
'.str_replace("\n","</br>",$track->artist_track_lyrics).'
</div>
';
echo "</div>";
}
}
?>
<div class="clear"></div>
</div>
</div>
<?php
}
}
?>
<div class="clear"></div>
<?php if ( get_the_author_meta( 'description' ) ) :?>
<div class="in-sec" style="margin-top:20px;">
<div class="about-author">
<div class="avatars">
<?php echo get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'PixFill_author_bio_avatar_size', 53 ) ); ?>
</div>
<div class="desc">
<h5><?php _e('About', CSDOMAIN); ?> <?php echo get_the_author(); ?></h5>
<p class="txt">
<?php the_author_meta( 'description' ); ?>
</p>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
<?php endif; ?>
</div>
<?php endwhile; endif; // end of the loop. ?>
<?php comments_template( '', true ); ?>
</div>
<?php if( $cs_layout != "sixteen columns left" and isset($show_sidebar) ) { ?>
<!--Sidebar Start-->
<div class="one-third column left">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar($show_sidebar) ) : ?>
<?php endif; ?>
</div>
<!--Sidebar Ends-->
<?php }?>
<div class="clear"></div><!-- #content -->
</div><!-- #container -->
<div class="clear"></div>
<?php get_footer(); ?>
You need to use jQuery UI library (draggable) - https://jqueryui.com/draggable/
And then read the offset of the div or so
You also can use a jquery plugin named draggabilly. See the event dragMove or dragEnd. Hope it helps.