How to get current item in wordpress loop under loop? - php

Question

I am creating a portfolio section.the live site is here, http://www.nayeemriddhi.info/testproject/portfolio/. There need three loop for showing item. But fact is that, when i open portfolio item, the right sidebar item showing item from the beginning, as i created the loop. but i want to show right sidebar item as a current item for the portfolio images. is there any idea for showing right sidebar item as a current item.
the code is below,
<?php
/*
Template Name: Portfolio
*/
get_header(); ?>
<!-- Banner -->
<section class="page-banner" >
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="page-title ">Portfolios</h1>
<span class="page-tag-line">See our recent works</span>
</div>
</div>
</div>
</section>
<div class="wave-divider-pages"></div>
<section>
<div class="container gal-container">
<?php
$args = array(
'post_type' => 'custom_portfolio',
'posts_per_page' => '-1',
);
// the query
$query = new WP_Query( $args );
// The Loop
if ( $query->have_posts() ) ?>
<?php while ( $query->have_posts() ) : $query->the_post() ; ?>
<?php $globalID = get_the_id(); ?>
<!-- Item-->
<div class="col-md-4 col-sm-6 co-xs-12 gal-item">
<div class="box">
<a class="trigger" data-iziModal-open="#modal<?php the_ID(); ?>">
<img src="<?php echo get_post_meta(get_the_ID(), 'portfolio_image', true); ?>">
</a>
</div>
</div>
<!-- Modal-->
<div id="modal<?php the_ID(); ?>" class="iziModal portfolio" data-izimodal-title="Portfolio Title" data-izimodal-subtitle="Web Design" style="max-width: 1200px important;">
<div class="col_one_third p-20">
<?php
$args2 = array(
'post_type' => 'custom_portfolio',
'posts_per_page' => '6',
);
// the query
$query2 = new WP_Query( $args2 );
// The Loop
if ( $query2->have_posts() ) ?>
<?php while ( $query2->have_posts() ) :
$query2->the_post() ; ?>
<div class="col_half p-10">
<a href="#<?php the_ID(); ?>-<?= $globalID; ?>" data-toggle="tab">
<img src="<?php echo get_post_meta(get_the_ID(), 'portfolio_image', true); ?>" class="portfolio-thumb"/>
</a>
</div>
<?php endwhile; wp_reset_query(); ?>
<div class="col_full p-10">
<div class="portfolio-links">
Launch Website
Request a Quote
</div>
</div>
</div>
<div class="col_two_third col_last">
<div class="tab-content ">
<?php
$args3 = array(
'post_type' => 'custom_portfolio',
'posts_per_page' => '-1',
);
// the query
$query3 = new WP_Query( $args3 );
// The Loop
if ( $query3->have_posts() ) ?>
<?php while ( $query3->have_posts() ) :
$query3->the_post() ; ?>
<div class="tab-pane active" id="<?php the_ID(); ?>-<?= $globalID; ?>">
<img src="<?php echo get_post_meta($globalID, 'portfolio_image', true); ?>" class="img-responsive"/>
</div>
<?php endwhile; wp_reset_query(); ?>
</div>
</div>
</div>
<!-- Item End-->
<?php endwhile; wp_reset_query(); ?>
</div>
</section>
<section>
</section>
<div class="wave-divider-common"></div>
<?php get_footer(); ?>
Thanks for help...

Answer 1

Modify your html for first anchor tag as
<a class="trigger" data-iziModal-open="#modal<?php the_ID(); ?>" data-id="<?php the_ID(); ?>-<?= $globalID; ?>">
<img src="<?php echo get_post_meta(get_the_ID(), 'portfolio_image', true); ?>">
</a>
Add this JS
<script type="text/javascript">
$(document).ready(function(){
$('a.trigger').on('click', function (e) {
var getDataId = $(this).data('id');
$('.iziModal a[href="#' + getDataId + '"]').tab('show');
});
});
</script>