jQueryのiframeとlightboxの効果

Question

同じドメインのiframeに多数の画像が保持されていますが、画像にクリック機能を適用してクリックしたときにiframeからポップアウトするようにしたい親の体に

理想的には、iframe本体にjQueryを挿入する必要はありません。親本体にjQueryを挿入するだけです。

私はこれについてどのように考えてもらえますか？

Answer 1

これを試してみてくださいません：iframeの文書の必要

<!--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> 

ませスクリプトは、間違いなくjQueryの$（セレクタ）.each（）機能を備えた、より効率的に作ることができます。お役に立てれば！