Toggling your Client Response Legend

I recently got a question about hiding a Client Response legend that’s been placed in the page copy of a Backlight album. It’s really pretty easy to do with a simple jQuery toggle.

legend-toggle

See this in action on my Backlight test site.

In my previous article on creating a legend for Client Response albums, I wrapped the markup for the legend in a div with an ID of “legend”, I’ll just use that for jQuery to target. We’ll just need to add a button or link to click so that the legend can pop in and out of existence on the page.

This will place a button above the legend and centered on the page. If using the same code as in the Legend tutorial, I suggest replacing the <hr/> tag with this code:

<div style="text-align: center;"><button class="legend-button">Show/hide Client Response Legend</button></div>

If you’re not already using phplugins you’ll need to start. Be sure to see the Backlight documentation. From your unzipped Backlight download, go to backlight/custom/phplugins/ and open the phplugins-sample.php file with a plain text editor and add this function:

function ttg_scripts( $style, $path ) {
echo '
<script>
$(document).ready(function(){
$("button.legend-button").click(function(){
$("#legend").toggle("slow");
});
});
</script>
';
return false;
}

I suggest saving the file as just phplugins.php or give it a meaningful name if you only plan on using it with certain page templates.

What the jQuery does is “listen” for a button with the class “legend-button” to be clicked. When it is, then anything with an ID of “legend” will be toggled off and on. Now you see it, now you don’t.  The parameter (“slow”) adds a cool sliding effect. You can change this behavior if you wish. See this W3schools.com page for more information.

In the page template for your Client Response album, enable phplugins and choose your newly edited phplugins file.

Since the button has been given the class “legend-button,” you can use this in your custom css file to style the button any way you want.

Variation: If you don’t want to use a button you don’t have to. To use a text link, try this instead:

<div style="text-align: center;"><a href="#" class="legend-button">Show/hide Client Response Legend</button></div>

And in the script, replace “button.legend-button” with “a.legend-button”.

That’s it. Pretty simple to implement and it looks cool on your site too.

Bonus: If you want the legend to initially be hidden, add this bit of css to your custom css file. This assumes you’ve placed the legend in a div with the ID of “legend”.


#legend {
    display: none;
}

4 thoughts on “Toggling your Client Response Legend”

    1. Sure is. Just add this to your custom css:

      #legend {
      display: none;
      }

      this assumes you’ve wrapped the legend in a div with the ID of “legend”.
      What this does is initially hide the “legend” div. The jQuery toggles the display state.
      I’ve added the css to my test site so not the default state on the demo page is for the legend to be hidden.
      I’ve also added this to the post above.

Leave a Reply

Your email address will not be published. Required fields are marked *

About this site

This site is: a repository of time-savers and best practices from a user's perspective, picked up from several years of using TTG plugins.
This site is not: a support site.
Read more here.

Tip Jar

If this site has saved you some time, kept your hair attached, or otherwise prevented you from tossing the mouse through the monitor, feel free to donate.

Categories


Highly recommended. This is my go-to Lightroom book. Click on the book image. (affiliate link)

Affiliate link!

Current TTG versions

Backlight Versions

Backlight 1.2.2 release 3
Pages module 1.2.1
Cart Add-on 4.1.3
Client Response Add-on 7.1.2
Theater Add-on 1.2.4
WordPress Add-on 1.2.3
Publisher 3.2.2

CE4 Versions

TTG-BE: 2.0.5a
Autoindex: 7.0.8
Cart: 3.1.4a
CRG: 6.1.3a
Gallery: 6.1.9
Pages: 7.0.15
Publisher: 2.3.3
Stage: 6.1.6
Theme for WordPress: 3.1.2

Subscribe to new posts