Jump to content
TNG Community
Guest Ronald Boot

Create lightbox enlargement on photos

Recommended Posts

Guest Ronald Boot

I am integrating the latest TNG into a new website: https://www.genealogieboot.nl/genealogie/searchform.php

On the getperson.pnp pages i want the media files (always jpg or png) to enlarge in a Lightbox, for instance here: https://www.genealogieboot.nl/genealogie/getperson.php?personID=I41345&tree=famboot1  Instead of sending the visitor to the media page / gallery.

Editing the code personlib.php didn't work out. No mather what JS of CSS i use, the Lightbox scripts will not load properly.

I have searched the mods and this forum because i was convinced that many more users would like such an option but i can not find this anywhere.

Any advise ...?

Share this post


Link to post
Share on other sites
theKiwi

TNG should already be doing this - if you hover over a media thumbnail on the getperson.php page, TNG pops up an overlay of a larger version of the image...

image.png

Roger

Share this post


Link to post
Share on other sites
Guest Ronald Boot

Then something is broke i guess because i upgraded and as far as i know i didn't touch any file that configures this.

in which file can i see this function?

Share this post


Link to post
Share on other sites
XerxX

I made a private mod that eliminates the preview.

In the js folder, in the net.js file, in the function

showPreview(mediaID,medialinkID,path,entitystr,sitever)

I remark

jQuery('#prev'+entitystr).fadeIn(100);

and there is no preview. Maybe you can start your investigation there..?

HTH

Share this post


Link to post
Share on other sites
tngrlkrz

Stating the obvious, have you clear your browser cache? 

More than you want to know, but adding to what Erik noted, that javascript  is triggered by variables in the footer area.  For image preview,  the showpreview is called  with this script at the end of genlib.php.  But out of the box, without any other mods, the preview should work and you shouldn't have to hunt anything in this code at all.  Sounds like you've been tinkering with code; perhaps you need to refresh TNG files?

    if(isset($flags['imgprev'])) {
?>
        <script type="text/javascript">
        //<![CDATA[
        jQuery(document).ready(function() {
            jQuery('.media-preview img').on('mouseover touchstart',function(e) {
                e.preventDefault();
                var items = this.parentElement.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);
            });
            (rest deleted)
        </script>
 

 

Share this post


Link to post
Share on other sites
Guest Ronald Boot

Yes i edited some scripts but i was convinced i started with a fresh genlib.php but as it seems i was working with old version, stupid me!   ;)
So i fixed this file so every function for media is as it should be in genlib.php now.

I outcommented this rule in /js/net./js like HTH advised but makes no difference:

 jQuery('#prev'+entitystr).fadeIn(100); 

Browser cache is not the problem.

As far as i know all TNG CSS is loaded.

I checked the source of Rogers' page and it seemed these JS files were not loaded: popup_2.js and popup.js. I am not sure these JS creates the photo popups but these files are not included in the TNG installation package.

So just to be clear:
On the getperson.php i do not want the showmedia link because imo it's no good to lead visitors to a new page, thereby i think the showmedia gallery is not very userfriendly.
But it's no problem to strip this <a href showmedia.php > out of course.
So all i need is to show the thumbs and a lightbox function onclick to enlarge.

(Example: https://www.genealogieboot.nl/genealogie/getperson.php?personID=I41345&tree=famboot1 )

 

 

Share this post


Link to post
Share on other sites
XerxX
22 minutes ago, Guest Ronald Boot said:

I outcommented this rule in /js/net./js like HTH advised but makes no difference:


 jQuery('#prev'+entitystr).fadeIn(100); 

 

Well, I didn't advise you to comment it out. I said I commented it out in order to eliminate the preview ("lightbox").

You asked where the function is and I replied where I found one place to manipulate it.

Hope This Helps

Erik

Share this post


Link to post
Share on other sites
Ronald Boot

Sorry i misunderstood "remark" Erik. Thanks for pointing out this JS function snippet but i do not think it will bring me somewhere because when i edit the script there it changes nothing in the frontend.

And another question if i may:
When i have more photo's on a persons page like: https://www.genealogieboot.nl/genealogie/getperson.php?personID=I46869&amp;tree=famboot1
I need to click on 'unfold all' first to see the thumbs. When loading the page it isn't unfolded so onlye the text number of photos is visible. How can i make this unfolded always?
I can not find it anywhere in the configuration but perhaps i am overlooking this.

 

Share this post


Link to post
Share on other sites
Ronald Boot

Because i inserted other lightbox scripts and they will not work neither i am almost certain some JS or CSS conflict is causing an issue here. That's why the basic hover  function and i can not continue before i got this to work like it should. Checked all JS files and CSS but nothing to be fixed.  ;(

So can you help me out here with this or should i ask for support @ Darrin?

Share this post


Link to post
Share on other sites
Ken Roy

Darrin is not responsible for modifications to user sites.   Maybe you start by removing your lightbox scripts

Share this post


Link to post
Share on other sites
tngrlkrz
5 hours ago, Guest Ronald Boot said:

Yes i edited some scripts but i was convinced i started with a fresh genlib.php but as it seems i was working with old version, stupid me!   ;)
So i fixed this file so every function for media is as it should be in genlib.php now.

As I suggested, I would refresh all TNG files (except of course the ones the upgrade readme tells you not to).  Likely something is still corrupted, since the preview function works 'out of the box' if no modifications are made.  Darrin would ask you do the same, I suspect.

Share this post


Link to post
Share on other sites
Ronald Boot

Nothing to remove Ken, all is just like it should be and no edits regarding this function.

Thanks anyway guys, i will find a way somehow.

Leaves me this question if i may:
 

Quote

When i have more photo's on a persons page like: https://www.genealogieboot.nl/genealogie/getperson.php?personID=I46869&amp;tree=famboot1
I need to click on 'unfold all' first to see the thumbs. When loading the page it isn't unfolded so onlye the text number of photos is visible. How can i make this unfolded always?
I can not find it anywhere in the configuration but perhaps i am overlooking this.

I found out that this element makes it happen:

<tr class="mphotos" style="display:none">

So my guess is all i need to is to remove the display:none , but i can not find it anywhere in the files.

Share this post


Link to post
Share on other sites
theKiwi

Take a look in the TNG Admin ------> Settings ------> General Settings ------> Media - there are settings in there that might be controlling what you're seeing.

Roger

Share this post


Link to post
Share on other sites
Ronald Boot

Nope, there's no option for that.

I will search for a solution but it's costing me 2 days now so i guess i need to go from scratch again.

But soon i will show you my WordPress - TNG website in full glory!   ;)

