Jump to content
TNG Community
fluffy82

no media preview popup - Kloosterman

Recommended Posts

fluffy82

I was looking for a mod that would allow me to have a popup previewing my media when hovering over it, when I realised that this is normally a standard in TNG. With me, it had never worked though.
After a bit of browsing through the forums, I saw that the footer needs the following bit of code to be able to display the popups, and as I use the Kloosterman integration this is not part of my tng footer file:

$flags['basicfooter'] = true;
        echo tng_footer($flags);

 

I tried to add it to my "Kloosterman" custom WPTNG-footer, and indeed it works! But... It also gave me the TNG footer, below my own Wordpress footer, giving double information and looking ugly.

Does anyone know how to get the best of both worlds? So either:

- add the code to have the popups, but change something to remove the TNG footer
- do not add the code, but find another way of showing the popups

Share this post


Link to post
Share on other sites
tngrlkrz

I don't use WordPress, but I was able to get image preview w/o the footer in TNG by replacing those lines (in footer.php) with the popup media preview java script from genlib.php.   You perhaps don't execute footer.php but this is TNG 12.02 code which produces the popup.

        <script type="text/javascript">
        jQuery(document).ready(function() {
            jQuery('.media-preview').on('mouseover touchstart',function(e) {
                e.preventDefault();
                var items = this.id.match(/img-(\d+)-(\d+)-(.*)/);
                var key = items[2] && items[2] != "0" ? items[1]+"_"+items[2] : items[1];
                if(jQuery('#prev'+key).css('display') == "none")
                    showPreview(items[1],items[2],items[3],key,'<?php echo $sitever; ?>');
                else
                    closePreview(key);
            });
            jQuery('.media-preview').on('mouseout',function(e) {
                var items = this.id.match(/img-(\d+)-(\d+)-(.*)/);
                var key = items[2] && items[2] != "0" ? items[1]+"_"+items[2] : items[1];
                closePreview(key);
            });
            jQuery(document).on('click touchstart', '.prev-close img', function(e) {
                var items;
                items = this.id.match(/close-(\d+)_(\d+)/);
                if(!items)
                    items = this.id.match(/close-(\d+)/);
                var key = items[2] && items[2] != "0" ? items[1]+"_"+items[2] : items[1];
                closePreview(key);
            });
        });
        </script>

I'm sure there's an easier way, but just to point out the 'imgprev' code is in the function tng_basicfooter($flags) of genlib.php.

Ron

Share this post


Link to post
Share on other sites
fluffy82

That did the trick! Thank you so much :)

Share this post


Link to post
Share on other sites
Ken Roy

Remember that if you do not use the TNG distributed code, that you need to track your changes so that you are not asking for help again with the same issue on the next TNG upgrade

Share this post


Link to post
Share on other sites
tngrlkrz
1 hour ago, Ken Roy said:

Remember that if you do not use the TNG distributed code, that you need to track your changes so that you are not asking for help again with the same issue on the next TNG upgrade

You're right Ken,   I should have noted that.  Next time I will do private messaging and issue the caveats so as not to increase questions/issues on this forum.  I would have suggested a mod, but wasn't sure if that integrates the same in the WordPress environment.

Ron

Share this post


Link to post
Share on other sites
fluffy82
1 hour ago, Ken Roy said:

Remember that if you do not use the TNG distributed code, that you need to track your changes so that you are not asking for help again with the same issue on the next TNG upgrade

Absolutely true, I learned that the hard way. Which is why after installing TNG 12 and loosing my work (mostly css, luckily), I do not change the TNG source code. If I need to make any changes, I try to look for solutions outside the TNG box, like the one proposed by Ron. I have added the script to my own footer, the TNG footer remains intact. As the TNG package doesn't include my footer, it will never be overwritten (and if it does happen, I keep backups of my files).

Regards,
Tom

Share this post


Link to post
Share on other sites
Ken Roy
11 minutes ago, tngrlkrz said:

You're right Ken,   I should have noted that.  Next time I will do private messaging and issue the caveats so as not to increase questions/issues on this forum.  I would have suggested a mod, but wasn't sure if that integrates the same in the WordPress environment.

Ron

Ron,

you do not need to private message users.  TNG Users need to know that if they modify TNG manually, that they need to track their changes.  The Mod Manager makes it easier to keep track of changes.

5 minutes ago, fluffy82 said:

Which is why after installing TNG 12 and loosing my work (mostly css, luckily), I do not change the TNG source code. If I need to make any changes, I try to look for solutions outside the TNG box, like the one proposed by Ron

CSS changes should also be documented even if you have them in mytngstyle.css.

I know nothing about WordPress so am not sure about that environment.

Share this post


Link to post
Share on other sites
theKiwi
On 11/3/2018 at 10:30 AM, tngrlkrz said:

You're right Ken,   I should have noted that.  Next time I will do private messaging and issue the caveats so as not to increase questions/issues on this forum.  I would have suggested a mod, but wasn't sure if that integrates the same in the WordPress environment.

 

Mods written to use the TNG Mod Manager can do their magic on WordPress files too on the same site - you just have to use the relative address to the files relative to the TNG root. I have several Mods on my site that do things to the WordPress files.

Roger

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×