jQuery iframe и эффект лайтбокса - PullRequest
Новая
       18

jQuery iframe и эффект лайтбокса

2 голосов
/ 16 ноября 2011

У меня есть несколько изображений, хранящихся в iframe в одном домене, но я хочу иметь возможность применить функцию щелчка к изображению, чтобы при щелчке по нему оно выскочило из iframe в родительское тело.

В идеале я не хочу вставлять jQuery в тело iframe, просто он должен присутствовать в родительском теле.

Кто-нибудь может подумать, как мне поступить?

1 Ответ

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

Попробуйте это: 

<!--We'll be selecting our images from this frame-->
<iframe id="img_from" src="path/to/same_origin_script.html"></iframe>
<!--We'll be placing the image from the above frame here when the user clicks on it-->
<span id="img_to"></span>
<script type="text/javascript">
    window.onload = function() 
    {
        //The iframe document
        var f = document.getElementById('img_from').contentWindow.document;
        //Register and add event listeners for each image in the iframe... You might want to narrow this down by using class name instead.
        for (var i=0; i<f.getElementsByTagName('img').length; i++)
        {
            //To ensure that event listener is assigned appropriately
            (function(i)
            {
                //Register an image from the iframe.
                var img = f.getElementsByTagName('img').item(i);
                //Add onclick event listener to the image that pulls it from the iframe and puts it in the parent document
                img.onclick = function()
                {
                    //Create a new image element
                    var newImg = document.createElement('img');
                    //Give the new image a meaningful id
                    newImg.id = 'img_to-'+i;
                    //Assign source of clicked image to new image. You may want to use absolute linking in your iframe to avoid bad source links in the parent document.
                    newImg.src = img.src;
                    //Add the new image to the #image_to span in the parent document
                    document.getElementById('img_to').appendChild(newImg);
                    //Optional: remove the image from the iframe's DOM
                    img.parentNode.removeChild(img);
                    //Just in case the image is wrapped in a link, return false to avoid jumping to the href.
                    return false;
                }
                //Still making sure i behaves as expected...
            }) (i);
        }
    }
</script>

Никакой сценарий, необходимый в документе iframe, определенно можно сделать более эффективным с помощью функции jQuery $ (selector) .each (). Надеюсь, это поможет!

...