Лайтбокс с большей функциональностью jQuery?

0

Я очень новичок в jQuery, и я никогда раньше не играл с лайтбоксами.

Но меня спросили, могу ли я сделать что-то для апрельских дураков на работе, я глупо сказал "да", поскольку я думал, что это будет проще, чем на самом деле, и теперь я боюсь.

Я дам вам представление о том, что было предложено.

1 - Homepage Banner > Click
2 - On Click a lightbox pops up "Speak your search term"
3 - Click Button To Speak - 5 seconds later "Sorry, we can't hear you, Shout"
4 - Click Button To Shout - "April Fools - Here a promo code for 10% off. XXXXXX"

Я сделал последние 3 шага - не уверен, что их можно было бы сделать лучше, но я их скрипнул здесь: http://jsfiddle.net/C8f3P/1/

Я предполагаю, что я на самом деле спрашиваю, как я могу добавить все это в лайтбокс после того, как был нажат баннер? И на самом деле это лайтбокс?

Заметьте, я только что что-то высмеял в JSFiddle, это не будет выглядеть так :)

  • 0
    Почему setTimeout ?
  • 0
    Итак, идея в том, что щелкнуть - пользователь начинает говорить - через 5 секунд он меняется, прося его выкрикнуть. Таким образом, задержка заключается в том, чтобы имитировать что-то, действительно воспринимающее речь, где оно фактически ничего не делает. Можно ли это сделать по-другому? Я новичок в jQuery, поэтому я знаю только маленькие кусочки. Спасибо за ваш комментарий
Показать ещё 1 комментарий
Теги:

2 ответа

0

Вот мой рецензент/рефактор, который может вам помочь. Однако заданный вами вопрос в лучшем случае путается, и я не знаю, как ответить на него конкретно. Надеюсь, этот код поможет.

JS Fiddle

$(document).ready(function() {
    var state = 0;
    var div = $('#fool');
    var content = $('#fool .content');
    var button = $('#fool .button');
    var waiting_html = $('#waiting-content').html();

    function nextStep() {
        var html;

        state++;

        html = $('#step' + state + '-content').html();
        content.html(html);

        div.removeClass('step1 step2 step3').addClass('step' + state);

        if (state >= 3) {
            button.off('click').hide();
        } else {
            button.show();
        }
    }

    $("#fool .button").on('click', function(e) {
        e.preventDefault();
        content.html(waiting_html);
        button.hide();
        setTimeout(nextStep, 5000); // Pretend we are recording.
        return false;
    });

    nextStep();
});
HTML 
<div id="fool">
    <p class="content"></p>
    <a href="#" class="button"><strong>click</strong> to start recording</a>
</div>

<script id="waiting-content" type="text/html">Recording...</script>
<script id="step1-content" type="text/html">Speak your search term</script>
<script id="step2-content" type="text/html">Sorry, we can't hear you, Shout</script>
<script id="step3-content" type="text/html">April Fools - Here a promo code for 10% off. XXXXXX</script>
Поделиться
  • 0
    Спасибо за это - что мне действительно нужно, чтобы все это было скрыто - чтобы оно выскочило в лайтбокс? Если это имеет смысл?
  • 0
    Только что обновленный код, чтобы быть в духе шутки OP от апреля. jsfiddle.net/sukima/PWpaq/1
Показать ещё 4 комментария
0

Мне это нравится!

У нас есть настройка, которая записывает поиск по голосу. Когда человек останавливается. Он подает.

Это решение работает только с хромом, хотя...

<input type="search" name="q" value="" id="searchInputField" placeholder="WHAT CAN WE FIND FOR YOU?" x-webkit-speech="">

<script>
$(document).ready(function() {
    $('#searchInputField').bind('webkitspeechchange',function() {
        $(this).parent('form').submit(function( event ) {
                  alert( "Speak up I can't hear you!" );
             event.preventDefault();
            });
    });
});
</script>

Я изменил это, чтобы предупредить вас. Может быть, это поможет.

Если вы используете хром, тогда это будет работать. Удостоверьтесь, что ваш телефон записывает первоначальный ответ... Он должен быть бесценным.

Может быть, скрыть ввод в div где-нибудь или CSS его с экрана. Просто некоторые идеи.

Но это звучит, как будто это было бы очень забавно. Я мог бы сделать некоторые обманы с моей командой разработчиков. Спасибо за поощрение этого девиантного поведения :)

Удачи!

Поделиться
  • 0
    Только что попробовал, это довольно круто :) Я ценю ваш ответ, но, к сожалению, мы должны обслуживать все браузеры, поэтому все должно быть проще. Я хотел бы использовать что-то вроде этого, хотя!
  • 0
    Ха! :) Бьюсь об заклад, кто-то придумает что-то хорошее для вас. Я буду следить за этой темой. Отличный материал!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню