JFlip jQuery plugin - not loading images

Я хочу создать эффект поворота страницы в стиле книги на некоторых изображениях, поэтому я решил использовать JQuery-плагин JFlip. Плагин, похоже, делает то, что он должен делать, кроме отображения изображения. Я проверил вкладку «Сеть», и изображения загружаются. Кроме того, я вижу элемент Canvas, созданный JFlip, но это просто пустое пространство.JFlip jQuery plugin - not loading images

У меня есть некоторый код:

<ul id="g1"> 
    <li> 
     <img src="img/proforma.jpg"> 
    </li> 
    <li> 
     <img src="img/proforma2.jpg"> 
    </li> 
    </ul>

и некоторые JavaScript:

<script src="http://code.jquery.com/jquery.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/jquery.jFlip.js"></script> 
<script type="text/javascript"> 

$("#g1").jFlip(700,230,{background:"green",cornersTop:false}); 


</script>

источник

2013-08-14 Steve W.

Это работа, только плагины немного старый. Смотрите мой код ниже:

HTML:

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery.min.js"></script> 
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" /> 
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" /> 
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script> 
    <!--[if IE]><script type="text/javascript" src="http://www.jquery.info/scripts/jFlip/excanvasX.js"></script><![endif]--> 

    <script src="http://www.jquery.info/scripts/jFlip/jquery.jflip-0.3.js"></script> 
    <script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
</head> 
<body> 
    <ul id="g1"> 
    <li> 
     <img src="http://keith-wood.name/img/calendar.gif"> 
    </li> 
    <li> 
     <img src="http://keith-wood.name/img/calendar.gif"> 
    </li> 
    </ul> 
</body> 
</html>

JS:

$("#g1").jFlip(700,230,{background:"green",cornersTop:false});

Смотреть полное решение здесь: http://jsbin.com/iqaran/1/edit. Запомнить run with js in jsbin

Cheers!

источник

2013-08-14 20:51:14

Спасибо, сэр! Работает отлично. –

Несомненно, рад помочь. –

У меня проблема с изображением в другом вопросе, который вы тоже должны проверить. –

Оказывается, что сценарий так стара (2008), вы должны включать JQuery миграции сценария.

JSFiddle

Сценарии

<script src="http://code.jquery.com/jquery.js"></script> 
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/jquery.jFlip.js"></script>

HTML

<ul id="g1"> 
    <li> 
     <img src="http://placehold.it/300x300"/> 
    </li> 
    <li> 
     <img src="http://placehold.it/300x300" /> 
    </li> 
</ul>

Также убедитесь, чтобы обернуть ваш исполняемый код в document.ready поэтому изображения получают изменение рендера.

<script> 
$(document).ready(function() { 
    $("#g1").jFlip(700,230,{background:"green",cornersTop:false}); 
}); 
</script>

источник

2013-08-14 20:32:12

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

Обновленный ответ, вы также захотите обернуть выполнение плагина на готовой обертке DOM. Если это не сработает, значит, это проблема с вашими изображениями, так как в обоих ответах она работает. –

JFlip jQuery plugin - not loading images

ответ

Смежные вопросы