проблема с плагином
Здравствуйте товарищи. Как заставить работать плагин после загрузки элемента через ajax с которыми плагин непосредственно работает.
сам плагин вот: http://darsa.in/sly/ |
дёрнуть вызов плагина после загрузки
|
как же я сам не догадался....
|
может вы покажите практический пример? на сайте разработчика есть примеры, но они почему то не работают или может я чего не понимаю
https://github.com/Darsain/sly/wiki/Calling |
А что за элемент ты грузишь аяксом? Ты пример маленький приведи хотя бы, так тебе может помогут. Я правда понятия не имею о каком плагине пишешь. ))
|
подгружаю вот это. это слайдер, точнее его оболочка
<div class="frame" id="centered"> <ul class="clearfix"> </ul> </div>
function Template_download(tmp)
{
var tmp=slaider;
$.post("templates/"+tmp+".html", 1, function(data) {
$("#content").html(data);
});
}
здесь пример работы слайдера, но это когда слайдер загружен сразу, а мне нужно чтобы он подгружался уже после загрузки страницы http://darsa.in/sly/examples/horizontal.html |
Я так понимаю ты его уже установил и он у тебя работает сразу же как только загрузилась страница? А ты хочешь что бы он у тебя появлялся на страничке только после какого то события?
Какой JS код ты сейчас используешь для запуска плагина? После какого события у тебя должен появляться или запускаться слайдер? |
Цитата:
|
Цитата:
в том то и дело что я плагин никак не вызываю. он автоматически начинает работать. его вызов видимо по умолчанию прописан в коде, а как его вызвать самому не знаю. |
Цитата:
|
Цитата:
|
$('.frame').sly('init'); видимо вот этот код инициализирует плагин, но куда эту строчку поставить, нигде не работает
|
Цитата:
Цитата:
|
Цитата:
|
возможно инициализируется как-то по другому
|
Я вчера пытался минут 30 установить этот плагин и так и не смог... ))) Я так и не понял как его инициализировать. :D
|
Цитата:
<script type="text/javascript" src="js/sly.min.js" ></script> <script type="text/javascript" src="js/horizontal.js" ></script> <script type="text/javascript" src="js/plugins.js" ></script> <script type="text/javascript" src="js/hoverIntent.min.js"></script> |
А разве он не долже работать только на sly.js и jquery.js? Вроде именно так я понял с моим никаким английским. У тебя без остальных скриптов не работает?
|
без остальных нет
|
А где ты скачал остальные скрипты и главное где написано на главном сайте что они тоже нужны?
Просто меня терзают сомнения что у тебя всё работает и без sly.js |
про это нигде не написано, пришлось методом тыка подключать другие файлы и заработало. я так понял там для разных браузером просто реализовано перемещение (drag). остальные скрипты взял со странички с примерами
http://darsa.in/sly/examples/horizontal.html |
Вложений: 1
вот архив zip для удобства
|
Я не знаю зачем там нужны дополнительные скрипты, наверное для каких то эффектов. Вот что выходит у меня:
<div id="testFrame">
<ul class="slidee">
<li><img src="http://lorempixel.com/400/200/sports/1/" /></li>
<li><img src="http://lorempixel.com/400/200/sports/2/" /></li>
<li><img src="http://lorempixel.com/400/200/sports/3/" /></li>
<li><img src="http://lorempixel.com/400/200/sports/4/" /></li>
<li><img src="http://lorempixel.com/400/200/sports/5/" /></li>
</ul>
<div id="forw"> -> </div>
<div id="back"> <- </div>
</div>
<div id="show">show</div>
СSS:
#testFrame{
width: 600px;
display: none;
}
#testFrame ul li img {
width: 200px;
float: left;
}
var sly12 = new Sly('#testFrame', {
horizontal: true, // Switch to horizontal mode.
// Item based navigation
itemNav: 'centered', // Item navigation type. Can be: 'basic', 'centered', 'forceCentered'.
itemSelector: null, // Select only items that match this selector.
smart: true, // Repositions the activated item to help with further navigation.
activateOn: 'click', // Activate an item on this event. Can be: 'click', 'mouseenter', ...
activateMiddle: true, // Always activate the item in the middle of the FRAME. forceCentered only.
// Scrolling
scrollSource: null, // Element for catching the mouse wheel scrolling. Default is FRAME.
scrollBy: 10, // Pixels or items to move per one mouse scroll. 0 to disable scrolling.
// Dragging
dragSource: null, // Selector or DOM element for catching dragging events. Default is FRAME.
mouseDragging: true , // Enable navigation by dragging the SLIDEE with mouse cursor.
touchDragging: true, // Enable navigation by dragging the SLIDEE with touch events.
releaseSwing: true, // Ease out on dragging swing release.
swingSpeed: 0.1, // Swing synchronization speed, where: 1 = instant, 0 = infinite.
elasticBounds: true, // Stretch SLIDEE position limits when dragging past FRAME boundaries.
// Scrollbar
scrollBar: null, // Selector or DOM element for scrollbar container.
dragHandle: true, // Whether the scrollbar handle should be draggable.
dynamicHandle: true, // Scrollbar handle represents the ratio between hidden and visible content.
minHandleSize: 50, // Minimal height or width (depends on sly direction) of a handle in pixels.
clickBar: true, // Enable navigation by clicking on scrollbar.
syncSpeed: 0.5, // Handle => SLIDEE synchronization speed, where: 1 = instant, 0 = infinite.
// Pagesbar
pagesBar: null, // Selector or DOM element for pages bar container.
activatePageOn: null, // Event used to activate page. Can be: click, mouseenter, ...
pageBuilder: // Page item generator.
function (index) {
return '<li>' + (index + 1) + '</li>';
},
// Navigation buttons
forward: 'div#forw', // Selector or DOM element for "forward movement" button.
backward: 'div#back', // Selector or DOM element for "backward movement" button.
prev: 'div#prev', // Selector or DOM element for "previous item" button.
next: 'div#next', // Selector or DOM element for "next item" button.
prevPage: null, // Selector or DOM element for "previous page" button.
nextPage: null, // Selector or DOM element for "next page" button.
// Automated cycling
cycleBy: 'items', // Enable automatic cycling by 'items' or 'pages'.
cycleInterval: 1500, // Delay between cycles in milliseconds.
pauseOnHover: true, // Pause cycling when mouse hovers over the FRAME.
startPaused: 0, // Whether to start in paused sate.
// Mixed options
moveBy: 300, // Speed in pixels per second used by forward and backward buttons.
speed: 300, // Animations speed in milliseconds. 0 to disable animations.
easing: 'swing', // Easing for duration based (tweening) animations.
startAt: 0, // Starting offset in pixels or items.
keyboardNavBy: null, // Enable keyboard navigation by 'items' or 'pages'.
// Classes
draggedClass: 'dragged', // Class for dragged elements (like SLIDEE or scrollbar handle).
activeClass: 'active', // Class for active items and pages.
disabledClass: 'disabled' // Class for disabled navigation elements.
});
$('#show').click(function(){
$('#testFrame').css('display', 'block');
sly12.init()
});
Конечно настройки никакие, но я и не стал вдаваться. Но вроде работает на JQuery.js и Sly.js. Я не понимает зачем тебе его грузить слайдер аяксом? |
потому что контент у меня динамический, и он меняется шаблоны подгружаются разные, там и слайдер присутсвует
|
Ты же ициализируешь через fly.init()? Ну попробуй тогда:
$("#content").html(data, function(){
fly.init(); //или как там запускается у тебя...
} )
Я просто не понимаю что за переменная data у тебя там. |
Цитата:
|
Так значит это у тебя концовка функции ajax. Делай как тебе и писал Dank.js - просто ставь после загрузки:
success:
function(data)
{
$('#content').html(data);
fly.init();
},
|
поставил. плагин не инициализируется и появилась ошибка
Uncaught TypeError: Cannot read property 'style' of undefined sly.min.js:218 |
data это кусок html со слайдером?
Вот именно в этот кусок и вставь весь JS скрипт, который относиться к этому сладеру:
<div id="testFrame">
<ul class="slidee">
<li><img src="http://lorempixel.com/400/200/sports/1/" /></li>
<li><img src="http://lorempixel.com/400/200/sports/2/" /></li>
<li><img src="http://lorempixel.com/400/200/sports/3/" /></li>
</ul>
</div>
<script>
jQuery(function(){
//вот тут вставляй весь код слайдера + его инициализация
});
</script>
|
да
|
он первоначально пуст, без картинок. но он и без них должен инициализироваться. а потом я добавляю в него картинки и просто перезагружаю плагин
function Download_album (str) {
$(".clothing").html('<img src="images/loader.gif">');
$.post("download_album.php", {str:str}, function(data) {
$(".clothing").html('');
$(".clearfix").html(data);
$('.frame').sly('reload');
});
}
|
Цитата:
|
заработало!! товарищи, а в чем был секрет?
|
Ну разница есть. Ты загрузи в div кусок HTML и нажми ctrl + U. Ты не найдёшь там свой кусок, хотя ты знаешь о том что он там есть. Но работать с элементами этого куска HTML ты уже не сможешь через скрипт которым ты его загрузил этот кусок. А вот другим скриптом, внутренним, как я и указал в примере сможешь.
Хотя может люди меня попровят и я сам узнаю много что нового, но именно поэтому я иногда отказываюсь от загрузки html. Так что кто то не опровергнет мои слова, пиши весь JS внутри HTML, котоый подгружаешь. Или ставь слайдер сразу же в основной HTML и просто делай невидимым, пока он тебе не понядобится. Именно тут проблем у тебя точно не будет. |
спасибо всем
|
но так и не скажешь ведь сразу))... Косяк может быть в том, что у тебя сейчас работают два скрипта отдельно. Ты не грузи сам HTML кусок, а просто спрячь его. Посмотри как я его спрятал в первом примере... а аяксом грузи только данные из базы данных: ссылки, сыылки на картинки, и тд... Если и даже грузишь HTML кусок, то убидесь что внутренний скрипт полностью независим от твоего главного скрипта. Именно тут идёт у тебя где то косяк.
|
Цитата:
Скриптам пофиг как был построен DOM. Главное - чтобы на момент вызова скрипта все нужные элементы уже присутствовали. Вот и все. |
вообщем надо было сделать так, кому будет интересен этот плагин
<script>
jQuery(function(){
(function () {
var $frame = $('#centered');
var $wrap = $frame.parent();
// Call Sly on frame
$frame.sly({
horizontal: 1,
itemNav: 'centered',
smart: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 2,
scrollBar: 0,
scrollBy: 1,
pagesBar: $wrap.find('.pages'),
activatePageOn: 'click',
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,
// Buttons
prev: $wrap.find('.prev'),
next: $wrap.find('.next')
});
}());
});
</script>
|
с созданием объекта как предложено было почему то глючно работает. тут и инициализировать не нужно, просто код вставить нужно в сам шаблон, который будет подгружаться
|
| Часовой пояс GMT +3, время: 02:43. |