Question

我有一个jQuery导航菜单将外部内容加载到我的#main div中，当内容是静态的时工作正常，但是我正在处理的网站包含jQuery画廊/幻灯片，它们喜欢调用div。我遇到的问题是加载图库时，图像都会出现，但jQuery功能不起作用。

任何帮助表示感谢。

这是javascript即时通讯...

$(document).ready(function() {

// Check for hash value in URL
var hash = window.location.hash.substr(1);
var href = $('#accordion ul li a').each(function(){
    var href = $(this).attr('href');
    if(hash==href.substr(0,href.length-5)){
        var toLoad = hash+'.html #main';
        $('#main').load(toLoad)
    }
});

$('#accordion ul li a').click(function(){

var toLoad = $(this).attr('href')+' #main';
$('#main').hide('fast',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
    $('#main').load(toLoad,'',showNewContent())
}
function showNewContent() {
    $('#main').show('normal',hideLoader());
}
function hideLoader() {
    $('#load').fadeOut('normal');
}
return false;

    });
});

Answer 1

在第一个html中我有：

<div id="galContainer">

</div>

所以这就是我希望我的画廊出现的地方。但是我会将其中最初隐藏的所有图像设置为：

<style type="text/css">

       #galContainer img {display:none;}

</style>

显然你在这个页面上注册了jquery以及我为你发布的脚本。所以

<script type="text/javascript" src="jquery-1.4.2.js"></script>

<script type="text/javascript">


    $(function() {

        $('#galContainer').load('2.htm #images', function() {
            $.ajax({
                url: 'gallery.js',
                dataType: 'script',
                success: function() {
                    $('#galContainer img').fadeIn();

                }
            });

        });

    });
</script>

现在在同一文件夹中我还有两个文件。一个叫2.htm，其中包含我的画廊的图像。

和gallery.js这是我画廊的javascript

2.htm仅包含：

<div id="images">
   <img src="1.jpg" />
   <img src="2.jpg" />
   <img src="3.jpg" />
</div>

现在您看到我在第一页中使用load函数从第二页获取div＃images的内容。 [我编写加载时的第一行（'2.htm #images ....]

现在jQuery中的load函数接受了我使用过的回调函数。当load函数成功时，将执行此函数。意味着图像被加载。

所以现在我很高兴调用控制这些图像行为的脚本[意思是我的画廊的JavaScript]

正如我之前提到的那样，脚本是在gallery.js中，我在ajax函数中动态加载。

在side gallery.js中，我有：

$.each($('#galContainer img'), function() {

    var images = $(this);

    images.click(function() {
        alert($(this).attr('src'));
    });
});

这只是一个测试脚本，可在单击时警告第一页中每个动态加载的图像的来源。在你的情况下，这应该是你的画廊脚本。

我希望现在很清楚。

如何将外部jQuery库/幻灯片加载到div中

1 个答案: