Develop Reference

Add a lightbox inside advance custom field repeater

The gallery which including dynamic pills I've developed using advance custom field needs to add a lightbox. I can't figure out where to add the code of lightbox since all my attempts were failed.
All the relevant stylesheets and script files links has been added to header.php and I'm not gonna post the header file code in here.
Here is my code.
<div class="gallery pull-left width-wide">
<!-- Menu -->
<div class="cat-menu pull-right padding-right-20">
<!--Categories : -->
<!-- Show All
<a href="#Category1" title="Category 1 " >Category 1 </a>
<a href="#Category2" title="Category 2" >Category 2</a>
<a href="#Category3" title="Category 3" >Category 3</a> -->
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#showall">Show All</a></li>
<li><a data-toggle="pill" href="#Category1">Category 1</a></li>
<li><a data-toggle="pill" href="#Category2">Category 2</a></li>
<li><a data-toggle="pill" href="#Category3">Category 3</a></li>
</ul>
</div><!-- // Menu -->
<!-- Gallery Items -->
<div class="gallery-items pull-left width-wide">
<div class="tab-content">
<div id="showall" class="tab-pane fade in active">
<?php
if( have_rows('show_all_images') ):
while ( have_rows('show_all_images') ) : the_row();
//vars
$image = get_sub_field('sa_image');
$link = get_sub_field('link');
?>
<?php if( $link ): ?>
<a href="<?php echo $link; ?>">
<?php endif; ?>
<img src="<?php echo $image ?>" width="344" height="215" style="cursor:pointer"/>
<?php if( $link ): ?>
</a>
<?php endif; ?>
<?php endwhile; ?>
<?php endif;
?>
</div>
<div id="Category1" class="tab-pane">
<?php
if( have_rows('catagory_one_image') ):
while ( have_rows('catagory_one_image') ) : the_row();
//vars
$image = get_sub_field('cat_img');
$link = get_sub_field('link');
?>
<?php if( $link ): ?>
<a href="<?php echo $link; ?>">
<?php endif; ?>
<img src="<?php echo $image ?>" width="344" height="215"/>
<?php if( $link ): ?>
</a>
<?php endif; ?>
<?php endwhile; ?>
<?php endif;
?>
</div>
<div id="Category2" class="tab-pane">
<?php
if( have_rows('catagory_two_image') ):
while ( have_rows('catagory_two_image') ) : the_row();
//vars
$image = get_sub_field('cat_two_img');
$link = get_sub_field('link');
?>
<?php if( $link ): ?>
<a href="<?php echo $link; ?>">
<?php endif; ?>
<img src="<?php echo $image ?>" width="344" height="215" />
<?php if( $link ): ?>
</a>
<?php endif; ?>
<?php endwhile; ?>
<?php endif;
?>
</div>
<div id="Category3" class="tab-pane">
<?php
if( have_rows('catagory_three_image') ):
while ( have_rows('catagory_three_image') ) : the_row();
//vars
$image = get_sub_field('cat_three_img');
$link = get_sub_field('link');
?>
<?php if( $link ): ?>
<a href="<?php echo $link; ?>">
<?php endif; ?>
<img src="<?php echo $image ?>" width="344" height="215" />
<?php if( $link ): ?>
</a>
<?php endif; ?>
<?php endwhile; ?>
<?php endif;
?>
</div>
</div>
</div><!-- // Gallery Items -->
</div><!-- // Gallery -->
Kindly help me to add a lightbox to this gallery
Thank You

