Show image in fancybox

  • Hi,
    when I add a marker with picture, clicking on picture in the map it opens the larger size in a new tab.

    Is there any way to open it in “fancy-box” (p.e. with an class=”fancybox image”) in a href tag, or in some other ways ?

    thanks

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Joe

    (@morehawes)

    Hi @sunlight1976,

    Thanks for the suggestion, this would be a nice feature. It will require some work to integrate, so I will add it to the “to-do” list.

    It is however possible to get this working by adding some JavaScript to your page, I have put together an example of how this can be achieved here.

    I hope that helps.

    Joe

    Thread Starter sunlight1976

    (@sunlight1976)

    Hi
    Thank, but you example looks great in PC but not working in mobile (it opens image in new page)
    Using chrome
    EDIT:
    Yesterday your example worked..
    Today I tried again and it is not working… Curious…
    (i tried both chrome and firefox)

    • This reply was modified 4 years, 9 months ago by sunlight1976.
    Plugin Author Joe

    (@morehawes)

    Hi @sunlight1976,

    Ah yes, I made a change that broke the example. It is working again now.

    I did a quick test on mobile and everything is working correctly for me. However the code I provided is intended merely as a quick and dirty example of how such a plugin could be integrated, and not “polished” code.

    I hope this helps and I will give more thought to a proper integration for the future.

    Cheers,

    Joe

    Thread Starter sunlight1976

    (@sunlight1976)

    Hi,
    I’m not good with jQuery.
    I tried to add your jquery script in my custom post template, but it’s not working (I can see it in page source).

    Could you please take a look at it?
    Test page is: https://**www.lemiecime.it**/monte-plische/ (please remove ** )

    Plugin Author Joe

    (@morehawes)

    Hi @sunlight1976,

    I can see that the code I provided is doing it’s job correctly (i.e. adding the data-fancybox="gallery" attribute to Waymark image links), however it does not seem to be tying in with the Fancybox plugin correctly. Perhaps this is because the Facybox version you are using is different somehow. You could try modifying the jQuery code as follows:

    jQuery(document).on('hover', '.waymark-map .waymark-info-image_large_url a', function () {
  jQuery(this).addClass('fancybox image');
  jQuery(this).attr('rel', 'gallery');
});

    I also noticed that there is a console error on your site, which could be the reason it is not working.

    If neither of those work, then I do not know what to else to suggest. Good luck with figuring it out!

    Joe

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Show image in fancybox’ is closed to new replies.