Open photos in Lightbox

Tagged: google maps, lightbox image, maps easy, marker image, supsystic

This topic has 15 replies, 3 voices, and was last updated 4 years, 10 months ago by Alex_support.

Viewing 15 posts - 1 through 15 (of 16 total)

1 2 →

Author
Posts
July 6, 2018 at 15:55 #18446

Anonymous
Inactive
Is it possible to open marker photos in a Lightbox rather than just linking to the media file? I can’t see anything in settings but I have installed the Lightbox plugin by dFactory. According to that plugin I can insert a rel selector (lightbox) to trigger the effect but I can’t see where I can insert it. I have tried to add ‘lightbox’ to the Link Rel field in Image Details but it doesn’t do anything.
Your suggestions would be appreciated.
Thanks,
Tim
July 6, 2018 at 16:20 #18450

Alex_support
Member
Hello, @tim607332.
You can use shortcodes from third party plugins inside the marker’s description – shortcode will be compiled.
But please note,that the result of the shortcode should be displayed in a marker’s description pop-up window. This can be a problem for many plug-ins – they can’t initially calculate the correct sizes for themselves, if it’s required. After all of this result of the Shortcode work will be transferred to a Google map – so, you’ll receive html at the end.
July 6, 2018 at 16:58 #18451

Anonymous
Inactive
Thanks Alex,
Unfortunately, the Responsive Lightbox & Gallery 2.0.5 plugin doesn’t seem to use shortcodes. We will try and work this one out ourselves and I’ll let you know how we get on.
Cheers,
Tim
July 6, 2018 at 17:03 #18452

Alex_support
Member
Hello, Tim.
OK, please let us know the results.
July 10, 2018 at 15:43 #18522

Anonymous
Inactive
Hello Alex,
I just thought I’d give you a progress report. The underlying problem is that when the lightbox code is initiated the map popups don’t exist. Upon showing the pop-ups these won’t automatically be added to the DOM in the same way and inherit the function calls.
To test our theory we added a small link to one of our the markers saying “Initiate Lightbox” which when clicked initiates the Lightbox JQuery and enables the lightbox to work. Therefore some similar code to this should work if we can attach it to a particular event. The Lightbox has a system for adding event calls, however these look to be jQuery events such as “ajaxComplete” and we’re unsure if these will work for GMap calls. Google Maps have event listeners for marker clicks but we could not see anywhere within the Google Maps Easy plugin to easily add any event listeners.
Are there any hook points to add manually once the map has loaded, or would it be possible to add them to the plugin?
Kind regards,
Tim
July 11, 2018 at 14:06 #18542

Anonymous
Inactive
Sorry, that last question should read ‘or would it be possible for you to add them to the plugin?’
July 11, 2018 at 16:30 #18544

Alex_support
Member
Hello, Tim.
I need to consult with our developer regarding your question. I’ll inform you when receive a reply.
July 12, 2018 at 01:30 #18551

Anonymous
Inactive
Thanks Alex, we look forward to learning what your developer thinks.
July 12, 2018 at 09:40 #18553

Alex_support
Member
Hello, Tim.
Please specify, which lightbox plugin do you use? Is it “Lightbox plugin by dFactory”? If so, please describe each step how you add it to the info window of the marker and what should happen by clicking on the marker (but not happening at this moment).
Your detailed answer helps our developer to provide a correct solution for you.
July 12, 2018 at 10:13 #18555

Anonymous
Inactive
Hello Alex,
Yes, as I said above we are using the Lightbox plugin by dFactory. We simply want to add a photo to the info window so that when a visitor clicks it it opens in a lightbox rather than simply linking to the bigger media file. The reason for wanting that is because at the moment on subsequently clicking the back button the whole maps reloads instead of keeping a cluster of markers open. The reason the Lightbox plugin isn’t working is that when the page loads and the lightbox JS is initiated the popup info windows don’t exist so are consequently out of the DOM when someone clicks on a thumbnail photo. We just need a hook in order to re-initiate the Lightbox JQuery. The hook point would be associated with each marker so when any one is clicked it also initiates Lightbox JS. We have got the lightbox working in our test by adding some link text ‘Initiate Lightbox’ with the following JS …
function(t) {
i.showLightbox(t)
}
But obviously we would prefer that clunky method was completely hidden and automatic.
I really don’t think I could explain this better than I have already.
Kind regards,
Tim
July 16, 2018 at 17:11 #18599

Anonymous
Inactive
Hello Alex,
Any word from the developer regarding hooks/event handlers yet?
Kind regards,
Tim
July 16, 2018 at 18:20 #18602

Alex_support
Member
Hello, Tim.
Plugin “Responsive Lightbox & Gallery” has an option – “Selector”: https://prnt.sc/k70ykf
You can specify the value for the “rel” parameter of the image reference there.
In practice it looks like this:
<a href="http://mywp/wp-content/uploads/2015/11/My-Dishes_1510643221.jpg" rel="lightbox"><img src="http://mywp/wp-content/uploads/2015/11/My-Dishes_1510643221-200x300.jpg" alt="" width="100" class="alignnone size-medium wp-image-813" /></a>
Please try it and let us know the results.
If you still have problems with it, please contact us via internal support and we’ll try to help you.
July 16, 2018 at 19:20 #18604

Anonymous
Inactive
Alex,
You are not reading my posts!
I started this thread by saying “According to that plugin I can insert a rel selector (lightbox) to trigger the effect but I can’t see where I can insert it. I have tried to add ‘lightbox’ to the Link Rel field in Image Details but it doesn’t do anything.”
I have also explained why it doesn’t work (“The underlying problem is that when the lightbox code is initiated the map popups don’t exist.”).
What is needed are hooks/event handlers attached to the popups/info windows which would enable us to add commands to re-initiate the lightbox JS, and then Rel should work.
Kind regards,
Tim
July 17, 2018 at 15:00 #18736

hetman.sumy
Member
Hello, Tim.
I don’t quite understand what exactly is not working for you. What have we done to test your request:
1. We installed plugin “Responsive Lightbox & Gallery”.
2. Than created new map and added there new marker.
3. For marker editing I switched to Text Editor (not Visual) and put there code:
<a href="https://i.ytimg.com/vi/1hR6lT2LBWI/maxresdefault.jpg" rel="lightbox"><img src="https://i.ytimg.com/vi/1hR6lT2LBWI/maxresdefault.jpg" alt="" width="100" class="alignnone size-medium wp-image-813" /></a>
4. This is how marker’s description looks on map preview from admin area: http://prntscr.com/k7gar7
5. Here is screenshot from frontpage: http://prntscr.com/k7gb2w
6. When I press on image preview in marker description, it will open lightbox image with image. Here is how it looks: http://prntscr.com/k7gbmp
You can close it without any problems.
NOTE: We didn’t add any event handlers – neither in general settings, no additional code – it is obvious that “Responsive Lightbox & Gallery” lightbox plug-in binds to DOM structure change events, or determines that an element with the selector it needed was added.
Can you try to add lightbox image to required marker description using this instructions and let us know the results?
July 17, 2018 at 17:07 #18737

Anonymous
Inactive
Thanks hetman.sumy,
It’s working! But only with SwipeBox. None of the other lightboxes work, perhaps the others do not have inbuilt DOM listeners, there was no sign of a conflict?
SwipeBox isn’t my favourite lightbox but at least it’s working now.
Problem solved. Thank you for your patience and time.
Kind regards,
Tim
Author
Posts