Open photos in Lightbox

Home Forums Google Maps Plugin Open photos in Lightbox

This topic contains 15 replies, has 3 voices, and was last updated by Alex_support Alex_support 1 year, 1 month ago.

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #18446

    tim607332
    Participant

    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

    #18450
    Alex_support
    Alex_support
    Moderator

    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.

    #18451

    tim607332
    Participant

    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

    #18452
    Alex_support
    Alex_support
    Moderator

    Hello, Tim.

    OK, please let us know the results.

    #18522

    tim607332
    Participant

    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

    #18542

    tim607332
    Participant

    Sorry, that last question should read ‘or would it be possible for you to add them to the plugin?’

    #18544
    Alex_support
    Alex_support
    Moderator

    Hello, Tim.

    I need to consult with our developer regarding your question. I’ll inform you when receive a reply.

    #18551

    tim607332
    Participant

    Thanks Alex, we look forward to learning what your developer thinks.

    #18553
    Alex_support
    Alex_support
    Moderator

    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.

    #18555

    tim607332
    Participant

    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

    #18599

    tim607332
    Participant

    Hello Alex,

    Any word from the developer regarding hooks/event handlers yet?

    Kind regards,

    Tim

    #18602
    Alex_support
    Alex_support
    Moderator

    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.

    #18604

    tim607332
    Participant

    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

    #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?

    #18737

    tim607332
    Participant

    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

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

You must be logged in to reply to this topic.

Get plugins bundle today and save over 80%