OKZoom, jQuery и Rails

0

Я пытаюсь реализовать okzoom в моем приложении rails, но, похоже, мне не очень повезло. Кажется, все в порядке. Я добавил файл javascript в свой каталог javascripts (app/assets/javascripts/okzoom.js), а также попытался использовать камень okzoom_rails, чтобы ошибиться на стороне осторожности. Редактор кода, по-видимому, разрешает функцию okzoom без проблем, но когда я запускаю сайт, я вижу следующую консольную ошибку:

Uncaught TypeError: undefined не является функцией

И если я использую инструменты отладки Chrome, чтобы разобраться в этом, проблема явно с моим вызовом okzoom - по какой-то причине веб-сайт не видит его.

Вот мой файл application.js:

 //= require jquery
 //= require jquery_ujs
 //= require fancybox
 //= require okzoom
 //= require turbolinks
 //= require_tree .

 $("a.fancybox")
     .fancybox( {
         'transitionIn': 'elastic',
         'transitionOut': 'elastic',
         helpers : {
             title : {
                 type: 'inside'
             }
         },
         beforeShow: function() {
             /*disable right click*/
             $.fancybox.wrap.bind("contextmenu", function (e){
                 return false;
             });
         }
     });

 $("img.zoomable")
      .okzoom({
         width: 200,
         height: 200,
         round: true,
         background: "#ffffff",
         backgroundRepeat: "repeat",
         shadow: "0 0 5px #000000",
         border: "1px solid black"
      });

У меня нет проблем с реализацией fancybox, и я следил за тем же шаблоном для okzoom, но не повезло. У кого-нибудь есть идеи?

ОБНОВИТЬ
Вот код для масштабируемого изображения:
<% = image_tag (p.file_info.fullPath, класс: "zoomable")%>

Теги:
jquery-plugins

1 ответ

0

Очень возможно, что к тому моменту, когда интерпретатор JavaScript попадает в строку, загружающую okzoom, что okzoom еще не был извлечен с сервера. Я бы предложил обернуть свой код следующим образом:

$(document).ready(function() {
  $("a.fancybox")
    .fancybox( {
      'transitionIn': 'elastic',
      'transitionOut': 'elastic',
      helpers : {
        title : {
          type: 'inside'
        }
      },
      beforeShow: function() {
        /*disable right click*/
        $.fancybox.wrap.bind("contextmenu", function (e){
          return false;
        });
      }
    });

  $("img.zoomable")
    .okzoom({
      width: 200,
      height: 200,
      round: true,
      background: "#ffffff",
      backgroundRepeat: "repeat",
      shadow: "0 0 5px #000000",
      border: "1px solid black"
  });
});

ready событие запускается после того, как все веб-сайт разметки и активы были загружены с сервера.

  • 0
    Спасибо за ответ. К сожалению, упаковка в документ. Уже не работает. Я все еще получаю ту же ошибку в той же строке кода.
  • 0
    Интересно, что если я удаляю // = require okzoom, я больше не получаю ошибку. Javascript по-прежнему не запускается, поэтому я не уверен, в чем проблема сейчас.
Показать ещё 6 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню