Открыть лайтбокс при загрузке страницы - PullRequest
Новая
       25

Открыть лайтбокс при загрузке страницы

1 голос
/ 09 декабря 2011

Я использую этот плагин для показа лайтбокса на веб-сайте. http://www.zurb.com/playground/reveal-modal-plugin

Я хочу автоматически загружать некоторые моды при загрузке страницы.Я пытаюсь использовать это, но не работает:

НА ГОЛОВЕ 

<!-- REVEAL LIGHTBOX -->
<script type="text/javascript" src="jquery.reveal.js"></script>
<link rel="stylesheet" href="reveal.css">

<!-- script when page loads -->
<script type="text/javascript">
$(document).ready(function() {
   $('#flyer').reveal();
});
</script>
<!-- REVEAL LIGHTBOX -->

НА ТЕЛЕ 

<div id="flyer" class="reveal-modal large">
  <h1>Ahora tenemos flyer y todo</h1>
  <div id="flyer-img"></div>
  <a class="close-reveal-modal">&#215;</a>
</div>

Что я делаю не так?На этой странице я работаю www.cosaslindas.com/beta

Большое спасибо.

Ответы [ 4 ]

2 голосов
/ 09 декабря 2011

Попробуйте добавить это после $('#flier').reveal();

$('#flier').trigger('click');
0 голосов
/ 09 декабря 2011

РЕДАКТИРОВАНИЕ:

Ваша загрузка библиотеки jQuery дважды! 

<script type="text/javascript" src="scripts/jquery-1.6.4.min.js"></script>

И 

<script src="js/jquery.min.js" type="text/javascript"></script>

Попытка удалить последнюю.

Редактировать2:Я только что проверил это в jsfiddle.Если вы удалите 2-ю библиотеку jquery из вашего заголовка, ваш скрипт должен работать нормально!

0 голосов
/ 09 декабря 2011

Я искал модальный плагин, и я думаю, что функция открытия будет связываться только с тегами с атрибутом data-reve-id.

Не уверен, что это будет работать, но я бы сказал, дать егоПопробуйте!

Добавьте к вам html: 

<a id="triggerflyermodal" href="#" data-reveal-id="flyer" style="display:none">This is hidden</a>

И измените вызов на это: 

<!-- script when page loads -->
<script type="text/javascript">
$(document).ready(function() {
   $('#triggerflyermodal').click();
});
</script>
0 голосов
/ 09 декабря 2011

Эта проблема на Github объясняет, как это сделать. Это не особенность Reveal, но, похоже, ее можно использовать для работы. У вас должен быть элемент (в вашем случае, #flyer имеет атрибут «data -карт-на-уже»).

...