在加载Ajax的内容上加载滑块 [英] Load Slider on ajax loaded content
本文介绍了在加载Ajax的内容上加载滑块的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用的滑块是这样的： http：// www。 stunicholls.com/gallery/jquery-slide-anything.html
它可以在一个普通的html上正常工作，但是当我把它加载到ajax上时已加载的内容不再工作，我该如何解决它？
这是滑块的js：
$（window）.load（function（）{
/ *只需设置一个变量* /
speed = 600;
tabColor ='＃069';
tabCurrent ='＃09c';
/ *设置幻灯片和第一张图片的初始状态* /
var picVar = $（'。iStu12 li.images div.slide div.slidePanel'）;
totPic = picVar.length;
curPicWidth = picVar.eq（0）.width（）;
curPicHeight = 480;
totWidth = 0;
/ *计算图像的总宽度并设置div.slide匹配* /
$ .each（（picVar）， function（）{
caption = $（this）.attr（'caption'）;
$（'。iStu12 li.caption'）。append（'< b> + caption +'< / b>'）;
totWidth = totWidth + $（this）.width（）;
}）;
$（'ul.iStu12 li.images div.slide'）。width（totWidth）;
current = 0;
var captionVar = $（'。iStu12 li.caption b'）;
tabSet（）
/ *调整包含元素，左/右箭头位置并添加第一个图像标题* /
resize（curPicWidth，curPicHeight）
/ * monitor'next'clicks * /
$（'。iStu12 li.next'）。click（function（）{
picVar = $（'。iStu12 li。图片div.slide div.slidePanel'）;
/ *为图片行留下一张照片 - 然后从设置中删除第一张图片，使其成为最后一张图片，最后将设置移至绝对位置left：0 * /
curPicWidth = picVar.eq（0）.width（）;
curPicHeight = 480;
$（'ul.iStu12 li.images div.slide'）。animate （{left：-curPicWidth}，speed，
function（）{
$（'ul.iStu12 li.images div.slide'）。find（'div.slidePanel：first'）。remove ）.appendTo（'ul.iStu12 li.images div.slide'）;
$（'ul.iStu12 li.images div.slide'）.css（'left'，'0px'）;
}）;
/ *获取当前显示图像的宽度，高度和alt * /
curPicWidth = picVar.eq（1）.width（）;
curPicHeight = 480;
/ *使包含元素和左/右箭头位置动画匹配当前图像* /
resize（curPicWidth，curPicHeight）
current ++
if（current == totPic）{当前= 0;}
tabSet（）
}）;
$ b $ * monitor'previous'clicks * /
$（'。iStu12 li.prev'）。click（function（）{
/ *获取最后一张图片设置并使其成为拳头图像，然后将该设置的左侧位置设置为减去新的第一个图像的宽度* /
$（'ul.iStu12 li.images div.slide'）。find（'div .slidePanel：last'）。remove（）。prependTo（'ul.iStu12 li.images div.slide'）;
picVar = $（'。iStu12 li.images div.slide div.slidePanel'）;
curPicWidth = picVar.eq（0）.width（）;
curPicHeight = 480;
$（'ul.iStu12 li.images div.slide'） .css（'left'， - curPicWidth）;
/ *将第一张图片设为左侧= 0 * /
$（'ul.iStu12 li.images div.slide'）。animate（{left ：0}，speed）;
/ *为包含元素，左/右箭头位置设置动画以匹配当前图像并更改标题* /
resize（curPicWidth，curPicHeight）
current -
if（current == - 1）{current = totPic-1;}
tabSet（）
}）;
$ b $ * * tab click routine * /
$（'。iStu12 li.caption b'）。click（function（）{
clicked = $（this）.index ）
/ *如果在当前标签的右边然后向左滑动* /
if（点击>当前）{
rotate =点击当前;
picVar = $（' .iStu12 li.images div.slide div.slidePanel'）;
curPicWidth = 0;
for（var i = 0; i< rotate; i ++）{
curPicWidth = curPicWidth + picVar.eq（i）.width（）;
}
$（'ul.iStu12 li.images div.slide'）。animate（{left：-curPicWidth}，{queue：false ，duration：speed，
complete：function（）{
for（var n = 0; n
$（'ul.iStu12 li.images div.slide'）的CSS（ '左'， '0像素'）;
}}
}）;
/ *获取当前显示图像的宽度，高度和alt * /
curPicWidth = picVar.eq（rotate）.width（）;
curPicHeight = picVar.eq（rotate）.height（）;
/ *使包含元素和左/右箭头位置动画匹配当前图像* /
resize（curPicWidth，curPicHeight）
current = clicked;
tabSet（）
}
/ *如果在当前选项卡的左侧，则向右滑动* /
if（click< current）{
rotate = current-点击;
picVar = $（'。iStu12 li.images div.slide div.slidePanel'）;
curPicWidth = 0; （var i = 0; i< rotate; i ++）{
curPicWidth = curPicWidth + picVar.eq（totPic-1）.width（）;
。 $（'ul.iStu12 li.images div.slide'）。find（'div.slidePanel：last'）。remove（）。prependTo（'ul.iStu12 li.images div.slide'）;
$ b $（'ul.iStu12 li.images div.slide'）。css（{left：-curPicWidth，
complete：function（）{
/ *将第一张图像设置为左侧= 0 * /
$（'ul.iStu12 li.images div.slide'）。animate（{left：0}，speed）;
}
}）;
/ *获取当前显示图像的宽度，高度和alt * /
picVar = $（'。iStu12 li.images div.slide div.slidePanel'）;
curPicWidth = picVar.eq（0）.width（）;
curPicHeight = 480;
/ *使包含元素和左/右箭头位置动画匹配当前图像* /
resize（curPicWidth，curPicHeight）
current = clicked;
tabSet（）
}
}）;
$ b $（'。iStu12 li.caption b'）。mouseover（function（）{
if（$（this）.index（）！== current）{
$（this）.css（'background'，tabCurrent）;
}
}）。mouseout（function（）{
if（$（this）.index（）！== current ）{
$（this）.css（'background'，tabColor）;
}
}）;
函数tabSet（）{
captionVar.css（'background'，tabColor）;
captionVar.eq（current）.css（'background'，tabCurrent）;
$ * b
$ *调整包含元素，左/右箭头位置并更新标题* /
function resize（w，h）{
$（ '.iStu12'）。animate（{width：w，height：h}，speed）;
$（'。iStu12 li.images'）。animate（{width：w，height：h}，speed）;
}
}）;
我正在以这种方式加载：
< script type =text / javascriptsrc =js / loader.js>< / script>
< script type =text / javascriptsrc =js / stu12.js>< / script>
首先是ajax内容，然后是滑块的js
这是loader.js的内容：
$（document）.ready（function（）{
//当页面加载
$（＃content）时加载回家。load（home.html，function（）{
$（this）.fadeIn （slow）;
}）;
//载入艺术品页面
$（＃artwork> a）。click（function（）{
$（＃content）。hide（）;
$（＃content）。load（artworks.html，function（）{
$（this）.fadeIn（slow ）;
}）;
}）;
//载入项目页面
$（＃artwork ul li a）。click（function（） {
$（＃content）。hide（）;
$（＃content）。load（project.html，function（）{
$（this）。 fadeIn（slow）;
}）;
}）;
//载入单个项目页面
$（＃project_page）。live（点击，函数（）{
$（＃content）。hide（）;
$（＃content）。load（project.html，函数（）{
$（this）.fadeIn（slow）;
}）;
}）;
//载入单个项目页面
$（＃project_slider）。live（click，function（）{
$（＃content）。hide ）;
$（＃content）。load（project_inside.html，function（）{
$（this）.fadeIn（slow）;
}）;
}）;
//返回到项目页面
$（。back）。live（click，function（）{
$（＃content）。hide ）;
$（＃content）。load（project.html，function（）{
$（this）.fadeIn（slow）;
}）;
}）;
//载入prensa页面
$（＃prensa_nav）。click（function（）{
$（＃content）。hide（）;
$（＃content）。load（prensa.html，function（）{
$（this）.fadeIn（slow）;
}）;
}） ;
$ b $ //载入contacto页面
$（＃contacto_nav）。click（function（）{
$（＃content）。hide（）;
$（＃content）。load（contacto.html，function（）{
$（this）.fadeIn（slow）;
}）;
}） ;
$ b $ //活动菜单项
$（function（）{
$（'＃menu li'）。click（function（）{
$（'＃菜单li'）。each（function（）{
$（this）.removeClass（'active'）;
}）;
$（this）.addClass（'active'）;
}）;
}）;
$ b / *菜单下拉菜单* /
$（document）.ready（function（$）{
// Add class drop of if item有子菜单
$（'ul.submenu'）。closest（'li'）。addClass（'drop'）;
//左边栏主导航
var menu_ul = $（'。menu> li.drop> ul'），
menu_a = $（'。menu> li.drop> a'）;
menu_ul。 hide（）
menu_a.click（function（e）{
e.preventDefault（）;
if（！$（this）.hasClass（'active'））{
menu_a.removeClass（'active'）;
menu_ul.filter（'：visible'）。slideUp（'normal'）;
$（this）.addClass（'active'）。 next（）。stop（true，true）.slideDown（'normal'）;
} else {
$（this）.removeClass（'active'）;
$（this）。 next（）。stop（true，true）.slideUp（'normal'）;
}
}）;
}）;
}）;
解决方案
观察 stu12.js ，它不适用于异步加载到各个 slidePanel div的数据。
$ b $为了解决这个问题，我建议你在将slidePanel加载到HTML中后加载JS。
查看代码，我是不确定slidePanels在哪里加载？在其中一个动态加载的HTML文件中？您会遇到一个问题，即在多个HTML文件中包含这些滑动面板。
因此，请先从HTML中删除此行：
< script type =text / javascriptsrc =js / stu12.js>< / script>
如果slidePanels只在一个HTML文件中，那么在语句之前添加相关的HTML加载 $（this）.fadeIn（slow）; 可以动态加载滑块JavaScript：
$ .getScript（js / stu12.js）
.done（function（script，textStatus）{
console.log（textStatus）;
}）
.fail（函数（jqxhr，设置，异常）{
console.log（Error loading stu12.js：+ exception）;
}）;
如果您在多个HTML页面中动态加载这些滑动面板，那么我会建议更改您的JavaScript，以便所有 HTML页面在页面加载时动态加载，但隐藏在不同的div中，然后可以用不同的点击功能显示。
<然后，您可以在所有HTML页面加载类似以下内容后加载滑块JavaScript：
$（'＃content' ）.ajaxStop（function（）{
$ .getScript（js / stu12.js）
.done（function（script，textStatus）{
console.log（textStatus）;
}）
.fail（函数（jqxhr，settings，exception）{
console.log（加载stu12.js时出错：+ exception）;
}）;
}）;
the slider i'm using is this one : http://www.stunicholls.com/gallery/jquery-slide-anything.html
It works ok on a normal html, but when I put it to load over an ajax loaded content it doesn't work anymore, how can I fix it?
This is the js of the slider:
$(window).load(function(){
/* just one variable to set-up */
speed = 600;
tabColor = '#069';
tabCurrent = '#09c';
/* setting the initial state of the slideshow and first image */
var picVar = $('.iStu12 li.images div.slide div.slidePanel');
totPic = picVar.length;
curPicWidth = picVar.eq(0).width();
curPicHeight = 480;
totWidth = 0;
/* calculate the total width of the images and set the div.slide to match */
$.each((picVar), function() {
caption=$(this).attr('caption');
$('.iStu12 li.caption').append('<b>'+caption+'</b>');
totWidth = totWidth+$(this).width();
});
$('ul.iStu12 li.images div.slide').width(totWidth);
current=0;
var captionVar = $('.iStu12 li.caption b');
tabSet ()
/* resize the containing elements, left/right arrow positions and add the first image caption */
resize(curPicWidth,curPicHeight)
/* monitor 'next' clicks */
$('.iStu12 li.next').click (function() {
picVar = $('.iStu12 li.images div.slide div.slidePanel');
/* animate the line of images left one photo - then remove the first image from set, make it the last image then finally move the set to absolute position left:0 */
curPicWidth = picVar.eq(0).width();
curPicHeight = 480;
$('ul.iStu12 li.images div.slide').animate({left:-curPicWidth}, speed,
function() {
$('ul.iStu12 li.images div.slide').find('div.slidePanel:first').remove().appendTo('ul.iStu12 li.images div.slide');
$('ul.iStu12 li.images div.slide').css('left','0px');
});
/* get the width, height and alt for the currently displayed image */
curPicWidth = picVar.eq(1).width();
curPicHeight = 480;
/* animate the containing elements and left/right arrow positions to match the current image */
resize(curPicWidth,curPicHeight)
current++
if(current==totPic) {current=0;}
tabSet ()
});
/* monitor 'previous' clicks */
$('.iStu12 li.prev').click (function() {
/* get the last image from the set and make it the fist image, then set the left position of the set to minus the width of the new first image */
$('ul.iStu12 li.images div.slide').find('div.slidePanel:last').remove().prependTo('ul.iStu12 li.images div.slide');
picVar = $('.iStu12 li.images div.slide div.slidePanel');
curPicWidth = picVar.eq(0).width();
curPicHeight = 480;
$('ul.iStu12 li.images div.slide').css('left',-curPicWidth);
/* animate the first image to left = 0 */
$('ul.iStu12 li.images div.slide').animate({left:0}, speed);
/* animate the containing elements, left/right arrow positions to match the current image and change the caption */
resize(curPicWidth,curPicHeight)
current--
if(current==-1) {current=totPic-1;}
tabSet ()
});
/* tab clicking routine */
$('.iStu12 li.caption b').click (function() {
clicked = $(this).index()
/* if to the right of the current tab then slide left */
if (clicked>current) {
rotate=clicked-current;
picVar = $('.iStu12 li.images div.slide div.slidePanel');
curPicWidth = 0;
for (var i=0; i<rotate; i++) {
curPicWidth = curPicWidth+picVar.eq(i).width();
}
$('ul.iStu12 li.images div.slide').animate({left:-curPicWidth},{queue:false, duration:speed,
complete: function() {
for (var n=0; n<rotate; n++) {
$('ul.iStu12 li.images div.slide').find('div.slidePanel:first').remove().appendTo('ul.iStu12 li.images div.slide');
$('ul.iStu12 li.images div.slide').css('left','0px');
}}
});
/* get the width, height and alt for the currently displayed image */
curPicWidth = picVar.eq(rotate).width();
curPicHeight = picVar.eq(rotate).height();
/* animate the containing elements and left/right arrow positions to match the current image */
resize(curPicWidth,curPicHeight)
current=clicked;
tabSet ()
}
/* if to the left of the current tab then slide right */
if (clicked<current) {
rotate=current-clicked;
picVar = $('.iStu12 li.images div.slide div.slidePanel');
curPicWidth = 0;
for (var i=0; i<rotate; i++) {
curPicWidth = curPicWidth+picVar.eq(totPic-1).width();
$('ul.iStu12 li.images div.slide').find('div.slidePanel:last').remove().prependTo('ul.iStu12 li.images div.slide');
}
$('ul.iStu12 li.images div.slide').css({left:-curPicWidth,
complete: function() {
/* animate the first image to left = 0 */
$('ul.iStu12 li.images div.slide').animate({left:0}, speed);
}
});
/* get the width, height and alt for the currently displayed image */
picVar = $('.iStu12 li.images div.slide div.slidePanel');
curPicWidth = picVar.eq(0).width();
curPicHeight = 480;
/* animate the containing elements and left/right arrow positions to match the current image */
resize(curPicWidth,curPicHeight)
current=clicked;
tabSet ()
}
});
$('.iStu12 li.caption b').mouseover (function() {
if ($(this).index()!==current) {
$(this).css('background',tabCurrent);
}
}).mouseout(function(){
if ($(this).index()!==current) {
$(this).css('background',tabColor);
}
});
function tabSet () {
captionVar.css('background',tabColor);
captionVar.eq(current).css('background',tabCurrent);
}
/* resize the containing elements, the left/right arrow positions and update the caption */
function resize (w,h) {
$('.iStu12').animate({width:w, height:h},speed);
$('.iStu12 li.images').animate({width:w, height:h},speed);
}
});
i'm loading it this way:
<script type="text/javascript" src="js/loader.js"></script>
<script type="text/javascript" src="js/stu12.js"></script>
First the ajax content and then the js of the slider
this is the content of the loader.js:
$(document).ready(function(){
// load home when the page loads
$("#content").load("home.html", function(){
$(this).fadeIn("slow");
});
// load artworks page
$("#artworks > a").click(function(){
$("#content").hide();
$("#content").load("artworks.html", function(){
$(this).fadeIn("slow");
});
});
// load projects page
$("#artworks ul li a").click(function(){
$("#content").hide();
$("#content").load("project.html", function(){
$(this).fadeIn("slow");
});
});
// load single project page
$("#project_page").live("click", function(){
$("#content").hide();
$("#content").load("project.html", function(){
$(this).fadeIn("slow");
});
});
// load single project page
$("#project_slider").live("click", function(){
$("#content").hide();
$("#content").load("project_inside.html", function(){
$(this).fadeIn("slow");
});
});
// back to projects page
$(".back").live("click", function(){
$("#content").hide();
$("#content").load("project.html", function(){
$(this).fadeIn("slow");
});
});
// load prensa page
$("#prensa_nav").click(function(){
$("#content").hide();
$("#content").load("prensa.html", function(){
$(this).fadeIn("slow");
});
});
// load contacto page
$("#contacto_nav").click(function(){
$("#content").hide();
$("#content").load("contacto.html", function(){
$(this).fadeIn("slow");
});
});
// active menu item
$(function() {
$('#menu li').click(function() {
$('#menu li').each(function() {
$(this).removeClass('active');
});
$(this).addClass('active');
});
});
/* Menu dropdown */
$(document).ready(function($){
// Add class of drop if item has sub-menu
$('ul.submenu').closest('li').addClass('drop');
// Left Sidebar Main Navigation
var menu_ul = $('.menu > li.drop > ul'),
menu_a = $('.menu > li.drop > a');
menu_ul.hide()
menu_a.click(function(e) {
e.preventDefault();
if(!$(this).hasClass('active')) {
menu_a.removeClass('active');
menu_ul.filter(':visible').slideUp('normal');
$(this).addClass('active').next().stop(true,true).slideDown('normal');
} else {
$(this).removeClass('active');
$(this).next().stop(true,true).slideUp('normal');
}
});
});
});
解决方案
Looking at stu12.js, it is not designed to work with data that is loaded asynchronously into the various slidePanel divs.
To work around this, I would suggest that you load the JS after you have loaded the slidePanels into your HTML.
Looking at the code, I'm not sure where the slidePanels are loaded? In one of the dynamically loaded HTML files? You will have a problem where more than one HTML file has these sliding panels.
So, first remove this line from your HTML:
<script type="text/javascript" src="js/stu12.js"></script>
If the slidePanels are only in one HTML file, then add this for the relevant HTML load before the statement $(this).fadeIn("slow"); to load in the slider JavaScript dynamically:
$.getScript("js/stu12.js")
.done(function(script, textStatus) {
console.log( textStatus );
})
.fail(function(jqxhr, settings, exception) {
console.log( "Error loading stu12.js: " + exception);
});
If you have these sliding panels in more than one HTML page being dynamically loaded, then I would recommend changing your JavaScript so that all the HTML pages are loaded dynamically at page load, but hidden in different divs that can then displayed with the different click functions.
You can then load the slider JavaScript once all the HTML pages are loaded with something like:
$('#content').ajaxStop(function() {
$.getScript("js/stu12.js")
.done(function(script, textStatus) {
console.log( textStatus );
})
.fail(function(jqxhr, settings, exception) {
console.log( "Error loading stu12.js: " + exception);
});
});
这篇关于在加载Ajax的内容上加载滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
