Galleria Plugin with jQuery .load() function_问答_开发者

I am using Galleria plugin for a website of my friend who is photographer. The plugin works fine, but here is the question. I would like to load (on click) several image galleries using .load (AJAX) from several html files where the photos and the initiating script of Galleria are located. The point is to show off several different image sets without reloading the index page. Here is the code for 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>

As you can see, when the document.ready it loads the brown.html within div.sbh Contents of brown.html as follows:

<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>

开发者_如何转开发As you may see, brown.html has no head tags, doctype declarations etc., because all of this info (1) is not parsed by .load(), (2) is not needed as it has been indicated in index.html

Now, it works well when index.html is loaded on my localhost. As requested it shows off the photos of brown.html in div.sbh

I have the similar html file called blue.html which contains same code as brown.html but with different images. What do I need is to load blue.html content exactly as I did with brown.html when let's say I click some link on index page.

So the question is how to load contents of blue.html into div.sbh at index page without reloading the page while contents of brown.html are already loaded on document.ready? How to do multiple loads and unloads considering I will have several similar files?

This is an updated version! Find the original answer from the revisions.

I'm still not fully sure if I understand what you need, but the following is a navigation and a container for content loaded using AJAX (e.g. galleries). The files gallery1…3.html would all contain content like your brown.html does now but remove the JS from it.

The Javascript code underneath will attach a click event to the navigation links, and when clicked, use the href attribute to decide on what to load and return false to prevent the default behavior of the link (load the linked resource). We will load the theme once right after the page is loaded and initialize the gallery for the newly loaded content in the success callback of the load() method.

Then the first link is triggered when the page is loaded to show the first gallery by default. This would replace the code in you ready handler.

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');
});