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

ImageView.js

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>

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-01-25 tarihinde yayınlandı,Toplam 1302 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...