Question

我正在使用Galleria插件作为我的朋友的摄影师网站。该插件工作正常，但这是问题。我想从几个html文件中使用.load（AJAX）加载（点击）几个图像库，其中照片和Galleria的启动脚本位于这些文件中。重点是在不重新加载索引页面的情况下展示几个不同的图像集。以下是index.html的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>Hello</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" media="all" href="style.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <!--Load Galleria-->
        <script type="text/javascript" src="js/galleria/galleria-1.2.3.min.js"></script>
        <script>
            $(document).ready(function(){
                $('.sbh').load('brown.html');
            });

    </script>
</head>

<body>
        <div id="content">
                <div id="gallery-handler">
                     <div class="slv">
                        <div class="sth">
                            <div class="srv">
                                <div class="sbh">
                                    <!--Loading Galleria-->
                                </div>
                            </div>
                        </div>
                    </div>
                  </div><!--#gallery-handler-->
            <div class="clear"></div>
            <p class="click">Click me</p>
        </div><!--#content-->
</body>

正如您所看到的，当document.ready它在div.sbh中加载brown.html时 brown.html的内容如下：

<div id="gallery">
   <a href="images/folio/11.jpg">
      <img title="" alt="" src="images/thumbs/11.jpg">
   </a>
   <a href="images/folio/6.jpg">
      <img title="" alt="" src="images/thumbs/6.jpg">
   </a>
   <a href="images/folio/8.jpg">
      <img title="" alt="" src="images/thumbs/8.jpg">
   </a>
   <a href="images/folio/10.jpg">
      <img title="" src="images/thumbs/10.jpg">
   </a>
   <a href="images/folio/16.jpg">
      <img title="" src="images/thumbs/16.jpg">
   </a>
   <a href="images/folio/13.jpg">
      <img title="" alt="" src="images/thumbs/13.jpg">
   </a>
   </div>
<script>
 // Load the classic theme
                                        Galleria.loadTheme('js/galleria/themes/twelve/galleria.twelve.min.js');

// Initialize Galleria
 $('#gallery').galleria({
 width:1000,
 height:400,
 autoplay:2500
 });
</script>

正如您所看到的，brown.html没有头标签，doctype声明等，因为所有这些信息（1）都没有被.load（）解析，所以不需要（2），因为它已在的index.html

现在，当我的localhost加载index.html时，它运行良好。根据要求，它展示了div.sbh中的brown.html照片

我有类似的html文件名为blue.html，其中包含与brown.html相同的代码但具有不同的图像。我需要的是加载blue.html内容，就像我使用brown.html一样，当我说我点击索引页面上的一些链接时。

所以问题是如何在没有重新加载页面的情况下将blue.html的内容加载到div.sbh的索引页面，而brown.html的内容已经加载到document.ready上了？考虑到我将有几个类似的文件，如何进行多次加载和卸载？

Answer 1

这是更新版本！从修订版中找到原始答案。

我仍然不完全确定我是否理解你需要什么，但以下是使用AJAX（例如画廊）加载内容的导航和容器。文件gallery1 ... 3.html都会包含像你的brown.html现在那样的内容，但是从中移除JS 。

下面的Javascript代码会将单击事件附加到导航链接，单击时，使用href属性决定加载内容并返回false以防止链接的默认行为（加载链接资源）。我们将在加载页面后立即加载主题，并在success方法的load()回调中初始化新加载内容的库。

然后在加载页面时触发第一个链接以默认显示第一个库。这将替换您ready处理程序中的代码。

HTML

<ul id="navigation">
  <li><a href="gallery1.html">Gallery 1</a></li>
  <li><a href="gallery2.html">Gallery 2</a></li>
  <li><a href="gallery3.html">Gallery 3</a></li>
</ul>

<div class="sbh"></div>

的Javascript

$(function(){
    Galleria.loadTheme('js/galleria/themes/twelve/galleria.twelve.min.js');
    $('#navigation a')
    .click(function(){
        $('.sbh').load(this.href, function(){
            $('#gallery').galleria({
                width:1000,
                height:400,
                autoplay:2500
            });
        });
        return false;
    })
    .first()
    .trigger('click');
});

Galleria插件与jQuery .load（）函数

1 个答案: