[Theme : Pique] How to hide an element after clicking "more" ?

  • Resolved zelda013

    (@zelda013)


    8 years, 8 months ago

    I have created some pages with galleries in them using Envira Gallery plugin. These pages display as panels on the (static) home page, so i only want to display the 1st row of thumbnail images on the home, but display the full gallery once you click the “more” link to the full page. In order to accomplish this I’ve made 2 galleries for each page : the preview gallery (3 images only) and the full gallery.

    How can I set the preview gallery to “display : none” (or the equivalent) after you click through to the full article ? I’m sure there is some php wizardry which could easily do this.

    I’ve created a child theme for my modifications so it shouldn’t be too hard to add a couple of lines of code to the functions.php file. I don’t know enough (…any) php to write it myself though. Thanks in advance for any help.

    (Alternately, if there is a gallery plugin which can automatically do this, that would be great. I am currently using Envira Gallery but only just started so not sure it’s the best solution for me).

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter zelda013

    (@zelda013)

    to be more clear, here is the code of the pages in question :

    [envira-gallery slug="preview1"]

<!--more-->

[envira-gallery id="full1"]

    i would like to set the top gallery [envira-gallery slug=”preview1″] to “visibility : none” (or just remove it from the page) when the “more” link is clicked, so that the top line is not displayed twice :

    (once more is clicked) :

    [envira-gallery id="full1"]

    i have more than one page like this so the code needs to include a regex to adapt the slug to the correct one (all the preview galleries include “preview” in the slug).

    i found this php code which removes the “more” named anchors, maybe it can be adapted to this purpose ? but this code is for the url, and I need code for the page content.

    //remove "more" named anchors, because they prevent the galleries from loading in the page view

function remove_more_link_scroll( $link ) {
	$link = preg_replace( '|#more-[0-9]+|', '', $link );
	return $link;
}
add_filter( 'the_content_more_link', 'remove_more_link_scroll' );
    Thread Starter zelda013

    (@zelda013)

    resolved using css only : 

    div.pique-panel-content .envira-gallery-wrap:first-of-type {
    display: block;
}

.envira-gallery-wrap:first-of-type {
    display: none;
}
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘[Theme : Pique] How to hide an element after clicking "more" ?’ is closed to new replies.