Mintik
3 yıl önce

ImageView.js – Çerçeve içinde resmi büyütme

imageViewjs

Kotelnitskiy Evgeniy’nin  jQuery  için geliştirdiği görsel olarak çok  hoşuma  giden birkaç  eklentisinden biri  olan İmageView  eklentisi  ile  resimlerinizi    tek  tıklama  ile resim çerçeve  büyüklüğünde  hiçbir değişiklik  olmadan resimlerinizi büyütebilir tıklamadan sonra mouseyi basılı  tutarak resmi  aynı  çerçeve  içerisinde istediğiniz yöne  doğru  sürükleyebilirsiniz.   jQuery Scrollview  eklentisi ile  benzer bir özellik  tek  fark  scrollview  eklentisinde resmi çerçeve  içerisinde büyütmeden gezdiriyorduk.  Scrollview’e göre daha kullanışlı  bir eklenti.

Kullanım

  • Head etiketleri arasına eklemeniz gereken bölümler.

Js dosya adresleri : 

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

JavaScript :

        <script type="text/javascript">
            $(function() {
                $('#imageView_container').imageView({width: 800, height:500});
            });
        </script>

 Css : 

        <style type="text/css">
            body {
                background-color: #555;
                color: #fff;
            }
            a {
                color: #fff;
                text-decoration: none;
                outline: none;
            }
            a:hover {
                color: #fff;
                text-decoration: underline;
            }
            a img{
                border: none;
            }

            #imageView_container {
                border: 2px solid #000;
            }
            #imageView_container.iv-loading {
                border: 2px solid #f00;
            }

        </style>

 

  •  Body etiketleri arasına eklemeniz gereken bölüm.

 

Html : 

        <div id="imageView_container">
            <img id="imageView" src="photos/image-800x500.jpg" rel="photos/image-1680x1050.jpg" alt="" />
        </div>

 

Mintik senin düşüncelerini merak ediyor. Bir yorum yaz