JCrop - FancyBox - Jcrop не работает должным образом - PullRequest
Новая
       17

JCrop - FancyBox - Jcrop не работает должным образом

1 голос
/ 15 февраля 2012

Jcrop хорошо работает без fancybox. Но если я загружаю Jcrop в Fancybox, я не могу обрезать изображения.

Изображения отображаются в браузере два раза. Я думаю, это должно быть проблемой css или чем-то еще.

Есть ли решение?

Ответы [ 2 ]

2 голосов
/ 03 апреля 2012

Обновление: В Fancybox 2 функция "onComplete" была переименована в "afterShow". Измените код соответствующим образом, если вы обновились:)

Попробуйте установить источник изображения и запустить Jcrop по обратному вызову "oncomplete" fancybox, и все должно работать нормально: 

<script type="text/javascript">
$(document).ready(function() {
  var imagetoload = '/path/to/yourimage.jpg' /* Set to your image here */
  $('.fancyboxitem').fancybox(
  {
    'content':'<div><img id="jcropImage" /></div>', 
    'onComplete':function() 
      {
        $('#jcropImage')
          .attr('src', imagetoload)
          .Jcrop(
            { 
            /* Jcrop settings here */
            },
            function() { $.fancybox.resize(); /*Jcrop onload callback */ }); 
      }
  });
});
</script>

<a href="#" class="fancyboxitem">Open fancybox</a>

Если вы не установили ширину и высоту объекта Jcrop и fancybox, вам нужно запустить $ .fancybox.resize () в качестве обратного вызова после загрузки объекта Jcrop. Поскольку вы загружаете изображения динамически, fancybox откроется с шириной и высотой 0 в противном случае.

Удачи!

1 голос
/ 29 июня 2012

Слегка адаптированная версия: 

$.fancybox({
    href : '/path-to-image.jpg',
    afterShow : function(){
        $( '.fancybox-inner' ).find( 'img' ).Jcrop({                    

        });
    }
});
...