Фото под курсором показ в отдельном блоке Смена фото для просмотра (jQuery + Zoom Plugin)

1997

Библиотека JAVASCRIPT SE@RCHER

Библиотека javascript SE@RCHER ИЗБРАННЫЕ ПРИМЕРЫ 2013 г. АПРЕЛЬ >>>

HTML ↴

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Фото под курсором показ в отдельном блоке Смена фото для просмотра  (jQuery + Zoom Plugin)</title>
        <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
       
        <script type="text/javascript" src="https://www.03www.ru/2013-04/22/starzoom.js?v=2"></script>
        <script type="text/javascript" src="https://www.03www.ru/2013-04/22/jetzoom.js?v=5"></script>
        <script type="text/javascript" src="https://www.03www.ru/2013-04/22/cloudzoom.js?v=23"></script>
    
        <script type="text/javascript" src="https://www.03www.ru/2013-04/22/prettify.js"></script>
        <script src="https://www.03www.ru/2013-04/22/jquery.tools.min.js"></script>
<style>
    img.cloudzoom-gallery {
        border:1px solid #ccc;
    }
    a.thumb-link{
        text-decoration: none;
        display:inline-block;
        margin-right:5px;
    }
    .cloudzoom-lens {
    cursor:pointer;
    }
</style>
<script type="text/javascript">
    $(function(){
        $('#zoom1').bind('click',function(){    
            var cloudZoom = $(this).data('CloudZoom'); 
            cloudZoom.closeZoom();
            $.fancybox.open(cloudZoom.getGalleryList());
            return false;
        });
    });
</script>
        <script type="text/javascript">
             $(function(){
                 $('pre').addClass('prettyprint'); 
                 prettyPrint();
                $("ul.tabs").tabs("div.panes > div");
             });
             StarZoom.quickStart();
             JetZoom.quickStart();
             CloudZoom.quickStart();
        </script>
    </head>
    <body style="text-align: center;">
        <div style="margin:0 auto;padding:0;width:900px;overflow:visible;;position:relative;display:table;">
            </div>
            <div id="content" style ="">
 <div class="left-half" >
    <div class="left-in">
        <div style="text-align:center">
            <div style="border:1px solid #ccc; display:inline-block;line-height:0;">
                <img class="cloudzoom" alt ="Текст к фото 1" id ="zoom1" 
				src="https://www.03www.ru/2013-03/001.jpg" width="400px"
                     title="Текст к фото 1"
                     data-cloudzoom='
                            zoomImage:"https://www.03www.ru/2013-03/001.jpg",
                            zoomMatchSize:true,
                            tintColor:"#000",
                            tintOpacity:0.25,
                            captionPosition:"bottom",
                            maxMagnification:4
                            '>
</div>
            <div style="margin-top:10px">
                <a href="https://www.03www.ru/2013-03/001.jpg" class="thumb-link">    
                    <img class="cloudzoom-gallery"  src="https://www.03www.ru/2013-03/001.jpg"
                         title="Текст к фото 1"
                         alt ="Jet Zoom thumb image"
                         data-cloudzoom='{
                         "useZoom":"#zoom1",
                         "image":"https://www.03www.ru/2013-03/001.jpg",
                         "zoomImage":"https://www.03www.ru/2013-03/001.jpg"}' width=100px>
                </a>

<a href="https://www.03www.ru/2013-03/003.jpg" class="thumb-link">
                    <img class="cloudzoom-gallery"   src="https://www.03www.ru/2013-03/003.jpg"
                         alt ="Jet Zoom thumb image"
                         title="Текст к фото 3"
                         data-cloudzoom='{
                         "useZoom":"#zoom1",
                         "image":"https://www.03www.ru/2013-03/003.jpg"
                         }' width=100px>
                </a>
            </div>
        </div>
    </div>
  </div>
</div>
<p><a href="https://www.03www.ru/2013-04/22/cloudzoom.js">cloudzoom.js</a></p>
<p><a href="https://www.03www.ru/2013-04/22/jetzoom.js">jetzoom.js</a></p>
<p><a href="https://www.03www.ru/2013-04/22/jquery.tools.min.js">jquery.tools.min.js</a></p>
<p><a href="https://www.03www.ru/2013-04/22/jquery-1.8.3.min.js">jquery-1.8.3.min.js</a></p>
<p><a href="https://www.03www.ru/2013-04/22/prettify.js">prettify.js</a></p>
<p><a href="https://www.03www.ru/2013-04/22/starzoom.js">starzoom.js</a></p>
     <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(53156500, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/53156500" style="position:absolute; left:-9999px;" alt="" /></div></noscript> </body>
</html>

HTML ↴

размер Kb

ПРИМЕР ↴

✔ пример в полном окне