TAGS :Viewed: 6 - Published at: a few seconds ago

[ Show content Jquery ]

I'm trying to show content from a gallery in a #showcontent div. Currently i have this set up

The Js

<script>
    $(document).ready(function() {
        $('.gallery-item').on('click', function(e) {
            $(".show-gallery-content").appendTo ("#showcontent").toggle();

        });
    });
</script>

index.php

<?php
            $args = array('post_type' => 'Gallery', 'order' => ASC);
            $loop = new WP_Query($args);
            while ($loop->have_posts()) : $loop->the_post($post_id);
                echo '<div class="gallery-item">';


                echo '<div class="gallery-image">';
                the_content();
                echo '</div>';
                echo '<div class="show-gallery-content">';
                echo '<div class="gallery-title">';
                the_title();
                echo '</div>';
                echo '<div class="gallery-excerpt">';
                the_excerpt();
                echo '</div>';
                echo '</div>';
                echo '</div>';


            endwhile;
?>

CSS

.show-gallery-content {
display:none;
}

Live preview of current website -> http://erwin.my89.nl/stage/sieh/

So, when I click an image i want to get the_title() & the_excerpt to show in #showcontent.

I had it fine last night but PhpStorm kinda screwed it up this morning, so i'm really frustrated now :D.

Thanks in advance!

Also i'd like some background information since I'm a student :-)!

Answer 1


Try this:

<script>
$(document).ready(function() {
    $('.gallery-item').on('click', function(e) {
        $("#showcontent").append($(".show-gallery-content").html()).show();
    });
});
</script>

Answer 2


I think your approach for linking photo to content is not optimized solution. anyway, based on your html structure you need a connection between clicked image to content. you can try this snippet.

<script>
    $(document).ready(function() {
        $('.gallery-item').on('click', function(e) {
            $(this).children(".show-gallery-content").appendTo ("#showcontent").toggle();

        });
    });
</script>

Answer 3


Please, consider this snippet:

$('.gallery-item').on('click', function(e) {
    $('#showcontent').empty().append($(this).find('.show-gallery-content').contents().clone());
});