CODEWITHSUNDEEP
jqueryfancybox-2
arunsark
arunsark

Reputation: 11

jQuery fancybox scrollbar

I am using jQuery fancybox2. The contents of the fancybox is an image from Amazon S3. The URL of the image is set dynamically. Some of the images are big and there is a slight delay in opening them.

My problem is that first time when the fancybox loads it is not able to show the scrollbar if the height of the image is more than viewport height. If I dismiss the fancybox and open it again scrollbar appears.

The code I am using is this (in CoffeeScript)

show: (offer) ->
  options = {
    fitToView  : true,
    autoSize  : true,
    autoCenter :  true,
    closeClick  : false,
    height : 'auto',
    openEffect  : 'fade',
    closeEffect  : 'fade',
    scrolling : 'auto',
    afterShow: ->
      $.fancybox.update()
  }
  $.fancybox($("div#imageModal"), options)

As you can see in afterShow I am calling update to resize the fancybox. The problem is that first time it calls afterShow before the s3 images finishes loading. From the next time as the image is cached in browser, it loads fast and fancybox adjusts its height and scrollbar appears.

How to make the scrollbar appear the first time?

Upvotes: 1

Views: 10758

Answers (2)

Carlos Carhuamaca
Carlos Carhuamaca

Reputation: 1

Change this:

'autoSize' : false

Upvotes: 0

Scott Gearhart
Scott Gearhart

Reputation: 1161

Try using afterLoad instead of afterShow.

See Callbacks section here: http://fancyapps.com/fancybox/#docs

Upvotes: 1

Related Questions