Match incremented class with incremented ids from

Question

After hours of research and try and errors I start my first question here. If it can be done with wordpress syntax even better. Otherwise I think I'm near to the solution.

I want a custom gallery on a wordpress template page but with the post image from certain categories with the content from it. So far so good.

In my designerin.php template I give every images a class img-x.

class="img-<?php echo $img_counter; ?>

And the content get the id img-x

id="img-<?php echo $post_counter; ?>

The counter is just an increment. So image 1 has class img-1, image 2 img-2 and so on. Now I want the related content of that image created in the wordpress editor showing up when you are clicking on this specific image.

Say you click on image 5 and want the content from image 5. I'm stucked on the step where I say (in jQuery), that display the content

    if .img-x == #img-x {
       display the_content()
    }

Enough said - here is my jQuery code:

    $(".large-img-wrapper").hide();

$('.gallery li').on('click', function(e) {
    e.preventDefault();
    var largeImgLink = $(this).find('a').attr('href');
    $(".large-img-wrapper").first().fadeIn();
    var imgContent = $('#img-5').html();

    $('#large-img').remove();
    $('#append-id').remove();
    $(".large-img").append('<img id="large-img" src="' + largeImgLink + '">').fadeIn();
    $(".large-img").append('<div id="append-id">' + imgContent + '</div>').fadeIn();
    $(".large-img-container .img-title").remove();
});

The var imgContent was just a test. Every image shows up the content from image 5 at the moment. My template page code:

<div class="row content full-width">

<div class="cats row">
<a href="#" class="sort-link" data-category="Alle Kategorien">Alle Kategorien</a>
<?php query_posts( 'category_name=designerin&posts_per_page=-1'); if (have_posts()) : while (have_posts()) : the_post();

$categories = get_the_category();
$separator = ' ';
$output = '';
if($categories){
foreach($categories as $category) {
$output .= $category->cat_name;
}
}
$cat_name = get_category(get_query_var('cat'))->name;
?>
<a href="#" class="sort-link" data-category="<?php echo trim($output); ?>"><?php echo trim($output); ?></a>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</div>

<ul class="row small-block-grid-3 medium-block-grid-5 large-block-grid-8 gallery">
<?php $img_counter = 0; ?>
<?php query_posts( 'category_name=designerin&posts_per_page=-1'); if (have_posts()) : while (have_posts()) : the_post();
$img_counter++;
$thumb_id = get_post_thumbnail_id();
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'thumbnail', true);
$large_url_array = wp_get_attachment_image_src($thumb_id, 'large', true);
$thumb_url = $thumb_url_array[0];
$large_url = $large_url_array[0];
$categories = get_the_category();
$separator = ' ';
$output = '';
if($categories){
foreach($categories as $category) {
$output .= $category->cat_name;
}
}
?>
<li>
**<a href="<?php echo $large_url; ?>" class="thumbnail img-<?php echo $img_counter; ?>" data-categories="<?php echo trim($output); ?>"><img src="<?php echo $thumb_url; ?>" alt="<?php echo the_title(); ?>"></a>**
</li>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</ul>

<?php $post_counter = 0; ?>
<?php query_posts( 'category_name=designerin&posts_per_page=-1'); if (have_posts()) : while (have_posts()) : the_post();
$post_counter++;
?>
**<ul class="large-img-wrapper">
<li>
<div class="large-img-container">
<div class="large-img"></div>
<div class="img-content" id="img-<?php echo $post_counter; ?>">
<div class="img-title">
<?php echo the_title(); ?>
</div>
<div class="img-text">
<?php echo the_content(); ?>
</div>
</div>
</div>
</li>
</ul>**  
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?> 

</div>

The first query is for filtering the categories by slug.

My last attempt feels so near..

        var inc = '5';
    var objClass = $(this).find("a").hasClass( "img-" + inc );

    console.log(objClass);

When I'm clicking on the 5th image I get "true". But how can I get the X (inc) related to my template php code?

Sorry for my english and possible bad code

Answer 1

If i'm understanding correctly this might help

$('.gallery li').on('click', function(e) {
   e.preventDefault();
   var className = $(this).find('a').attr('class');
   var imgContent = $('#'+className).html();
});