you can use fancybox easily.Please review http://fancyapps.com/fancybox/3/
Here is example using:
<?php if(get_field('gallery')):
echo '<div class="gallery__images">';
$i == 0;
while(has_sub_field('gallery')):
$i++;
$parent_image = get_sub_field('parent_image');
echo '<div class="gallery_inner_image">';
echo '<div class="holder">';
echo '<a class="fancybox" rel="group'.$i.'" href="'.$parent_image['url'].'">';
echo '<img src="' . $parent_image['sizes']['gallery-thumb'] . '" alt="' . $parent_image['alt'] . '" />';
echo '</a>';
echo '</div>';
echo '<div class="gallery__caption">'.get_sub_field('caption').'</div>';
if(get_sub_field('gallery_images')):
while(has_sub_field('gallery_images')):
echo '<a class="fancybox" rel="group'.$i.'" href="';
echo get_sub_field('gallery_image')['sizes']['large'];
echo '" /></a>';
endwhile;
endif;
echo '</div>';
endwhile;
echo '</div>'; endif; ?>

Showwordpress user description when user image is clicked

I am working on an existing wordpress site. I am updating a page that displays the users in clickable images. When the image is clicked a dropdown box is supposed to display the users name and description. The problem I am having is, the dropdown box is only displaying the name and description of the last user on the page. The information in the dropdown is not matching up with the image clicked. Any help is greatly appreciated!
Here is the HTML/PHP:
<section class="series">
<div class="container-fluid">
<?php //query for hosts/contributor users
$cq = new WP_User_Query(array('role'=>'contributor'));
// User Loop
if(!empty($cq->results))
{
//sort users into current and past by meta field//
$hosts = $cq->results;
$current_hosts = array();
foreach($hosts as $user)
{
$user->sort_num = get_field('order', "user_$user->ID");
if(tv_is_host_active($user->ID))
$current_hosts[] = $user;
else
$past_hosts[] = $user;
}
usort($current_hosts, 'tv_compare_hosts');
//display the current hosts
$row_counter = 0;
foreach ( $current_hosts as $user )
{
//add rows of four
if($row_counter++ % 4 == 0)
{
echo "<div class='row'\n>";
} ?>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a class="card card-cast" href="javascript:void(0)">
<div class="card-img-cast">
<?php if(get_field('profile_picture', "user_".$user->ID)): $image = get_field('profile_picture', "user_".$user->ID); ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php else: ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/thumbholder-medium.png" alt="winchester logo" />
<?php endif;?>
</div>
<div class="card-content">
<div class="card-title"><?php echo $user->data->display_name; ?></div>
</div>
</a>
</div>
<?php
//add rows of 4
if($row_counter % 4 == 0)
{
echo "</div><!-- end row-->\n";
}
} //end foreach of current hosts
//cap row if the last row was not full
if(!($row_counter % 4 == 0))
{
echo "</div><!-- end/cap row-->\n";
}
?>
<?php
} else { ?>
<div class="col-xs-12 col-sm-4 host">
<p>No hosts found.</p>
</div>
<div class="clearfix visible-xs"> </div>
<?php
}
?>
<?php endwhile;
endif; //end main loop ?>
<!-- cast profile dropdown -->
<div class="container-fluid profile-details hidden">
<i class="fa fa-times closeBox" aria-hidden="true"></i>
<h3 class="member-name"><?php echo $user->data->display_name; ?></h3>
<p class=".text-white"><?php echo tv_host_shows($user->ID); ?></p>
<p class="member-description"><?php echo get_user_meta($user->ID, 'description', true); ?></p>
<div class="row">
<div class="col-xs-12">
<ul class="list-inline social">
<?php if(get_field('facebook_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Like <?php echo $user->data->display_name; ?> On Facebook" href="<?php the_field('facebook_profile_link', "user_".$user->ID); ?>"><i class="fa fa-facebook"></i></a></li>
<?php endif;
if(get_field('twitter_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Follow <?php echo $user->data->display_name; ?> On Twitter" href="<?php the_field('twitter_profile_link', "user_".$user->ID); ?>"><i class="fa fa-twitter"></i></a></li>
<?php endif;
if(get_field('youtube_channel_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Watch <?php echo $user->data->display_name; ?> On Youtube" href="<?php the_field('youtube_channel_link', "user_".$user->ID); ?>"><i class="fa fa-youtube"></i></a></li>
<?php endif;
if(get_field('website', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="See the website of <?php echo $user->data->display_name; ?>" href="<?php the_field('website', "user_".$user->ID); ?>"><i class="fa fa-globe"></i></a></li>
<?php endif; ?>
</ul>
</div>
</div><!-- end social link row -->
</div><!-- end dropdown -->
</div><!--end container-->
</section>
</main><!--end .main-bg -->
<script>
jQuery(document).ready(function() {
initHostsPage();
});
</script>
<?php
get_footer(); ?>
and the jquery function to show dropdown box:
function initHostsPage() {
$('.social').each(function(key, val){
$(this).children('li').children('a').tooltip();
});
//dropdown profile box
$('.card').click(function() {
var row = $(this).closest('.row');
var profileDetails = $('.profile-details');
profileDetails.removeClass('hidden');
row.append(profileDetails);
if((profileDetails).is(':hidden')) {
profileDetails.slideTogle('slow');
}
else{
profileDetails.hide();
}
});
$(".closeBox").click(function() {
$(this).parent().hide();
});
}

Ok apparently there were both php and javascript mistakes. In php you succesfully RETRIEVING all users, but only PRINTING the last one, you would need to cast the profile-details inside the loop, but you also need to differentiate each profile-detail so they dont all come out at the same time. And we need to differentiate cards. So to not broke any css I added profile-id class and data-id for the card
<section class="series">
<div class="container-fluid">
<?php //query for hosts/contributor users
$cq = new WP_User_Query(array('role'=>'contributor'));
// User Loop
if(!empty($cq->results))
{
//sort users into current and past by meta field//
$hosts = $cq->results;
$current_hosts = array();
foreach($hosts as $user)
{
$user->sort_num = get_field('order', "user_$user->ID");
if(tv_is_host_active($user->ID))
$current_hosts[] = $user;
else
$past_hosts[] = $user;
}
usort($current_hosts, 'tv_compare_hosts');
//display the current hosts
$row_counter = 0;
foreach ( $current_hosts as $user )
{
//add rows of four
if($row_counter++ % 4 == 0)
{
echo "<div class='row'\n>";
} ?>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a data-id="<?php echo $user->ID;?>" class="card card-cast" href="javascript:void(0)">
<div class="card-img-cast">
<?php if(get_field('profile_picture', "user_".$user->ID)): $image = get_field('profile_picture', "user_".$user->ID); ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php else: ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/thumbholder-medium.png" alt="winchester logo" />
<?php endif;?>
</div>
<div class="card-content">
<div class="card-title"><?php echo $user->data->display_name; ?></div>
</div>
</a>
</div>
<?php
//add rows of 4
if($row_counter % 4 == 0)
{
echo "</div><!-- end row-->\n";
}
} //end foreach of current hosts
//cap row if the last row was not full
if(!($row_counter % 4 == 0))
{
echo "</div><!-- end/cap row-->\n";
}
?>
<!-- cast profile dropdown -->
<div class="container-fluid profile-details profile-<?php echo $user->ID;?>hidden">
<i class="fa fa-times closeBox" aria-hidden="true"></i>
<h3 class="member-name"><?php echo $user->data->display_name; ?></h3>
<p class=".text-white"><?php echo tv_host_shows($user->ID); ?></p>
<p class="member-description"><?php echo get_user_meta($user->ID, 'description', true); ?></p>
<div class="row">
<div class="col-xs-12">
<ul class="list-inline social">
<?php if(get_field('facebook_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Like <?php echo $user->data->display_name; ?> On Facebook" href="<?php the_field('facebook_profile_link', "user_".$user->ID); ?>"><i class="fa fa-facebook"></i></a></li>
<?php endif;
if(get_field('twitter_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Follow <?php echo $user->data->display_name; ?> On Twitter" href="<?php the_field('twitter_profile_link', "user_".$user->ID); ?>"><i class="fa fa-twitter"></i></a></li>
<?php endif;
if(get_field('youtube_channel_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Watch <?php echo $user->data->display_name; ?> On Youtube" href="<?php the_field('youtube_channel_link', "user_".$user->ID); ?>"><i class="fa fa-youtube"></i></a></li>
<?php endif;
if(get_field('website', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="See the website of <?php echo $user->data->display_name; ?>" href="<?php the_field('website', "user_".$user->ID); ?>"><i class="fa fa-globe"></i></a></li>
<?php endif; ?>
</ul>
</div>
</div><!-- end social link row -->
</div><!-- end dropdown -->
</div><!--end container-->
<?php
} else { ?>
<div class="col-xs-12 col-sm-4 host">
<p>No hosts found.</p>
</div>
<div class="clearfix visible-xs"> </div>
<?php
}
?>
<?php endwhile;
endif; //end main loop ?>
</section>
</main><!--end .main-bg -->
<script>
jQuery(document).ready(function() {
initHostsPage();
});
</script>
<?php
get_footer(); ?>
Html set now lets see the javascript. It was selecting any card and retrieving the only profile. Now it will select any card, get its id and retrieve that id profile:
function initHostsPage() {
$('.social').each(function(key, val){
$(this).children('li').children('a').tooltip();
});
//dropdown profile box
$('.card').click(function() {
var row = $(this).closest('.row');
var id = $(this).data('id'); //We get the card
var profileDetails = $('.profile-' + id); //We get the exact profile
profileDetails.removeClass('hidden');
row.append(profileDetails);
if((profileDetails).is(':hidden')) {
profileDetails.slideTogle('slow');
}
else{
profileDetails.hide();
}
});
$(".closeBox").click(function() {
$(this).parent().hide();
});
}
Tell me how it goes!

HTML/PHP:
<section class="series">
<div class="container-fluid">
<?php //query for hosts/contributor users
$cq = new WP_User_Query(array('role'=>'contributor'));
// User Loop
if(!empty($cq->results))
{
//sort users into current and past by meta field//
$hosts = $cq->results;
$current_hosts = array();
foreach($hosts as $user)
{
$user->sort_num = get_field('order', "user_$user->ID");
if(tv_is_host_active($user->ID))
$current_hosts[] = $user;
else
$past_hosts[] = $user;
}
usort($current_hosts, 'tv_compare_hosts');
//display the current hosts
$row_counter = 0;
foreach ( $current_hosts as $user )
{
//add rows of four
if($row_counter++ % 4 == 0)
{
echo "<div class='row'\n>";
} ?>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a data-id="<?php echo $user->ID;?>" class="card-cast" href="javascript:void(0)">
<div class="card-img-cast">
<?php if(get_field('profile_picture', "user_".$user->ID)): $image = get_field('profile_picture', "user_".$user->ID); ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php else: ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/thumbholder-medium.png" alt="winchester logo" />
<?php endif;?>
</div>
<div class="card-content">
<div class="card-title"><?php echo $user->data->display_name; ?></div>
</div>
</a>
</div>
<!-- cast profile dropdown -->
<div class="profile-details profile-<?php echo $user->ID;?> hidden">
<i class="fa fa-times closeBox" aria-hidden="true"></i>
<h3 class="member-name"><?php echo $user->data->display_name; ?></h3>
<p class=".text-white"><?php echo tv_host_shows($user->ID); ?></p>
<p class="member-description"><?php echo get_user_meta($user->ID, 'description', true); ?></p>
<div class="row">
<div class="col-xs-12">
<ul class="list-inline social">
<?php if(get_field('facebook_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Like <?php echo $user->data->display_name; ?> On Facebook" href="<?php the_field('facebook_profile_link', "user_".$user->ID); ?>"><i class="fa fa-facebook"></i></a></li>
<?php endif;
if(get_field('twitter_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Follow <?php echo $user->data->display_name; ?> On Twitter" href="<?php the_field('twitter_profile_link', "user_".$user->ID); ?>"><i class="fa fa-twitter"></i></a></li>
<?php endif;
if(get_field('youtube_channel_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Watch <?php echo $user->data->display_name; ?> On Youtube" href="<?php the_field('youtube_channel_link', "user_".$user->ID); ?>"><i class="fa fa-youtube"></i></a></li>
<?php endif;
if(get_field('website', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="See the website of <?php echo $user->data->display_name; ?>" href="<?php the_field('website', "user_".$user->ID); ?>"><i class="fa fa-globe"></i></a></li>
<?php endif; ?>
</ul>
</div>
</div><!-- end social link row -->
</div><!-- end dropdown -->
<?php
//add rows of 4
if($row_counter % 4 == 0)
{
echo "</div><!-- end row-->\n";
}
} //end foreach of current hosts?>
</div><!-- end Container -->
<?php
} else { ?>
<div class="col-xs-12 col-sm-4 host">
<p>No hosts found.</p>
</div>
<div class="clearfix visible-xs"> </div>
<?php
}
?>
<?php endwhile;
endif; //end main loop ?>
</section>
</main><!--end .main-bg -->
<script>
jQuery(document).ready(function() {
initHostsPage();
});
</script>
<?php
get_footer(); ?>
and the Javascript:
function initHostsPage() {
$('.social').each(function(key, val){
$(this).children('li').children('a').tooltip();
});
//dropdown profile box
$('.card-cast').click(function() {
var row = $(this).closest('.row');
var id = $(this).data('id'); //get the card
var profileDetails = $('.profile-' + id); //get the exact profile
profileDetails.removeClass('hidden');
row.append(profileDetails);
if((profileDetails).is(':hidden')) {
profileDetails.slideToggle('slow');
}
else{
profileDetails.hide();
}
});
$(".closeBox").click(function() {
$(this).parent().hide();
});
}

How to hide DIV using class when field is Empty?

I have a PHP While statement on my page. I would like to hide DIV with the class name "coupon" for each record that has empty field $rows['deal'];. This is what my code currently looks like. How can I alter to accomplish this. Thank You much!!!
<?php while ($rows = mysql_fetch_array($query)) { ?> <!-- QUERY FOR PAGE 1 RECORDS -->
<div id="main">
<div id="client_name"><?php echo $rows['client_name']; ?></div>
<div id="phone"><?php echo $rows['phone']; ?></div>
<div id="client_square"></div>
<div id="client_rectangle"></div>
<img id="client_img" src="<?php echo $rows['client_img']; ?>">
<a id="edit" href="update_edit.php?id=<?php echo $rows['id']; ?>"><img id="edit_img" src="images/edit_record.png"></a>
<span class="coupon" id="cash_img"></span><span class="coupon" id="deal_text"><?php echo $rows['deal']; ?></span>
</div>
<?php } ?>

You can do this on this way:
<?php if($rows['deal']){ ?>
<span class="coupon" id="cash_img"></span><span class="coupon" id="deal_text"><?php echo $rows['deal']; ?></span>
<?php } ?>
Full code
<?php while ($rows = mysql_fetch_array($query)) { ?> <!-- QUERY FOR PAGE 1 RECORDS -->
<div id="main">
<div id="client_name"><?php echo $rows['client_name']; ?></div>
<div id="phone"><?php echo $rows['phone']; ?></div>
<div id="client_square"></div>
<div id="client_rectangle"></div>
<img id="client_img" src="<?php echo $rows['client_img']; ?>">
<a id="edit" href="update_edit.php?id=<?php echo $rows['id']; ?>"><img id="edit_img" src="images/edit_record.png"></a>
<?php if($rows['deal']){ ?>
<span class="coupon" id="cash_img"></span><span class="coupon" id="deal_text"><?php echo $rows['deal']; ?></span>
<?php } ?>
</div>
<?php } ?>

Try below code:
<?php while ($rows = mysql_fetch_array($query)) { ?>
<!-- QUERY FOR PAGE 1 RECORDS -->
<div id="main">
<div id="client_name"><?php echo $rows['client_name']; ?></div>
<div id="phone"><?php echo $rows['phone']; ?></div>
<div id="client_square"></div>
<div id="client_rectangle"></div>
<img id="client_img" src="<?php echo $rows['client_img']; ?>">
<a id="edit" href="update_edit.php?id=<?php echo $rows['id']; ?>"><img id="edit_img" src="images/edit_record.png"></a>
<?php if($rows['deal']){ ?>
<span class="coupon" id="cash_img"></span><span class="coupon" id="deal_text"><?php echo $rows['deal']; ?></span>
<?php } ?>
</div>
<?php } ?>

You do not need javascript for this, add this line:
<?php echo ($rows['deal']==""?"style='display:none;'":"") ?>
Complete code:
<?php while ($rows = mysql_fetch_array($query)) { ?> <!-- QUERY FOR PAGE 1 RECORDS -->
<div id="main">
<div id="client_name"><?php echo $rows['client_name']; ?></div>
<div id="phone"><?php echo $rows['phone']; ?></div>
<div id="client_square"></div>
<div id="client_rectangle"></div>
<img id="client_img" src="<?php echo $rows['client_img']; ?>">
<a id="edit" href="update_edit.php?id=<?php echo $rows['id']; ?>"><img id="edit_img" src="images/edit_record.png"></a>
<span class="coupon" <?php echo ($rows['deal']==""?"style='display:none;'":"") ?> id="cash_img"></span><span class="coupon" id="deal_text"><?php echo $rows['deal']; ?></span>
</div>
<?php } ?>

with PHP:
You can just count if row has a data so echo it:
this is row with data:
<?php
$row = 'you can add get rows from database';
if (count($row)) {
?>
<div style="color: red">
<?php echo $row; // here you can add your row (foreach) ?>
</div>
<?php } ?>
this is row with out data
<?php
$row = '';
if (count($row)) {
?>
<div style="color: red">
<?php echo $row; // here you can add your row (foreach) ?>
</div>
<?php } ?>

If the field is empty, it will have a length of 0. So you can use that logic in order to hide the 'coupon' class
<?php while ($rows = mysql_fetch_array($query)) { ?> <!-- QUERY FOR PAGE 1 RECORDS -->
<div id="main">
<div id="client_name"><?php echo $rows['client_name']; ?></div>
<div id="phone"><?php echo $rows['phone']; ?></div>
<div id="client_square"></div>
<div id="client_rectangle"></div>
<img id="client_img" src="<?php echo $rows['client_img']; ?>">
<a id="edit" href="update_edit.php?id=<?php echo $rows['id']; ?>"><img id="edit_img" src="images/edit_record.png"></a>
<!-- My code -->
<?php
if(strlen($rows['deal'] > 0)
{
?>
<span class="coupon" id="cash_img"></span><span class="coupon" id="deal_text"><?php echo $rows['deal']; ?></span>
<?php
}
?>
<!-- End of my code -->
</div>
<?php } ?>

We can use something like this .
<?php if($fildvalue != ''){ ?>
<div><?php echo $fildvalue; ?> </div>
<?php } ?>
so div will be created only when their is an value

Check the data row and put all the HTML tags which you want to hide in case if it is empty or not set.
<?php if(isset($rows['deal']) && !empty($rows['deal'])){ ?>
<span class="coupon" id="deal_text"><?php echo $rows['deal']; ?></span>
<?php } ?>
In PHP, empty() function is able to check NULL value, empty string and zero in return.

load more posts in Wordpress with Ajax

this is my loop of posts:
<?php query_posts($query_string . '&showposts=8'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="large-4 columns">
<section class="post-home">
<section class="the_category">
<?php
$categories = get_the_category();
$separator = ' ';
$output = '';
if($categories){
foreach($categories as $category) {
$output .= '<span class="'.$category->cat_name.'">'.$category->cat_name.'</span>'.$separator;
}
echo trim($output, $separator);
}
?>
</section>
<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
<figure class="thumb-post" style="background: url('<?php echo $url; ?>') center center no-repeat;" ></figure>
<section class="post-home-content">
<h2><?php the_title(); ?></h2>
<p><?php the_field('sub_titulo'); ?></p>
<span class="link">Compartilhe</span>
<time class="post-time" datetime="<?php the_time('d-m-Y'); ?> <?php the_time('G:i'); ?>"><?php the_time('d/m/Y'); ?></time>
</section>
<ul class="social">
<li><img src="<?php bloginfo('template_url'); ?>/img/in.png" alt="" width="24" /></li>
<li><img src="<?php bloginfo('template_url'); ?>/img/gp.png" alt="" width="24" /></li>
<li><img src="<?php bloginfo('template_url'); ?>/img/fb.png" alt="" width="24" /></li>
<li><img src="<?php bloginfo('template_url'); ?>/img/tw.png" alt="" width="24" /></li>
</ul>
</section>
</div>
<?php endwhile; else: ?>
<p><?php _e("Nenhum chocolate encontrado! :(", ''); ?></p>
<?php endif; ?>
at below, i have this:
<div id="load-posts">
Load more posts
</div>
my question is: how i can load 6 more posts with ajax just clicking at the link "load more posts".
i've tried a lot of plugins, but, unsuccessful. :/
i want to do just like that: http://designerthemes.com/preview/?theme=adapt

try pbd-ajax-load-posts plugin.
And some fixes that I posted here to this plugin.
My code of "load more posts" on wordpress misses some pages. What's wrong with it?

Jquery : Why is the first image repeated twice in lightbox

I'm new to Jquery and PHP. With the below code, I see the first image gets repeated twice, while the rest of the images are displayed properly.
<div class="image-zoom" rel="lightbox" id="gallery">
<div id="album1" style="margin-right:18px;" rel="lightbox">
<?php
if (isset($albums[0])) {
$i = 1;
foreach ($albums[0]['photos'] as $photo) {
if ($i == 1) {
?>
<a href="<?= $photo ?>" rel="lightbox">
<img src="<?= $photo ?>" width="214" height="160" />
</a>
<div class="zoom-magnifier" id="gallery">
<a href="<?= $photo ?>" rel="lightbox">
<img src="<?php echo Yii::app()->theme->baseUrl; ?>/images/zoom-icon.png" id="zoom"/>
</a>
<div id="more-text" align="left" ><?=$albums[0]['title']?></div>
</div>
<?php
} else {
?>
<?php
}
$i++;
}
}
?>
</div>
<div id="album2" rel="lightbox">
<?php
foreach (array(1, 0) as $album_id) {
if (isset($albums[$album_id])) {
$i = 1;
foreach ($albums[$album_id]['photos'] as $photo) {
if ($i == 1) {
?>
<a href="<?= $photo ?>" rel="lightbox">
<img src="<?= $photo ?>" width="214" height="160" />
</a>
<div class="zoom-magnifier">
<a href="<?= $photo ?>" rel="lightbox">
<img src="<?php echo Yii::app()->theme->baseUrl; ?>/images/zoom-icon.png" id="zoom1"/>
</a>
<div id="more-text2" class="more-txt-link"><?=$albums[$album_id]['title']?></div>
</div>
<?php
} else {
?>
<?php
}
$i++;
}
break;
}
}
?>
</div>
</div>
Below is the code of lightbox script.
<script type="text/javascript" src="<?php echo Yii::app()->theme->baseUrl; ?>/js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->theme->baseUrl; ?>/css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
$(function() {
$('#album1 a').lightBox();
$('#album2 a').lightBox();
});
</script>
So if there are 5 images to be displayed, with the above code I get 6 images displayed with the first image repeated twice.
How can I avoid this