Share this post


Link to post
Share on other sites
tngrlkrz
18 minutes ago, Ronald Boot said:

Nope, there's no option for that.

In Admin:Setup:Media  hide personal media:  set to NO.  Then thumbs will be shown on first load and the 'expand/collapse' arrows will not appear.

It might have been helpful to those trying to help you to disclose that you are integrating Word Press.

 

Share this post


Link to post
Share on other sites
Ken Roy

Sounds like this topic should have been posted in the WordPress forum and not in the TNG Modifications forum

47 minutes ago, Ronald Boot said:

Nope, there's no option for that.

I will search for a solution but it's costing me 2 days now so i guess i need to go from scratch again.

But soon i will show you my WordPress - TNG website in full glory!   ;)

 

Share this post


Link to post
Share on other sites
Ronald Boot
41 minutes ago, tngrlkrz said:

In Admin:Setup:Media  hide personal media:  set to NO.  Then thumbs will be shown on first load and the 'expand/collapse' arrows will not appear.

Yes that's it Ron, who would have guess that option is related to that toggel button?  ;)  Thanks!

10 minutes ago, Ken Roy said:

Sounds like this topic should have been posted in the WordPress forum and not in the TNG Modifications forum

I am sorry Ken, didn't know there was a specific forum for that.

For info:
I completed almost everything and now i need to start all over again. But no big problem because it seemed that my plan was wrong anyway. Because in fact i included TNG script into a Wordpress built webtemplate but now i will work the other way around; load the WordPress scripts into the TNG template.

So still learning after all these years (updating www.familieboot.com  ) and when i am finished i will let you know in the Wordpress forum. And who knows i am able to help someone else here in the future.

Share this post


Link to post
Share on other sites
Ronald Boot

To end this topic properly: I have managed to fix the issue by integrating WordPress script into TNG instead of the othr way around, example page:
https://www.genealogieboot.nl/genealogie/getperson.php?personID=I41345&tree=famboot1

So now just the hover preview and no click to showmedia.php.

I'd really would like to make the enlargement in Lightbox but i will try and fix that later. But is it not a good idea to implement such an option in TNG, so people can choose between hover pop up or lightbox?

To end this topic properly: I have managed to fix the issue by integrating WordPress script into TNG instead of the othr way around, example page:
https://www.genealogieboot.nl/genealogie/getperson.php?personID=I41345&tree=famboot1

So now just the hover preview and no click to showmedia.php.

I'd really would like to make the enlargement in Lightbox but i will try and fix that later. But is it not a good idea to implement such an option in TNG, so people can choose between hover pop up or lightbox?

 

Share this post


Link to post
Share on other sites
Guest
You are commenting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×