What is imgfix?

Imgfix is a simple tool for dynamicaly sizing images and applying hover effects while displaying. Especially usefull with grids and galleries.

Download imgfix from http://github.com/hozakar/imgfix

How does it work?

Imgfix re-organizes containing elements and dynamically applies CSS properties to relevant layers and images.

Important

Imgfix sizes images relevant to containing element. So don't forget to specify the size of the element which imgfix is applied.

Examples

Simple Usage

First you need to include necessary js files.

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

Then, simply apply .imgfix() to an element.

You can either place an image inside the element,

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

or you can place the image address to "data-fix-img" attribute.

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

Scale and filter on hover

Filter (webkit) and scale effects may be applied on hover.

<ul class="on-hover">
    <li class="scale" data-fix-img="img/img03.jpg"></li>
    <li class="grayscale" data-fix-img="img/img04.jpg"></li>
    <li class="sepia">
        <a href="#"><img src="img/img05.jpg" alt="img05" /></a>
    </li>
</ul>
<script>
    $('.scale').imgfix({
        scale: 3,
        interval: 1200
    });
    $('.grayscale').imgfix({
        grayscale: 0,
        defaults: {
            grayscale: 100
        }
    });
    $('.sepia').imgfix({
        scale: 1.2,
        sepia: 50,
        interval: 800
    });
</script>

• 

Cover layers

Cover layers may be used width imgfix. Here are some examples.

Cover fades in

<ul class="cover-fade-in">
    <li data-fix-img="img/img07.jpg">
        <div class="cover"></div>
    </li>
    <li data-fix-img="img/img08.jpg">
        <div class="cover"></div>
    </li>
    <li data-fix-img="img/img09.jpg">
        <div class="cover"></div>
    </li>
</ul>
<script>
    $('ul.cover-fade-in li').imgfix({
        scale: 1.25,
        coverclass: 'cover',
        cover: {
            fade: 'in'
        }
    });
</script>

Cover slides in from left side

<ul class="cover-slide-in">
    <li data-fix-img="img/img10.jpg">
        <div class="cover"></div>
    </li>
    <li data-fix-img="img/img11.jpg">
        <div class="cover"></div>
    </li>
    <li data-fix-img="img/img12.jpg">
        <div class="cover"></div>
    </li>
</ul>
<script>
    $('ul.cover-slide-in li').imgfix({
        scale: 1.25,
        coverclass: 'cover',
        cover: {
            slide: 'in-left'
        }
    });
</script>

Cover layer scales out on hover

<ul class="cover-scale-out">
    <li data-fix-img="img/img04.jpg">
        <div class="cover"></div>
    </li>
    <li data-fix-img="img/img05.jpg">
        <div class="cover"></div>
    </li>
    <li data-fix-img="img/img06.jpg">
        <div class="cover"></div>
    </li>
</ul>
<script>
    $('ul.cover-scale-out li').imgfix({
        scale: 1.25,
        coverclass: 'cover',
        cover: {
            scale: 'out'
        }
    });
</script>

Cover slides in dynamically

<ul class="cover-slide-dynamic">
    <li data-fix-img="img/img02.jpg">
        <div class="cover"></div>
    </li>
    <li data-fix-img="img/img03.jpg">
        <div class="cover"></div>
    </li>
    .
    .
    .
</ul>
<script>
    $('ul.cover-slide-dynamic li').imgfix({
        scale: 1.25,
        coverclass: 'cover',
        cover: {
            slide: 'dynamic'
        }
    });
</script>