Imgfix
İmaj ve galerilerinizin sunumunu kolaylaştıracak pratik bir araç...

Tasarladığınız sayfalarda imaj galerilerinizi yerleştirmek genelde sıkıntılı olur. Son kullanıcının seçeceği fotoğrafların boyut oranları tutarsızdır. İmajlara ufak animasyonlar eklemek, kapak layerları (katmanları) oluşturmak kısa kısa ama bol miktarda javascript ve css yazmayı gerektirir. Zaman kaybından kurtulmak için sıklıkla açık kaynak araçlar kullanırız. Bu açık kaynak koleksiyonuna ekleyebileceğiniz bir araç olarak "imgfix" iyi bir seçim olabilir.

Imgfix indirmek için: http://github.com/hozakar/imgfix

Imgfix Nedir?

Imgfix imajlarınızı dinamik olarak boyutlandırmak ve çeşitli hover efektleri uygulamak için jQuery ile geliştirilmiş basit bir araçtır. Imgfix efektleri yalnızca CSS ile uygular.

Nasıl çalışır?

Imgfix uygulandığı elementleri organize ederek çeşitli CSS özellikleri uygular.

Not: Imgfix imajları boyutlandırırken taşıyıcı elementin boyutlarını baz alır. Yani imgfix uyguladığınız elementlerin boyutlarını belirlemeyi unutmamalısınız...

Örnekler

Basit Kullanım

Öncelikle gerekli JavaScript dosyalarını eklemelisiniz.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/imgfix.min.js"></script>

 Daha sonra elementinize basitçe .imgfix()'i uygulayın,

<div id="element_1">
  <img src="img/img01.jpg" alt="img01" />
</div>
<script>
  $('#element_1').imgfix();
</script>

ya da ana elementinizin "data-fix-img" özelliğinde imaj adresini belirtebilirsiniz.

<div id="element_2" data-fix-img="img/img02.jpg"></div>
<script>
  $('#element_2').imgfix();
</script>

scale ve filter özellikleri

Hover (işaretçi imajın üzerindeyken) durumunda "filter" (yalnızca webkit tarayıcılarda) ve "scale" CSS özellikleri uygulamak.

<div class="row">
  <div class="col-xs-12 col-sm-4">
    <div class="scale" data-fix-img="http://imgfix.beltslib.net/img/img03.jpg">
    </div>
  </div>
  <div class="col-xs-12 col-sm-4">
    <div class="grayscale" data-fix-img="http://imgfix.beltslib.net/img/img04.jpg">
    </div>
  </div>
  <div class="col-xs-12 col-sm-4">
    <div class="sepia">
      <a href="#">
        <img src="http://imgfix.beltslib.net/img/img05.jpg" alt="img05" />
      </a>
    </div>
  </div>
</div>
<script>
  $('.scale').imgfix({
    scale: 3,
    interval: 1200
  });
  $('.grayscale').imgfix({
    grayscale: 0,
    defaults: {
      grayscale: 100
    }
  });
  $('.sepia').imgfix({
    scale: 1.2,
    sepia: 50,
    interval: 800
  });
</script>

 

 

Kapak layerları (katmanları)

Imgfix ile kapak layerları oluşturabilirsiniz.

fade-in:

<div class="row">
  <div class="col-xs-12 col-sm-4">
    <div class="cover-fade-in" data-fix-img="img/img07.jpg">
      <div class="cover"><p>KAPAK</p></div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-4">
    <div class="cover-fade-in" data-fix-img="img/img08.jpg">
      <div class="cover"><p>KAPAK</p></div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-4">
    <div class="cover-fade-in" data-fix-img="img/img09.jpg">
      <div class="cover"><p>KAPAK</p></div>
    </div>
  </div>
</div>
<script>
  $('.cover-fade-in').imgfix({
    scale: 1.25,
    coverclass: 'cover',
    cover: {
      fade: 'in'
    }
  });
</script>

slide-in-left:

<div class="row">
  <div class="col-xs-12 col-sm-4">
    <div class="cover-slide-in" data-fix-img="img/img10.jpg">
      <div class="cover"><p>KAPAK</p></div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-4">
    <div class="cover-slide-in" data-fix-img="img/img11.jpg">
      <div class="cover"><p>KAPAK</p></div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-4">
    <div class="cover-slide-in" data-fix-img="img/img12.jpg">
      <div class="cover"><p>KAPAK</p></div>
    </div>
  </div>
</div>
<script>
  $('.cover-slide-in').imgfix({
    scale: 1.25,
    coverclass: 'cover',
    cover: {
      slide: 'in-left'
    }
  });
</script>

slide-dynamic:

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-4">
    <div class="cover-slide-dynamic" data-fix-img="img/img02.jpg">
      <div class="cover"><p>KAPAK</p></div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4">
    <div class="cover-slide-dynamic" data-fix-img="img/img03.jpg">
      <div class="cover"><p>KAPAK</p></div>
    </div>
  </div>
  .
  .
  .
</div>
<script>
  $('.cover-slide-dynamic').imgfix({
    scale: 1.25,
    coverclass: 'cover',
    cover: {
      slide: 'dynamic'
    }
  });
</script>

Özellikler

Kullanım

Aşağıda imgfix nesnesinin tüm özelliklerini varsayılan değerleri ile birlikte görebilirsiniz. Aşağıdaki durum "$(element).imgfix();" in eşleniğidir...

$(element).imgfix({
  fixin: 0,
  scale: 1,
  grayscale: null,
  sepia: null,
  hue: null,
  saturate: null,
  invert: null,
  brightness: null,
  contrast: null,
  blur: null,
  defaults: {
    scale: 1,
    grayscale: null,
    sepia: null,
    hue: null,
    saturate: null,
    invert: null,
    brightness: null,
    contrast: null,
    blur: null,
  }
  width: null,
  height: null,
  protectaspectratio: 0,
  interval: 400,
  easing: '',
  coverclass: '',
  cover: {
    slide: 'none',
    fade: 'none',
    scale: 'none',
    easing: '',
    delay: 0,
    interval: 400
  }
});