1 popup for each image

  • Hi,

    This code inserts the Feautured Image into a popup:

    if ( has_post_thumbnail()) {
			echo '<a id="thumbnail-thumbnail" href="#" class="popup_oeffnen" title="' . the_title_attribute('echo=0') . '" >';
				echo get_the_post_thumbnail($post->ID, 'category-thumb', 'class=custom-thumbnail');
			echo '</a>';
			echo '
    			<div id="popup">
        			<div class="schliessen"></div>
        			<div id="popup_inhalt"> ' . get_the_post_thumbnail($post->ID, 'large', 'class=large-thumbnail')  . '</div>
    			</div>
    			<div id="hintergrund"></div>
		 	';
		 }

    So get_the_post_thumbnail($post->ID, ‘large’, ‘class=large-thumbnail’) is what comes into the popup. What do I have to do, if I also want any other image which gets added into the TinyMCE editor appear into that popup? Separately of course, so not all images into 1 popup!

    My JavaScript looks like that:

    jQuery(function($) {
    var popup_zustand = false; 

    $(".popup_oeffnen").click(function() {
        if(popup_zustand == false) {
            $("#popup").fadeIn("normal");
            $("#hintergrund").css("opacity", "0.7");
            $("#hintergrund").fadeIn("normal");
            popup_zustand = true;
        }
    return false;
    });

    $(".schliessen").click(function() {
        if(popup_zustand == true) {
            $("#popup").fadeOut("normal");
            $("#hintergrund").fadeOut("normal");
            popup_zustand = false;
        }
    });
});

    I appreciate any help!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Modify your jQuery so that it also looks for an image within the post/page content, e.g.:

    jQuery(function($) {
    var popup_zustand = false; 

    $(".popup_oeffnen, .post-content a > img:parent").click(function() {
        if(popup_zustand == false) {
            $("#popup").fadeIn("normal");
            $("#hintergrund").css("opacity", "0.7");
            $("#hintergrund").fadeIn("normal");
            popup_zustand = true;
        }
    return false;
    });

    $(".schliessen, .post-content a > img:parent").click(function() {
        if(popup_zustand == true) {
            $("#popup").fadeOut("normal");
            $("#hintergrund").fadeOut("normal");
            popup_zustand = false;
        }
    });
})

    Thread Starter Sub_Zero

    (@sub_zero)

    This will look for the image but the contain of the popup is still the same. It’s always the featured image no matter what image you click. And that’s because of this line:
    <div id="popup_inhalt"> ' . get_the_post_thumbnail($post->ID, 'large', 'class=large-thumbnail') . '</div>

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Then basically you can’t do this through the TinyMCE editor.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try looking at how some plugins do it https://www.ads-software.com/plugins/search.php?q=fancybox

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘1 popup for each image’ is closed to new replies.

Tags