Fancybox not working in sidebar

[juliettefabre]

Hi,

I'm trying to use the Fancybox library in the sidebar of a map made with leaflet 1.3.1. When I click on a marker, I get from the database a list of photos associated to the marker. Then I open the sidebar to display them inside the sidebar with Fancybox, but photos don't "open" with fancybox (then open in a new tab of the browser). The code works fine if it's not contained in the leaflet sidebar.

<a class="fancybox thumbnail" rel="gallery" href=myphoto.jpg" title="myphoto">
<img class="img-responsive" src="myphoto.jpg"/>
</a>

<script>
$(function() {              
    $(".fancybox").fancybox({           
        'titlePosition'  : 'inside'      
    });
});
</script>

I found a similar question about using fancybok in a leaflet popup, but it does not change anything when I specify in my leaflet map javascript:

$(function() {      
    my_map.control.sidebar.on('shown', function () {
        $(".fancybox").fancybox({           
            'titlePosition'  : 'inside'      
        });
    });
});

Any idea? Thanks!

[adriennn]

if i understood correctly, your ".fancybox" link is not in the sidebar? then if you listen to the shown sidebar event, you must select the sidebar html node with jquery to put the fancybox images there and not select with .fancybox again.

but i would do something like

sidebar.setContent($.fancybox.open(...options)); sidebar.show();

for the options to be passed to the fancybox open method, look at http://fancyapps.com/fancybox/3/docs/#api

hth!

On Thu, 13 Sep 2018, 11:21 juliettefabre, notifications@github.com wrote:

Hi,

I'm trying to use the Fancybox library in the sidebar of a map made with leaflet 1.3.1. When I click on a marker, I get from the database a list of photos associated to the marker. Then I open the sidebar to display them inside the sidebar with Fancybox, but photos don't "open" with fancybox (then open in a new tab of the browser). The code works fine if it's not contained in the leaflet sidebar.

<a class="fancybox thumbnail" rel="gallery" href=myphoto.jpg" title="myphoto">

I found a similar question https://stackoverflow.com/questions/33481776/open-fancybox-iframe-when-click-on-a-link-in-a-leaflet-popup about using fancybok in a leaflet popup, but it does not change anything when I specify in my leaflet map javascript:

$(function() {
my_map.control.sidebar.on('shown', function () { $(".fancybox").fancybox({
'titlePosition' : 'inside'
}); }); });

Any idea? Thanks!

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/Turbo87/leaflet-sidebar/issues/58, or mute the thread https://github.com/notifications/unsubscribe-auth/AGwSlIdBf94p0gVKUCRGa7GOPtx4CUQ4ks5uahVtgaJpZM4WmycI .

[juliettefabre]

Thanks Adrien for your answer,

The fancybox links are located inside the sidebar. Actually here is the initial map workflow (that you can see here):

I create a Leaflet map with some features (stations).

Inside the "map" div, I create an HTML "sidebar" div for the sidebar, and inside this another "all_info_station" div for the dynamic station information. In the "sidebar" div, I create a sidebar control.

When a station is clicked:

• I perform an Ajax request to get HTML formatted station information (from the database).
• This HTML code contains the fancybox links for a set of photos (see the "Photos" tab), and the javascript to call fancybox:

  <a class="fancybox thumbnail" rel="gallery" href=myphoto.jpg" title="myphoto">
  <img class="img-responsive" src="myphoto.jpg"/>
  </a>
  $(function() {              
  $(".fancybox").fancybox({ 'titlePosition'  : 'inside' });
  });

• I finally put the HTML station information inside the "all_info_station" div, and show the sidebar:

  $.ajax({
  type: "POST",
  url: my_url,
  data: my_data,
  dataType: 'html',
  success: function (output) {
      $('#all_info_station').html(output);
      sidebar.show();
  }
  });

  I guess there's something I don't really get because we use a homemade javascript library to help us to create our leaflet maps, and I don't really master it :)

[adriennn]

maybe you need to initialize the fancybox with the images data only after you have made the ajax call, look at the api, especially .open() method as suggested above. Also, with the full example available it's much clearer what the problem is: you actually want the images to be displayed in a carousel-style overlay and the background shadowed.

On Fri, Sep 14, 2018 at 10:41 AM juliettefabre notifications@github.com wrote:

Thanks Adrien for your answer,

The fancybox links are located inside the sidebar. Actually here is the initial map workflow (that you can see here https://data.oreme.org/carnoules/carnoules_map):

I create a Leaflet map with some features (stations).

Inside the "map" div, I create an HTML "sidebar" div for the sidebar, and inside this another "all_info_station" div for the dynamic station information. In the "sidebar" div, I create a sidebar control.

When a station is clicked:

• I perform an Ajax request to get HTML formatted station information (from the database).
• This HTML code contains the fancybox links for a set of photos (see the "Photos" tab), and the javascript to call fancybox:

<a class="fancybox thumbnail" rel="gallery" href=myphoto.jpg" title="myphoto">

$(function() {
$(".fancybox").fancybox({ 'titlePosition' : 'inside' }); });

• I finally put the HTML station information inside the "all_info_station" div, and show the sidebar:

  $.ajax({ type: "POST", url: my_url, data: my_data, dataType: 'html', success: function (output) { $('#all_info_station').html(output); sidebar.show(); } });

I guess there's something I don't really get because we use a homemade javascript library https://data.oreme.org/assets/js/leaflet_plugins/Util.js to help us to create our leaflet maps, and I don't really master it :)

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/Turbo87/leaflet-sidebar/issues/58#issuecomment-421260457, or mute the thread https://github.com/notifications/unsubscribe-auth/AGwSlHSvEyeYiqnbpaqH17i-2Gvoyz0bks5ua12fgaJpZM4WmycI .

[juliettefabre]

thanks Adrien, the only (and not good!) solution working for the moment is to use fancybox2 and to specify an HTML "onclick" in my links:

<a class="fancybox thumbnail" rel="gallery" href=myphoto.jpg" title="myphoto" onclick="$.fancybox(this);return false;">
<img class="img-responsive" src="myphoto.jpg"/>
</a>

Moreover, this solution does not seem to support the gallery. To use the api and .open() method I need to get my images in json, while what I get with my ajax request is HTML formatted data. And for now I don't see how to separate these two operations in my workflow.. I'll see later if we finally integrate a real web developer in my team! :)

[adriennn]

yes I see that the ajax returns pre-rendered html, maybe the script tag in that pre-rendered html is not parsed once it hits the page? I couldnt find from where the ajax call is sent, but make sure it has dataType: html in the request options. edit: you can also do the same carousel effect with a modal in bootstrap, which is loaded as well on the page.

[juliettefabre]

Thanks Adrien. The javascript is indeed parsed in the pre-rendered html, and the ajax dataType is html. The ajax is called in our generic homemade library ..