Skrypt tworzy płynną animację lupki pojawiającej się na zdjęciu po najechaniu na nie myszką.


Na początek musimy pobrać biblioteke JQuery z oficjalnej storny.

I dodajemy do naszej storny:

<script type="text/javascript" src="jquery.js"></script>

Oto nasza konstrukcja HTML:

  <div id="gallery2">
       <a href="obrazek01.jpg">
            <img src="obrazek01.jpg" alt="" />
        </a>
        <a href="obrazek02.jpg">
            <img src="obrazek02.jpg" alt="" />
        </a>
        <a href="obrazek03.jpg">
            <img src="obrazek03.jpg" alt="" />
        </a>
   </div>

 

 

//Kod JavaScript

<script type="text/javascript">
        $(document).ready(function(){
            $("#gallery2 a").append("<span></span>");
            $("#gallery2 a").hover(function(){
                $(this).children("span").fadeIn(600);
            },function(){
                $(this).children("span").fadeOut(200);
            });
        });
</script>


//Kod CSS

<style type="text/css">
        body {
                font-family:Arial, Sans-Serif;
                font-size:0.75em;
                }
       
        #gallery1 {
                width:100%;
                overflow:hidden;
                }
               
        #gallery1 a {
                position:relative;
                float:left;
                margin:5px;
                }
               
        #gallery1 a span {
                display:none;
                background-image:url(zoom.png);
                background-repeat:no-repeat;
                width:48px;
                height:48px;
                position:absolute;
                left:15px;
                top:15px;
                }
               
        #gallery1 a:hover span {
                display:block;
                }
               
        #gallery1 img {
                border: solid 1px #999;
                padding:5px;
                }
       
        #gallery2 {
                width:100%;
                overflow:hidden;
                }
               
        #gallery2 a {
                position:relative;
                float:left;
                margin:5px;
                }
               
        #gallery2 a span {
                background-image:url(lupa.png);
                background-repeat:no-repeat;
                width:48px;
                height:48px;
                display:none;
                position:absolute;
                left:15px;
                top:15px;
                }
               
        #gallery2 img {
                border: solid 1px #999;
                padding:5px;
                }
</style>