0

我正在为我的摄影师朋友的网站使用 Galleria 插件。该插件工作正常，但这是问题所在。我想使用 .load (AJAX) 从照片和 Galleria 的启动脚本所在的几个 html 文件加载（单击）几个图像库。重点是在不重新加载索引页面的情况下展示几个不同的图像集。下面是 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 加载了 brown.html 中的 div.sbh 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 没有 head 标签、doctype 声明等，因为所有这些信息 (1) 都没有被 .load() 解析，(2) 不需要，因为它已在 index.html 中指出

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

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

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

4

1 回答 1

0

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

我仍然不完全确定我是否了解您的需求，但以下是使用 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');
});
于 2011-07-27T18:34:09.990 回答