2012-06-11 5 views
1

Использование FancyBox версии 2, поставляемый http://fancyapps.com/fancybox/#supportИспользование FancyBox версии 2 - При закрытии второго FancyBox возобновлять первый FancyBox вместо того, чтобы просто закрыть

Я хочу открыть FancyBox от моей главной страницы, но в этом 1-й фантазии поле второй FancyBox можно назвать. Но когда эта вторая причудливая коробка закрыта. Вместо того, чтобы просто закрыть (нажав X в углу или нажав Esc), я хочу, чтобы он снова открыл первый fancybox. Как мне это сделать?

Спасибо - я искал в интернет для ответа, но нашел ответы относительно моего запроса претендует на предыдущие версии FancyBox не новая версию (2.0) ...

Моего кода ниже:

Главная Page-

<!DOCTYPE html> 
<head> 
    <!-- Add jQuery library --> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 

    <!-- Add fancyBox main JS and CSS files --> 
    <script type="text/javascript" src="./source/jquery.fancybox.js"></script> 
    <link rel="stylesheet" type="text/css" href="./source/jquery.fancybox.css" media="screen" /> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      /* 
       Simple image gallery. Uses default settings 
      */ 

      $('.fancybox').fancybox(); 

      /* 
       Different effects 
      */ 

      // Change title type, overlay opening speed and opacity 
      $(".fancybox-effects-a").fancybox({ 
       helpers: { 
        title : { 
         type : 'outside' 
        }, 
        overlay : { 
         speedIn : 500, 
         opacity : 0.95 
        } 
       } 
      }); 


      /* 
       Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked 
      */ 

      $('.fancybox-thumbs').fancybox({ 
       prevEffect : 'none', 
       nextEffect : 'none', 

       closeBtn : false, 
       arrows : false, 
       nextClick : true, 

       helpers : { 
        thumbs : { 
         width : 50, 
         height : 50 
        } 
       } 
      }); 
}); 
</script> 
    <a href="1stFancyBox.html" class="fancybox fancybox.ajax">1st Fancy Box</a> 
</html> 

1stFancyBox.html -

<html> 
<a href="2ndFancyBox.html" class="fancybox fancybox.ajax">2nd FancyBox</a> 
</html> 

2ndFancyBox.html -

<html> 
<body> 
Hellloooooooooo</body> 
</html> 

Спасибо :)

ответ

2

Вы можете создать два сценария, один для каждого звена так в main странице у вас есть:

<a href="1stFancyBox.html" class="fancybox1 fancybox.ajax">1st Fancy Box</a> 

Обратите внимание, что класс сейчас fancybox1 ... тогда скрипт запускает первый fancybox.

$(".fancybox1").fancybox(); 

Внутри 1stFancyBox.html вы можете по этой ссылке

<a href="2ndFancyBox.html" class="fancybox2 fancybox.ajax">2nd FancyBox</a> 

Обратите внимание, что класс теперь fancybox2

Также в main странице добавить скрипт, который запускает второй FancyBox (внутри первого FancyBox):

$(".fancybox2").fancybox({ 
afterClose: function(){ 
    $(".fancybox1").trigger("click"); 
} 
}); 

В приведенном выше сценарии будет запущен fancybox после закрытия второй fancybox независимо от содержания 2ndFancyBox.html.

UPDATE: Я добавил DEMO here

+0

ли, похоже, не работают, когда я закрываю вторая страница окна фантазии просто темнеет ... Пожалуйста, помогите Я сделал все, что говорилось здесь, заменить классы , Изменено $ (". Fancybox"). Fancybox(); до $ (". fancybox1"). fancybox(); И добавил $ ("fancybox2. ") FancyBox:;. ({ afterClose функция() {$ ( ) триггер ("нажмите");} " fancybox1.".}) в fancybox1 на главной странице ... $ (»fancybox1. ") FancyBox ({ $() FancyBox ({ afterClose." Fancybox2. ":. Функция() { $ (" fancybox1" .) ,триггер ("щелчок"); } }); }); – JohnHelp

+0

Кажется, что вы немного его перепутали, см. Мое обновление, где я добавил DEMO. Не стесняйтесь анализировать и сравнивать исходный код. Скрипты fancybox должны быть только на главной странице. Ссылки и содержимое зависят от 1-го и 2-го файлов html. – JFK

Смежные вопросы