I am trying to create a page in my WordPress theme where the posts are displayed in CSS grid. When a grid square is clicked the featured image for the clicked post will appear in a modal window. I have managed to get the modal window working but it displays the featured image of the most recent post regardless which post is selected. I tried assigning a unique id to image div using get_post_id but I can't work out how to pass this to the JavaScript's getElementById? (if that is in fact the correct way to solve this?)

I'm a newbie coder and not so familiar with JavaScript - any help would be hugely appreciated.

Here's my code:

<?php
/**
* Template Name: Home Page
*/


get_header(); ?>
<div class="grid-container">

<?php
$args = array(
'post_type' => 'artists',
);

$the_query = new WP_Query( $args );

if ( $the_query->have_posts() ) :
   while ( $the_query->have_posts() ) :
       $the_query->the_post();
       ?>
       <?php $postId = get_the_ID(); ?>
      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <div id="popup">
         <img class= "featured-img" id="myImg" src="wp-content/themes/dollarartclub/images/women.png" alt="Snow" style="width:100%;max-width:300px">
        </div><!-- modal -->
        <div id="mymodal" class="modal">
          <span class="close">&times;</span>
            <img class="modal-content" id="img01-<?php echo $postId?>" src="<?php the_post_thumbnail_url($postId); ?>"/>
        </div>
      </article>
       <?php
   endwhile;
endif;
wp_reset_query(); ?>

</div>

jQuery(document).ready(function($)
{
  var articles = document.querySelectorAll("article");
for (var i = 0; i < articles.length; i++) {
    var article = articles[i];
    var modal = article.querySelector(".modal");
    var button = article.querySelector(".featured-img");
    var closeButton = article.querySelector(".close");

    // if there is no modal, ignore this article
    if (!modal) continue;

    button.onclick = function() {
        modal.style.display = "block";
    }
    closeButton.onclick = function() {
        modal.style.display = "none";
    }

    // add event listener instead so it can be added multiple times
    window.addEventListener("click", function(event) {
        if (event.target === modal) {
            modal.style.display = "none";
        }
    });
}
});

I am trying to create a page in my WordPress theme where the posts are displayed in CSS grid. When a grid square is clicked the featured image for the clicked post will appear in a modal window. I have managed to get the modal window working but it displays the featured image of the most recent post regardless which post is selected. I tried assigning a unique id to image div using get_post_id but I can't work out how to pass this to the JavaScript's getElementById? (if that is in fact the correct way to solve this?)

I'm a newbie coder and not so familiar with JavaScript - any help would be hugely appreciated.

Here's my code:

<?php
/**
* Template Name: Home Page
*/


get_header(); ?>
<div class="grid-container">

<?php
$args = array(
'post_type' => 'artists',
);

$the_query = new WP_Query( $args );

if ( $the_query->have_posts() ) :
   while ( $the_query->have_posts() ) :
       $the_query->the_post();
       ?>
       <?php $postId = get_the_ID(); ?>
      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <div id="popup">
         <img class= "featured-img" id="myImg" src="wp-content/themes/dollarartclub/images/women.png" alt="Snow" style="width:100%;max-width:300px">
        </div><!-- modal -->
        <div id="mymodal" class="modal">
          <span class="close">&times;</span>
            <img class="modal-content" id="img01-<?php echo $postId?>" src="<?php the_post_thumbnail_url($postId); ?>"/>
        </div>
      </article>
       <?php
   endwhile;
endif;
wp_reset_query(); ?>

</div>

jQuery(document).ready(function($)
{
  var articles = document.querySelectorAll("article");
for (var i = 0; i < articles.length; i++) {
    var article = articles[i];
    var modal = article.querySelector(".modal");
    var button = article.querySelector(".featured-img");
    var closeButton = article.querySelector(".close");

    // if there is no modal, ignore this article
    if (!modal) continue;

    button.onclick = function() {
        modal.style.display = "block";
    }
    closeButton.onclick = function() {
        modal.style.display = "none";
    }

    // add event listener instead so it can be added multiple times
    window.addEventListener("click", function(event) {
        if (event.target === modal) {
            modal.style.display = "none";
        }
    });
}
});

• php
• javascript

1 Answer 1

Ok I found a solution that seems to work by trying various code snippets I found online. Not sure if it is the best way to approach this but, as no one has answered yet, thought it might be useful to post :-)

I took out the javascript altogether and used cssW3 modal. Code that works is:

<?php
/**
* Template Name: Home Page
*/


get_header(); ?>
<div class="grid-container">

<?php
$args = array(
'post_type' => 'artists',
);
global $post;
$the_query = new WP_Query( $args );

if ( $the_query->have_posts() ) :
   while ( $the_query->have_posts() ) :
       $the_query->the_post();
       ?>

      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
         <img onclick="document.getElementById('mymodal-<?php the_ID(); ?>>').style.display='block'" class= "featured-img" id="myImg-<?php the_ID(); ?>" src="wp-content/themes/dollarartclub/images/women.png" alt="Snow" style="width:100%;max-width:300px">
        <!-- modal -->
        <div id="mymodal-<?php the_ID(); ?>>" class="modal">
          <span onclick="document.getElementById('mymodal-<?php the_ID(); ?>>').style.display='none'" 
      class="w3-button w3-display-topright">&times;</span>
            <img class="modal-content" id="img01-<?php the_ID(); ?>" data-id="img01-<?php the_ID();?>" src="<?php the_post_thumbnail_url($post->ID); ?>"/>
        </div>
      </article>


       <?php
   endwhile;
endif;
wp_reset_query(); ?>

</div>

The css styling needs to be tidied up but the functionality seems to work.