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; ?>

getElementById not working on IE 11: HTML5 <article> element

I'm currently building out a new website, and naturally, Internet Explorer is giving me trouble. I have some Javascript that's intended to reveal an element with an onclick.
It works exactly as intended on other browsers, but testing on IE 11 has lead me into one headache after another.
Internet Explorer is driving me nuts while I figure this out. A live example for the page effected is here: http://beerworld.sandbox.nikijones.com/whats-on-tap/
The elements effected by the bug are generated here:
<? foreach($beer_array as $beer){
$post = $beer['beer'];
setup_postdata( $post );
$post_slug=$post->post_name; ?>
<article id="board-<? echo $post_slug; ?>" class="tap-board" >
<span class="tap-board-head">
<? $logo = get_field('logo');?><img class="board-logo" src="<? echo $logo['url']; ?>" alt="<? echo $logo['alt']; ?>" /><h1><? the_title(); ?></h1>
</span>
<div class="row stats">
<? $brewery = get_field('brewery'); if(!empty($brewery)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
<h3>Brewery: </h3><? echo $brewery; ?>
</div> <? } ?>
<? $style = get_field('style'); if(!empty($style)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
<h3>Style: </h3><? echo $style; ?>
</div> <? } ?>
<? $color = get_field('SRM'); if(!empty($color)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
<h3>Color Rating: </h3><? echo $color; ?>
</div> <? } ?>
<? $location = get_field('location'); if(!empty($location)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
<h3>Location: </h3><? echo $location; ?>
</div> <? } ?>
<? $ABV = get_field('ABV'); if(!empty($ABV)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
<h3>ABV: </h3><? echo $ABV . "%" ; ?>
</div> <? } ?>
<? $IBU = get_field('IBU'); if(!empty($IBU)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
<h3>Hop: </h3><? echo $IBU; ?>
</div> <? } ?>
</div>
<div class="row">
<? $desc = get_field('description'); if(!empty($desc)){ ?> <div class="col">
<h3>Description: </h3><p><? echo $desc ?></p>
</div> <? } ?>
<? $taste = get_field('tasting_notes'); if(!empty($taste)){ ?> <div class="col">
<h3>Tasting Notes: </h3><p><? echo $taste ; ?></p>
</div> <? } ?>
<? $food = get_field('food'); if(!empty($food)){ ?> <div class="col">
<h3>Food Pairing: </h3><p><? echo $food; ?></p>
</div> <? } ?>
</div>
</article>
<? } ?>
And the script that only partially executes is here:
<script>
function boardswap(slug){
/* This function is for changing active taps, continued from the tap() function */
var board_ID = "board-".concat(slug);
var tap_ID = "tap-".concat(slug);
/* Chalk Board Section */
var activeBoard = document.getElementById(board_ID);
activeBoard.style.height = 'initial';
activeBoard.style.overflow = 'unset';
activeBoard.style.opacity = '1';
/*Display*/
document.getElementById('tap-beer-display').style.height = '800px';
document.getElementById('tap-beer-display').style.minHeight = 'fit-content';
document.getElementById('tap-beer-display').classList.remove("rotated");
}
function tap(slug){
var board_ID = "board-".concat(slug);
var tap_ID = "tap-".concat(slug);
/* Chalk Board Section */
document.getElementById('tap-beer-display').classList.add("rotated");
var boards = document.getElementsByClassName('tap-board');
for (var i = 0; i < boards.length; i++){
boards[i].style.height = '0';
boards[i].style.overflow = 'hidden';
boards[i].style.opacity = '0';
}
/* Taps Section */
var taps = document.getElementsByClassName('tap');
for (var i = 0; i < boards.length; i++){
taps[i].style.backgroundImage = 'url(<? echo get_template_directory_uri(); ?>/img/tap.png)';
}
var activeTap = document.getElementById(tap_ID);
activeTap.style.backgroundImage = 'url(<? echo get_template_directory_uri(); ?>/img/tap-active.png)';
/* Pause before continuing */
setTimeout(function(){ boardswap(slug); }, 1000);
}
</script>
All lines seem to trigger propperly with exception of the fact that on internet explorer, the article remains hidden by a height of zero.
These are the 3 PHP Files for the page to be absolutely thorough:
HEADER.PHP
<!DOCTYPE html>
<html lang="en">
<head>
<title><? the_title(); ?> - Beer World</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="<? echo get_template_directory_uri(); ?>/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="<? echo get_template_directory_uri(); ?>/css/fontawesome-all.min.css">
<link rel="stylesheet" type="text/css" href="<? echo get_template_directory_uri(); ?>/style.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- WP Head Includes -->
<?php wp_head(); ?>
<!-- Fancy Box Image Lightbox -->
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>
<!-- Google Analytics Code -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-118283566-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-118283566-1');
</script>
<!-- Facebook Pixel Code -->
<!-- No code yet -->
</head>
<body id="body" <? body_class(); ?> onscroll="scrollHead();">
<!-- jQuery -->
<script src="<? echo get_template_directory_uri(); ?>/js/jquery-3.3.1.min.js"></script>
<!-- Bootstrap -->
<script src="<? echo get_template_directory_uri(); ?>/js/bootstrap.min.js"></script>
<video id="bgVideo" preload autoplay muted loop >
<source src="/wp-content/uploads/053119795-beer-bubbles-and-foam-slow-mot_H264_420-1.mov">
<source src="/wp-content/uploads/Beer-Bubbles-and-Foam-Slow-Motion.ogg" />
<source src="/wp-content/uploads/Beer-Bubbles-and-Foam-Slow-Motion.mp4" />
</video>
<div id="site-wrap">
<div id="bg-gradient">
<!-- Background Orange Gradient -->
</div>
<div class="container">
<header id="header">
<div id="social">
<a href="https://www.facebook.com/beerworldnewwindsor/" ><img src="<? echo get_template_directory_uri(); ?>/img/social-fb.png" alt="Facebook" /></a>
<a href="https://twitter.com/beerworldstore2" ><img src="<? echo get_template_directory_uri(); ?>/img/social-twitter.png" alt="Twitter" /></a>
<a href="#" ><img src="<? echo get_template_directory_uri(); ?>/img/social-li.png" alt="Linkedin" /></a>
</div>
<nav class="navbar navbar-expand-lg">
<!-- Button Created from Codepen By Collin Smith: https://codepen.io/collinscode/full/JLXJZY -->
<button class="navbar-toggler back" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" onclick="hamburger();">
<span class="navbar-toggler-icon">
<div class="btn1 btn">
<div class="bar-container">
<div class="bar1 bar"></div>
<div class="bar2 bar"></div>
<div class="bar3 bar"></div>
</div>
</div>
</span>
</button>
<? $headArgs = array('menu' => 'Header Menu' ,
'menu_class' => 'navbar-nav nav-fill' ,
'menu_id' => '' ,
'container' => 'div' ,
'container_class' => '' ,
'container_id' => 'HeaderMenu' ,
'before' => '' ,
'after' => '' ,
'link_before' => '' ,
'theme_location' => 'Header Menu',
'link_after' => '');
wp_nav_menu($headArgs); ?>
</nav>
<img src="<? echo get_template_directory_uri(); ?>/img/logo.svg" alt="Beer World Logo" id="navLogo" />
<?/* * * NIVO SLIDER REPLACED BY REVOLUTION SLIDER ON JUNE 6, 2018 * * /
<!-- Nivo Slider -->
<? if(get_field('header_slider')){ ?>
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<? $images = get_field('header_slideshow'); ?>
<? foreach( $images as $image ): ?>
<img src="<? echo $image['sizes']['large']; ?>" data-thumb="<? echo $image['sizes']['thumbnail']; ?>" alt="<? echo $image['alt']; ?>" class="nivo-img" />
<? endforeach; ?>
</div>
</div>
</header>
*/ ?>
<!-- Revolution Slider -->
<? $term = get_queried_object(); ?>
<? if(get_field('header_slider', $term)){
$slides = strval(get_field('header_slideshow', $term));
echo do_shortcode($slides);
}else{ ?>
<div id="spacer"><!-- No Active Slider For This Page --></div>
<? } ?>
PAGE TEMPLATE:
<?php
/**
* Template Name: What's On Tap
*
* #package WordPress
* #subpackage Beerworld
* #since Beerworld 2.0
*/
?>
<? get_header(); ?>
</header>
<script>
function boardswap(slug){
/* This function is for changing active taps, continued from the tap() function */
var board_ID = "board-".concat(slug);
var tap_ID = "tap-".concat(slug);
/* Chalk Board Section */
var activeBoard = document.getElementById(board_ID);
activeBoard.style.height = 'initial';
activeBoard.style.overflow = 'unset';
activeBoard.style.opacity = '1';
/*Display*/
document.getElementById('tap-beer-display').style.height = '800px';
document.getElementById('tap-beer-display').style.minHeight = 'fit-content';
document.getElementById('tap-beer-display').classList.remove("rotated");
}
function tap(slug){
var board_ID = "board-".concat(slug);
var tap_ID = "tap-".concat(slug);
/* Chalk Board Section */
document.getElementById('tap-beer-display').classList.add("rotated");
var boards = document.getElementsByClassName('tap-board');
for (var i = 0; i < boards.length; i++){
boards[i].style.height = '0';
boards[i].style.overflow = 'hidden';
boards[i].style.opacity = '0';
}
/* Taps Section */
var taps = document.getElementsByClassName('tap');
for (var i = 0; i < boards.length; i++){
taps[i].style.backgroundImage = 'url(<? echo get_template_directory_uri(); ?>/img/tap.png)';
}
var activeTap = document.getElementById(tap_ID);
activeTap.style.backgroundImage = 'url(<? echo get_template_directory_uri(); ?>/img/tap-active.png)';
/* Pause before continuing */
setTimeout(function(){ boardswap(slug); }, 1000);
}
</script>
<main id="content-area"><?
if (have_posts()){
while (have_posts()){
the_post();
$beer_array = get_field('beers');
/* Beer Display Area */ ?>
<div id="tap-beer-display" class="container" >
<div class="row">
<h2>
TRY ONE OF OUR 24 FRESH, DRAFT BEERS
</h2>
</div>
<? foreach($beer_array as $beer){
$post = $beer['beer'];
setup_postdata( $post );
$post_slug=$post->post_name; ?>
<article id="board-<? echo $post_slug; ?>" class="tap-board" >
<span class="tap-board-head">
<? $logo = get_field('logo');?><img class="board-logo" src="<? echo $logo['url']; ?>" alt="<? echo $logo['alt']; ?>" /><h1><? the_title(); ?></h1>
</span>
<div class="row stats">
<? $brewery = get_field('brewery'); if(!empty($brewery)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
<h3>Brewery: </h3><? echo $brewery; ?>
</div> <? } ?>
<? $style = get_field('style'); if(!empty($style)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
<h3>Style: </h3><? echo $style; ?>
</div> <? } ?>
<? $color = get_field('SRM'); if(!empty($color)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
<h3>Color Rating: </h3><? echo $color; ?>
</div> <? } ?>
<? $location = get_field('location'); if(!empty($location)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
<h3>Location: </h3><? echo $location; ?>
</div> <? } ?>
<? $ABV = get_field('ABV'); if(!empty($ABV)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
<h3>ABV: </h3><? echo $ABV . "%" ; ?>
</div> <? } ?>
<? $IBU = get_field('IBU'); if(!empty($IBU)){ ?> <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 stat">
<h3>Hop: </h3><? echo $IBU; ?>
</div> <? } ?>
</div>
<div class="row">
<? $desc = get_field('description'); if(!empty($desc)){ ?> <div class="col">
<h3>Description: </h3><p><? echo $desc ?></p>
</div> <? } ?>
<? $taste = get_field('tasting_notes'); if(!empty($taste)){ ?> <div class="col">
<h3>Tasting Notes: </h3><p><? echo $taste ; ?></p>
</div> <? } ?>
<? $food = get_field('food'); if(!empty($food)){ ?> <div class="col">
<h3>Food Pairing: </h3><p><? echo $food; ?></p>
</div> <? } ?>
</div>
</article>
<? }
wp_reset_postdata(); ?>
</div>
<div id="tap-click" >
<h2>
CLICK ON ANY TAP BELOW
</h2>
<div class="row" >
<? foreach($beer_array as $beer){
$post = $beer['beer'];
setup_postdata( $post );
$post_slug=$post->post_name;?>
<div class="tap" onclick="tap('<? echo $post_slug; ?>')" id="tap-<? echo $post_slug; ?>" >
<? $logo = get_field('logo'); ?><img class="tap-logo" src="<? echo $logo['url']; ?>" alt="<? echo $logo['alt']; ?>" />
</div>
<? }
wp_reset_postdata(); ?>
</div>
</div>
<div id="tap-blurb" >
<? the_content(); ?>
</div>
<? }
}
?></main>
<? get_footer(); ?>
FOOTER.PHP
</div>
<div id="foot">
<img src="<? echo get_template_directory_uri(); ?>/img/left-wheat.png" alt="bottom left wheat decoration" class="wheat left" />
<footer class="container">
<nav class='col-12'>
<?
$footArgs = array(
'menu' => 'Footer' ,
'menu_class' => 'navbar-nav' ,
'menu_id' => 'foot-menu' ,
'container' => 'div' ,
'container_class' => '' ,
'container_id' => 'footerMenu' ,
'before' => '' ,
'after' => '' ,
'link_before' => '' ,
'link_after' => '',
'theme_location' => 'Footer Menu');
wp_nav_menu($footArgs);
?>
</nav>
<div class="row" id="foot-info">
<div class='col-12 col-sm-12 col-md-12 col-lg-6'>
<img id="foot-logo" src="<? echo get_template_directory_uri(); ?>/img/logo.png" alt="Beer World Logo" style="width: 160px; max-width: 160px; min-width: 160px;" />
<span style="display:block;"><span style="font-size:22pt;" >BEER WORLD</span> 323 Windsor Highway • New Windsor, New York</span>
<span><a style="color: white;" href="tel:8455612244">845.561.2244</a> | <a style="color: white;" href="mailto:Info#beerworld.com">Info#beerworld.com</a></span>
</div>
<div class='col-12 col-sm-12 col-md-12 col-lg-6'>
<p style="text-align:right;">© 2018 BEER WORLD <br />WEBSITE DESIGN BY THE NIKI JONES AGENCY, INC. </p>
</div>
</div>
</footer>
<img src="<? echo get_template_directory_uri(); ?>/img/right-wheat.png" alt="bottom right wheat decoration" class="wheat right" />
</div>
</div>
<?php wp_footer(); ?>
<script type="text/javascript" src="<? echo get_template_directory_uri(); ?>/js/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).on('load', function() {
$('#slider').nivoSlider();
});
//Navbar Hamburger Script
function hamburger(){
var toggler = $('#header').find('.navbar-toggler');
if (toggler.hasClass('active')) {
toggler.removeClass('active');
toggler.addClass('back');
}else{
toggler.removeClass('back');
toggler.addClass('active');
}
}
var $document = $('#body'),
$element = $('#header'),
className = 'hasScrolled';
$document.scroll(function() {
if ($document.scrollTop() >= 20) {
// user scrolled 20 pixels or more;
$element.addClass(className);
} else {
$element.removeClass(className);
}
});
</script>
<script src="<? echo get_template_directory_uri(); ?>/js/ada.js"></script>

Probably you forgot to add <!DOCTYPE html> at the begining of the page, so IE switches to 5.5 emulation, makes tag self-closing and you get an empty element.

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();
});
}

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 images slide show does not start from beginning

I'm new to Jquery and Javascript. I have used the below code to display the images in a lightbox
<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>
Below is the PHP code to display the images using the above script.
<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>
<?php
} else {
?>
<?php
}
$i++;
}
?>
<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
}
?>
</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>
<?php
} else {
?>
<?php
}
$i++;
}
?>
<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
break;
}
}
?>
</div>
</div>
This generates a magnifier image inside an image.
When I click on the image, lightbox slides the images from 1 to 6. But when I click on the magnifier(zoom-icon.png). the lightbox starts sliding from last but one image. How to make it start from image 1.

Try
<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>