Я пытаюсь реализовать 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")%>
Очень возможно, что к тому моменту, когда интерпретатор 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
событие запускается после того, как все веб-сайт разметки и активы были загружены с сервера.