Плагин Galleria с функцией jQuery .load () - PullRequest
Новая
       6

Плагин Galleria с функцией jQuery .load ()

0 голосов
/ 27 июля 2011

Я использую плагин Galleria для сайта моего друга, который является фотографом.Плагин работает отлично, но вот в чем вопрос.Я хотел бы загрузить (по клику) несколько галерей изображений, используя .load (AJAX) из нескольких html-файлов, где находятся фотографии и исходный скрипт 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 загружает файл 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 загружен на мой локальный хост.В соответствии с запросом он демонстрирует фотографии файла brown.html в файле div.sbh

У меня есть аналогичный HTML-файл с именем blue.html, который содержит тот же код, что и brown.html, но с другими изображениями.Что мне нужно, так это загружать содержимое blue.html точно так же, как я делал с brown.html, когда, скажем, я нажимаю какую-то ссылку на странице индекса.

Итак, вопрос в том, как загрузить содержимое blue.html в div.sbh на странице индекса, не перезагружая страницу, в то время как содержимое brown.html уже загружено в document.ready?Как выполнить несколько загрузок и выгрузок, учитывая, что у меня будет несколько похожих файлов?

1 Ответ

0 голосов
/ 27 июля 2011

Это обновленная версия! Найдите оригинальный ответ по ревизиям.

Я все еще не до конца уверен, понимаю ли я, что вам нужно, но ниже приводится навигация иконтейнер для контента, загруженного с помощью AJAX (например, галереи).Все файлы gallery1… 3.html будут содержать содержимое, как теперь делает ваш brown.html , но удаляет из него JS .

Код Javascript ниже присоединит событие click к ссылкам навигациии при нажатии используйте атрибут 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');
});
...