Mouse üzerine gelince resmi büyütmek – ElevateZoom

6
1347
views

elevateZoom
Tam bir sene önce  jQuery ElevateZoom uygulamasını burada paylaşmıştım sizlere. Genellikle online alışveriş siteleri tarafından kullanılan bir fotoğraf büyütme uygulamasıdır bu. Üstte büyük resim, altında ürünün diğer resimleri ve sol tarafta da mouse ile üst resmin üzerinde gezindiğinizde büyük halinin görüntülendiği bir çerçeve bulunuyor. Mouse fotoğrafın olduğu çerçeve içine girdiği anda yarı saydam küçük bir çerçeve beliriyor ve hangi tarafa sürüklerseniz sağ tarafında da büyük hali çıkıyor. aynı mercek diyebiliriz.

Demo sayfasında indirme butonu ve her örnek için gerekli açıklamalar olduğu için hiç denemeden olduğu gibi sayfaya ekledim. Aradan 1 sene geçtikten sonra bir arkadaşımız  mail yoluyla galeri örneğini bir türlü yapamadığını bildirmişti. Yine demo sayfasındaki açıklamalara göre biraz daha detaylı anlatarak cevaplamıştım maili. Uzun süredir eski yazıları gözden geçiriyorum, sorunlu olan var mı yok mu diye. Hazır ElevateZoom uygulamasını düzeltmeye gelince bir de ben deneyeyim derken demo sayfasında eklenmiş olan kodlarda atanmış olan değerler (seçiciler) birbirleri ile eşleşmiyordu. Sayfada yorum bölümü olmadığı için sanırım geliştirici de  haberdar olamamış bu durumdan. Bu yüzden yeni bir yazı açarak burada anlatmak istedim sizlere. Download  butonunda temel (basic) örneğinin çalışır halini indirebilirsiniz.  En çok kullanılan Galery Lightbox örneğinin  düzeltmiş kodlarını da burada sizlere paylaşacağım.

Kullanım

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

Js dosya adresleri : 

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

Html : 

Download adresinden indireceğiniz dosya içinde images klasörü içinde  large, small, thumb diye adlandırılmış üç tane de ayrı resim klasörü bulunuyor.  Data-image ekranda görülen resim data-zoom-image mouse üzerine geldiğinde sağda çıkan büyük resim, zoom_03’de altta duran küçük resimlerdir.

Bu kodların hemen altına da aşağıdaki JavaScript kodu ekliyoruz.

 

 

Aranan kelimeler:

  • java script resmin mouse ile üzerine gelince büyümesi
  • html büyütec kodu
  • html animasyon üstüne gelince
  • h1 etiketinin üstüne gelince büyüten kod html
  • flash cs6 resme zoom yapma kodu
  • fare üzerine gelince değişen resim
  • fare büyüteci
  • elevateZoom fancybox
  • delpide image icinde mouse weell kullanimi
  • web sitesinde resimleri ekrana zoom yaptirmak
1 oy (5 votes, average: 4,80 out of 5)
Loading...
Önceki İçerikMaplace.js
Sonraki İçerikImagePicker.js

1983 doğumlu, olmayan bir çocuk babası, espirili ve kendini cana yakın zanneden biri işte. Daha ne olsun ?

Paylaş

6 YORUMLAR

  1. Merhabalar,
    Öncelikle faydalı paylaşımlarınız için teşekkürler.
    Yukarıdaki uygulamada her şeyi tam olarak yaptım. Zoom da çalışıyor. Fakat aşağıdaki thumb resimlerine tıklayınca yukarıya gelmesi gereken small resimi getiremiyorum. Acaba href=”#”‘e bir yol mu atamam gerekiyor diyerek, small resminin yolunu da verdim fakat yine olmadı. Küçük resimlere tıklayınca yukarıdaki resimlerin değişmesi için ne yapmam gerekiyor.
    Şimdiden teşekkürler.

  2. Merhaba. Öncelikle benim bunlar ile ilgi kayda değer bir bilgim yok ancak bir sorum oalcak.
    Outlook ile mail gönderirken imza bölümüne resimler yükleyip oto imzalar oluşturuyorum. Bu maili imza ile gönderdikten sonra karşı taraftaki alıcı bu mailde sadece resimlerde herhangi bir yere tıklamadan
    bir şey indirmeden fare imlecini resim üzerine götürdüğünde zoom olma ihtimali var mıdır. Yada böyle bir çalışma var mıdır.

  3. Merhabalar, peki bir swf dosyası hazırladım. maouse ile fotoğrafı hareket ettiriyorum yani. Bu flasha yukarıdaki açıkladığınız gibi zoom nasıl ekleyebilirim acaba? Yardımcı olursanız çok sevinirim. HTML web sitesi yaptım. Frontpage de çalışıyorum.

CEVAP VER

Please enter your comment!
Please enter your name here