Adding text to navigation buttons

[Leonard Will]

In order to add text as well as icons to navigation buttons, I found that you can just insert the text before the final <a> in the relevant function in \js\displayimage.js. For example, I inserted the word "Slideshow" in the following:

function printSlideshowButton() {
    // insert slideshow button as defined in theme or create default button
    var btn = js_vars.buttons.slideshow_btn ? js_vars.buttons.slideshow_btn
        : '<a href="' + js_vars.buttons.slideshow_tgt + '" class="navmenu_pic" title="' + js_vars.buttons.slideshow_title + '" rel="nofollow"><img src="' + js_vars.buttons.loc + 'images/navbar/slideshow.png" border="0" align="middle" alt="' + js_vars.buttons.slideshow_title + '" />Slideshow</a>';
    $('#slideshow_button').append(btn);
}

I don't know whether .js files can be included in a custom theme, to avoid having to make the change in the core file.

[Αndré]

It's already written in the code you provided

// insert slideshow button as defined in theme or create default button
    var btn = js_vars.buttons.slideshow_btn ? js_vars.buttons.slideshow_btn

So you'd need to insert something like that to your theme's theme.php file:

Code Select Expand

set_js_var('buttons.slideshow_btn', '<a href="' + js_vars.buttons.slideshow_tgt + '" class="navmenu_pic" title="' + js_vars.buttons.slideshow_title + '" rel="nofollow"><img src="' + js_vars.buttons.loc + 'images/navbar/slideshow.png" border="0" align="middle" alt="' + js_vars.buttons.slideshow_title + '" />Slideshow</a>');
(not tested).

[Leonard Will]

Thanks for the reply, André. I was not familiar enough with Javascript to recognize the significance of the "ternary operator" ? ... : in the code. 

I have tried pasting the code you suggested into my theme.php, changing the last word from "Slideshow" to "Zlideshow" so that I would know which version was being picked up, and it is not being recognized.  I tried pasting it at the start or at the end, just before the final "?>" - should it go somewhere else, or does it need any wrapper or additional code to set the variable js_vars.buttons.slideshow_btn ?

I tried removing the option code in displayimage.js, leaving just "var btn = js_vars.buttons.slideshow_btn;" and nothing was output, so I guess that the variable was not set.

My gallery is at www.enfieldsociety.org.uk/photographs/

[Αndré]

Copy the function theme_html_img_nav_menu from themes/sample/theme.php to your theme's theme.php file, if it doesn't exist.

Then either look for

Code Select Expand

$slideshow_btn = '';

or change the following code to your needs

Code Select Expand

    $js_buttons = array(
        'pic_info_title'  => $lang_img_nav_bar['pic_info_title'],
        'pic_info_btn'    => $pic_info_btn,
        'slideshow_tgt'   => $slideshow_tgt,
        'slideshow_title' => $lang_img_nav_bar['slideshow_title'],
        'slideshow_btn'   => $slideshow_btn,
        'loc' => $location,
    );

[Leonard Will]

Copy the function theme_html_img_nav_menu from themes/sample/theme.php to your theme's theme.php file, if it doesn't exist.

Then either look for

Code Select Expand

$slideshow_btn = '';

I have done this, and changed the line above to

Code Select Expand

$slideshow_btn = '<a href="' + js_vars.buttons.slideshow_tgt + '" class="navmenu_pic"
title="' + js_vars.buttons.slideshow_title + '" rel="nofollow">
<img src="' + js_vars.buttons.loc + 'images/navbar/slideshow.png"
border="0" align="middle" alt="' + js_vars.buttons.slideshow_title + '" />ZZSlideshow</a>';

It doesn't work, though, to override the button defined in displayimage.js. I wonder whether that is because the js_vars are not defined until a few lines later. If I replace these variables in the above code with literal text, such as an arbitrary URL instead of ...slideshow_tgt, removing ...loc and inserting a literal title, the changed button is displayed, but of course does not start the slideshow.

Incidentally, I can't see where the class "navmenu_pic" is defined - I don't know whether that has any effect.

[Αndré]

You need to replace the JS vars with the corresponding PHP variables (have a look at the second code I posted) . I'm currently on a mobile phone, so I cannot create the code for you.

[Leonard Will]

Many thanks for your prompt replies. I have now used the following code, which may be more complicated than necessary but which works.

Code Select Expand

$slideshow_btn = "<a href={$slideshow_tgt} class=\"navmenu_pic\" title=\"{$lang_img_nav_bar[slideshow_title]}\" rel=\"nofollow\">
<img src=\"images/navbar/slideshow.png\" border=\"0\" align=\"middle\" alt=\"{$lang_img_nav_bar[slideshow_title]}\" />Slideshow</a>";

I'll try to do the same for pic_info_btn tomorrow.

[Leonard Will]

In case anyone else wants to add text to buttons within a theme, I found that for the "picture information" button the following code works when added to theme.php as indicated by André:

Code Select Expand

// if set, this will override the default pic_info button to be inserted by displayimage.js
$pic_info_btn = "<a href=\"javascript:;\" class=\"navmenu_pic\" onclick=\"blocking('picinfo','yes','block'); return false;\"
title=\"{$lang_img_nav_bar[pic_info_title]}\" rel=\"nofollow\"><img src=\"images/navbar/info.png\" border=\"0\"
align=\"middle\" alt=\"{$lang_img_nav_bar[pic_info_title]}\" />Picture information</a>";

I hope that CPG 1.6 will provide a simpler way of doing this!