Fotorama doesn't initialize on hidden elements

[vojtechkral]

The documentation says:

<script>
  $(function () {
    // 1. Initialize fotorama manually.
    var $fotoramaDiv = $('#fotorama').fotorama();

    // 2. Get the API object.
    var fotorama = $fotoramaDiv.data('fotorama');

    // 3. Inspect it in console.
    console.log(fotorama);
  });
</script>

This doesn't work if $fotoramaDiv isn't displayed on page, because fotorama waits for the element to become displayed before creating an instance, which is pretty inconvenient for my use case, where I need to initialize fotorama before usage.

[velykov]

yes, +1 this issue is actual, how we can fix it?

[vojtechkral]

@velykov The logic is in file src/js/fn-fotorama.js. You can either remove the waitFor() wrapping or, if you don't want to modify fotorama, you can initialize fotorama yourself manualy by calling new $.Fotorama() and passing it all the existing configuration options including the default ones.

[vojtechkral]

Btw. I'm not sure why the waitFor() is used in the first place - I'd like to know if some part of fotorama code actually needs the element displayed...

[krtrice]

I'd also like to see this fixed!

[jangrewe]

+1

[velykov]

So, I don't modify anything in fotorama, because fotorama is in modal window, so i put modal in the end of page and call hide on document ready with jquery, it is work in my case, page is long, so user didn't see this trick.

[Kigot]

Hi everyone! Use: $.ajax({type: "GET", url: "/your_path/fotorama.js", dataType: "script"}); after creating fotorama's div.

[dongepulango]

Hi guys, if you're using Bootstrap modal do this:

$('#myModal').on('shown.bs.modal', function (e) {
  var $fotoramaDiv = $('#fotorama').fotorama();
  var fotorama = $fotoramaDiv.data('fotorama');
  console.log(fotorama);
});

[jangrewe]

@dongepulango yes, that works, but it still doesn't fix the issue that it doesn't work on hidden objects. The 'shown' event fires only after it is visible, but i want it to already start at 'show' - before it is visible.

[orionseye]

is it fixed almost 3 years later? I am fighting 1day+ on this. Who had this idea anyway? It's a big minus for this beautiful app.. still no glue how to make my hidden galleries (show onclick) show up.. i (think) tried everything

[devFinar]

