0

I have an archive page that shows a custom post type with content entered in ACF. Inside each article, there are 2 buttons that open an Inquiry modal and a gallery modal. Now I have managed to get the Inquiry button to work that would populate a dropdown with the Post's title preselected (thanks to the help from a question I previously asked: Set default option in dropdown of WP_Query?). Now the problem lies with the modal gallery. Nothing pops open when the button is clicked. I would like to open the modal gallery with the acf gallery associated with the post.

Here is the code for the article with the buttons:

<div class="property-info">
        <?php $the_post = get_post(); ?>
        <div class="property-details">
            <h2><?php the_title(); ?></h2>
            <h3 class="address"><?php echo get_field('property_address');?></h3>

            <!-- excerpt -->
            <p><?php if( '' != get_the_excerpt(40) || '' != get_the_content(40) ) { ?>
                <?php do_action('layers_before_list_post_content'); ?>
                <?php do_action('layers_list_post_content'); ?>
                <?php do_action('layers_after_list_post_content'); ?>
            <?php } ?></p>
        </div>

        <div style="width:48%;display:inline-block;padding-right:10px">
            <!-- IF HAVE GALLERY, SHOW BUTTON FOR MODAL WINDOW-->

            <a href="#open-modal-gallery-<?php echo $post->ID; ?>" class="button gallery-button">View Images</a>
            <!-- END GALLERY MODAL WINDOW BUTTON -->
        </div>
        <div style="width:48%;display:inline-block;padding-left:10px;">
            <!-- IF HAVE WEBSITE URL GO THERE, ELSE OPEN MODAL WINDOW, UNLESS DISABLED -->

                <!-- <a href="<?php echo get_field('property_website'); ?>" class="button inquire-button">Visit Website</a> -->

                <a href="#open-modal-form-<?php echo $post->ID; ?>" class="button inquire-button">Inquiry</a>
            <!-- END BUTTON -->
        </div>


    </div>

Here is the code for the Inquiry Modal:


    <!-- INQUIRY MODAL WINDOW -->
    <div id="open-modal-form-<?php echo $post->ID; ?>" class="modal-window">
        <div>
            <a href="#" title="close" class="modal-close"><i class="eicon-close"></i></a>
            <!-- I couldn't get contact form 7 to play nice, so I made my own form. Recipient Email is managed in inquiry.php. -->
            <h2>Property Inquiry</h2>
            <form action="<?php bloginfo('template_directory'); ?>/inquiry.php" method="post">
                <div class="col-6">
                    <input type="text" name="fname" placeholder="First name">
                </div>
                <div class="col-6">
                    <input type="text" name="lname" placeholder="Last name">
                </div>
                <div class="col-6">
                    <?php 
                        $args = array(
                            'post_type' => 'property',
                            'tax_query' => array(
                                array(
                                    'taxonomy' =>'project_category',
                                    'field' => 'slug',
                                    'terms' => array('current-projects','past-projects')
                                )
                            ),
                        );
                        $post_id = $post->ID;
                        $the_query = new WP_Query($args);
                    ?>
                <select name="propname">
                    <?php
                        $found = wp_list_filter( $the_query->posts, [ 'ID' => $the_post->ID ] );
                        if ( empty( $found ) ) :
                        ?>
                            <option selected><?php echo get_the_title( $the_post ); ?></option>
                        <?php
                        endif;

                        if($the_query->have_posts()){
                            while($the_query->have_posts()) : $the_query->the_post(); ?>
                                <option<?php selected( get_the_ID(), $the_post->ID ); ?>><?php the_title(); ?></option>
                            <?php endwhile;
                        } wp_reset_query();
                    ?>
                </select>
                </div>
                <div class="col-6">
                    <input type="email" name="email" placeholder="Email">
                </div>
                <div class="col-12">
                    What type of lease are you looking for?
                    <input type="radio" name="lease-type" value="Rental Lease" id="rental-lease" checked> <label for="rental-lease">Rental</label>
                    <input type="radio" name="lease-type" value="Commercial Lease" id="commercial-lease"> <label for="commercial-lease">Commercial</label>
                </div>
                <div class="col-12">
                    <textarea name="comments" placeholder="Message"></textarea>
                </div>
                <div class="col-12" style="text-align:right;">
                    <input type="submit" value="Send Request">
                </div>                  
            </form>
            <p><small>DB Services does not collect any personally identifiable information about you when you visit the Website unless you voluntarily provide this information, for example by contacting us through our email forms (including sending us queries or responding through the Website to our job postings.) Personal information collected in these cases may include your name, contact details, email address, telephone number and your resume.</small></p>
        </div>
    </div>
    <!-- END INQUIRY MODAL WINDOW -->

and right below that code is the gallery code:

<!-- GALLERY MODAL WINDOW -->
    <div id="open-modal-gallery-<?php echo $post->ID; ?>" class="modal-gallery">
        <a href="#" title="close" class="modal-close"><i class="eicon-close"></i></a>
        <div>
            <?php 
                $images = get_field('gallery_',$post->ID);

                if($images): 
            ?>
                <div class="slick-gallery">
                    <?php foreach($images as $image) : ?>
                        <div class="img-container">
                            <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
                        </div>
                    <?php endforeach; ?>
                </div>
                 <div class="slider-nav">
                        <?php foreach( $images as $image ): ?>
                            <div>
                                <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />

                            </div>
                        <?php endforeach; ?>
                </div>
            <?php endif; ?>
        </div>
    </div>
    <!-- END GALLERY MODAL WINDOW -->

I am assuming it is because I reset the query inside the inquiry modal, but when I move the $args statement to just outside the inquiry modal and the reset to the outside of the gallery modal, nothing happens. The inquiry still ends up working, but the gallery modal doesn't open at all.

0

I found that I had a duplicate gallery modal inside a get_template_part funciton that was throwing off the ID. It's now resolved.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.