How to add wrapper and bind to certain element
<p>I am having 2 issues with my code:</p>

<ol>
<li>I want to limit the effects of the script to the div <code>&lt;div id="photo"&gt;</code></li>
<li>How can I make a sub layer to the script so that all the elements in the page don`t change position when the animation is triggered. </li>
</ol>

<p>This is my code hope you can help.</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
        &lt;head&gt;
            &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
            &lt;title&gt;Untitled Document&lt;/title&gt;
            &lt;style type="text/css"&gt;
                .selected { border-style:solid; border-width:10px; border-color:#C00; margin:auto; z-index:2;}
                #cret {
                    position:relative;
                    z-index:3;
                    border-style:solid; border-width:5px; border-color:#000000;
                    padding: 10px 10px 10px 10px;
                    margin:auto;
                    width:620px;
                    height:420px;
                }
                img {
                    position:static;
                    z-index:1;
                }
            &lt;/style&gt;
            &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"/&gt;&lt;/script&gt;
        &lt;/head&gt;

        &lt;body&gt;
            &lt;script type="text/javascript"/&gt;
                $(document).ready(function() {
                    $('img').width('10%').height('10%');

                    $('img').on("click", function() {
                        $(this).wrap('&lt;div id="cret"/&gt;');
                        $(this).animate({width:'600px', height:'400px'}).addClass("selected");
                    });

                    $(document).on("click", function(){
                        $("img").unwrap();
                    });

                    $('img').click(function(){ return false; });    

                    $('#cret').click(function(){ return false; });

                    $(document).on("click", function(){
                        $('img').animate({width:'10%', height:'10%'}).removeClass("selected");
                    });

                    $('img').click(function(){ return false; });

                    $('#cret').click(function(){ return false; });
                });
            &lt;/script&gt;

            &lt;div id="photo"&gt;
                &lt;img src="image source"/&gt;
                &lt;img src="image source"/&gt;
            &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>