It is not fixed :( I also wait for the fix.

[nschroyer]

@dongepulango You just made my day! This is exactly the problem I was having with the bootstrap modal. This worked like charm! If you were here I would hug you!

[VascoGamer]

Hello guys, finally I found something to look at... will try it and see

is it fixed almost 3 years later? I am fighting 1day+ on this. Who had this idea anyway? It's a big minus for this beautiful app.. still no glue how to make my hidden galleries (show onclick) show up.. i (think) tried everything

Same here

[VascoGamer]

@dongepulango You just made my day! This is exactly the problem I was having with the bootstrap modal. This worked like charm! If you were here I would hug you!

Hey Man, how did You do it? I'm still struggling to figure out how. I've been trying it for days now. Please help!

[orionseye]

@dongepulango The only way i managed to make it work, is to allow .fotorama to initialize on dom ready and adding a 'display:none' class to the elements with hidden fotorama sections. something like this:

// hide fotorma hidden sections by adding display none class // add to your stylesheet: .fotorama_hidden {display:none} jQuery('.fotorama_hidden').addClass('display-none');

//then initialize fotorama (whatever options you like) jQuery('.fotorama').fotorama({ width: '100%', minwidth: '360', height: '100%', maxheight: '320', ratio: 16/9 });

[VascoGamer]

@orionseye thank You so much for your kind reply.

I tried it just like you mentioned in the code above but still its not working.

Can I share my code with You if you don't mind?

Thanks,

Vasco

[nschroyer]

@vascogamer I used this code.

$('#myModal').on('shown.bs.modal', function (e) { var $fotoramaDiv = $('#fotorama').fotorama(); var fotorama = $fotoramaDiv.data('fotorama'); console.log(fotorama); });

[orionseye]

@VascoGamer sorry, i messed the user names and css thing. the css should be: .display-none {display:none}, because we add the class to the fotorama section, which holds the hidden slider Anyway, fell free to share your code, i am sure we temp. override the issue. Still, this does not fix the initial problem. @nschroyer solution could work too, if you're using bootstrap. My solution was applied to toggle hidden elements which hold the sliders

[VascoGamer]

Hello @nschroyer and @orionseye,

I really appreciate the fact that You're both trying to help me solve my problem.

<script>
    fotoramaDefaults = {
        width: 700,
        maxwidth: '100%',
        ratio: 16 / 9,
        allowfullscreen: true,
        nav: 'thumbs'
    }
</script>
<script src="../libs/fotorama-4.6.4/fotorama.js"></script>

1. So I launch my modal event here: $('#ImgVwr').on('shown.bs.modal', function (e) { var $fotoramaDiv = $('#fotorama').fotorama(); var fotorama = $fotoramaDiv.data('fotorama'); console.log(fotorama); });

2. Then I have my boostrap modal

   <div class="modal" id="ImgVwr" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" data-backdrop="true">
       <div class="vertical-alignment-helper">
           <div class="modal-dialog modal-lg vertical-align-center" role="document">
               <div class="modal-content">
                   <div class="modal-header bg-primary">
                       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                       <h4 class="modal-title" id="exampleModalLabel5">Gallery</h4>
                   </div>
                   <div class="modal-body body" style="background-color: #808080;">                                          
                       <!-- Add images to <div class="fotorama"></div> -->
                       <div class="fotorama" data-thumbfit="cover" data-transition="slide" data-allowfullscreen="true" data-clicktransition="crossfade"  data-auto="false"  data-hash="true" data-keyboard='{"space": true, "home": true, "end": true, "up": true, "down": true}'" data-loop="true" data-arrows="true" data-click="true" data-swipe="false" data-nav="thumbs" data-width="100%" data-height="70%" ></div>
                   </div>
               </div>
           </div>
       </div>
   </div>

3- Then I'm loading the images from the database function ViewGallery() { $.ajax({ type: "POST", url: window.location.pathname + "/FILE_VIEW_FILES", data: "{'ID':'" + $('#lblID').html() + "'}", dataType: "json", contentType: "application/json; chatset=utf-8", beforeSend: function() {
}, success: function (res) {
var obj = JSON.parse(res.d);
var img; var i = 0; $.each(obj.FilesList, function (index, value) { i++; if (value.filer.length > 1) { $('.fotorama').fotorama({ data: [ { id: i, img: 'data:image/png;base64,' + value.filer, thumb: 'data:image/png;base64,' + value.filer }, ] }); } }); }, complete: function () { }, error: function (xhr, status, error) { alert(error); }, });

Can you guys please tell me what am I doing wrong?

Much appreciated.

Vasco

[VascoGamer]

Guys @nschroyer and @orionseye,

I followed your advice and it's partially working as seen in the images below BUT: 1- It shows the same image 3 times 2- When I open the Modal the second time it shows it in a very small thumb

Your help is much appreciated.

Thanks!

On Thu, Jun 13, 2019 at 4:11 PM orionseye notifications@github.com wrote:

@VascoGamer https://github.com/VascoGamer sorry, i messed the user names and css thing. the css should be: .display-none {display:none}, because we add the class to the fotorama section, which holds the hidden slider Anyway, fell free to share your code, i am sure we temp. override the issue. Still, this does not fix the initial problem. @nschroyer https://github.com/nschroyer solution could work too, if you're using bootstrap. My solution was applied to toggle hidden elements which hold the sliders

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/artpolikarpov/fotorama/issues/406?email_source=notifications&email_token=AH443UVPG6QH4AFN6W7OHILP2JPSXA5CNFSM4BFKX75KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODXUAQ4I#issuecomment-501745777, or mute the thread https://github.com/notifications/unsubscribe-auth/AH443UUEKH5GWRAWRFFJF6DP2JPSXANCNFSM4BFKX75A .

-- Vasco Cubenda 'The Apprentice'

[pandanapande]

Still same issue: after opening modal no fotorama is working.