Home/ Questions/Q 7656563
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T12:47:51+00:00

Fancybox shows pikachoose image viewer in iframe. Keyboard keys are used to navigate between

  • 0

Fancybox shows pikachoose image viewer in iframe.
Keyboard keys are used to navigate between images
On initial load keys are ignored.
Keys will work only if clicked in fancybox.
I added 

              $('.pikachoose').focus();

but this does not enable keys.
How to allow keys to work immediately if iframe is opened ?

iframe content is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <html>
<head>
    <link type="text/css" href="Pikachoose/bottom.css" rel="stylesheet" />
    <script type="text/javascript" src="jquery.min.js"></script>
    <script src="Pikachoose/jquery.pikachoose.full.js"></script>

    <script type="text/javascript">
            $(document).ready(function () {
                $("#pikame").PikaChoose({
                    autoPlay: false
                });

                $("html").keydown(function (evt) {
                    $('#pikame').data('pikachoose').Next();
                });
              // why this does not allow keydown event:
              $('.pikachoose').focus();
            });
    </script>
</head>
<body>
    <div class="pikachoose">
        <ul id="pikame">
            <li>
                <img src="img1" />
            </li>
            <li>
                <img src="img2" />
            </li>
            <li>
                <img src="img3" />
            </li>
        </ul>
    </div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your jQuery selector is for an id, not a class.

    Either change your javascript to $(".pikachoose").focus() or change class="pikachoose" to id="pikachoose".

    edit:

    You can’t normally focus arbitrary elements, like divs. But there is a pseudo-hack that may work: puting a tabindex on the element. You can use -1 to prevent unwanted interference with tabbing. So either put tabindex="-1" on that div or you can put $(".pikachoose").attr("tabindex", -1).focus() in your code.

    • 0