Swap Image-sample2

by HYEONGJINKIM

HTML

<script src="http://jquery.eisbehr.de/lazy/additional/jquery.lazy.min.js"></script>
<script src="http://toddmotto.com/labs/echo/js/echo.js"></script>
<script src="http://www.appelsiini.net/projects/lazyload/jquery.lazyload.js?v=1.9.1"></script>
<a href="01.jpg" class="swap">
    <div class="start">
        <!--<img class="lazy" data-src="http://lorempixel.com/400/200/sports/" src="http://jquery.eisbehr.de/lazy/examples/images/loading.gif" border="0" alt="Lazy Image" />-->
        <!--<img src="http://toddmotto.com/labs/echo/img/ajax.gif" alt="" data-echo="http://lorempixel.com/400/200/sports/" />-->
        <!--<img class="lazy" data-original="http://lorempixel.com/400/200/sports/" />-->
        <img class="unveil" data-src="http://lorempixel.com/400/200/sports/" src="http://toddmotto.com/labs/echo/img/blank.gif" height="200" width="400" / >
        
    </div>
    
    <div class="hover" style='display:none;'>
        <!--<img class="lazy" data-src="http://lorempixel.com/400/200/people/" src="http://jquery.eisbehr.de/lazy/examples/images/loading.gif" border="0" alt="Lazy Image" />-->
        <!--<img src="http://toddmotto.com/labs/echo/img/ajax.gif" alt="" data-echo="http://lorempixel.com/400/200/people/" />-->
        <!--<img class="lazy" data-original="http://lorempixel.com/400/200/people/" />-->
        <img class="unveil" data-src="http://lorempixel.com/400/200/people/" src="http://toddmotto.com/labs/echo/img/blank.gif" height="200" width="400" />
        <div class="caption">
            <p>
                <span class="cap-1">Workshop Demo</span>                        
                <span class="cap-3">Artwork by Carlos Huante</span>
            </p>
        </div>
    </div>    

</a>

CSS

.loading {
    display:none;
    /*로딩 추가*/
}

img.unveil{
    width: 400px;
   height: 200px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -200px;
   margin-top: -100px;
}

JavaScript

$('.swap').hover(

function () {
    //$(this).find('.hover').show().siblings().hide();
    $(this).find('.hover').stop().fadeIn().siblings().hide();
},

function () {
    //$(this).find('.start').show().siblings().hide();        
    $(this).find('.start').stop().fadeIn().siblings().hide();
});

//안보이는 넘 안됨
/*$("img.lazy").lazy({
    beforeLoad: function(element) {
        element.removeClass("lazy"); 
    },
    onLoad: function(element) {
        console.log(element.get(0));
        element.addClass("loading"); 
    },
    afterLoad: function(element) { 
        element.removeClass("loading").addClass("loaded"); 
    },
    onError: function(element) {
        console.log("image loading error: " + element.attr("src"));
    },
});*/
//http://toddmotto.com/labs/echo/img/ajax.gif

//안보이는넘도 됨
/*Echo.init({
    offset: '0',
    throttle: '250'
});*/

//안보이는 넘 안됨
/*$("img.lazy").lazyload({
    placeholder : "http://toddmotto.com/labs/echo/img/ajax.gif", 
    threshold : 50,
    effect: "fadeIn"
});*/

(function ($) { 
    $.fn.unveil = function () { 
        var images = this,
            loaded, inview;  this.one("unveil", function () { this.setAttribute("src", this.getAttribute("data-src")); this.removeAttribute("data-src"); 
        });  
        function unveil() { inview = images.filter(function () { 
                var $e = $(this),
                     $w = $(window),
                     wt = $w.scrollTop(),
                     wb = wt + $w.height(),
                     et = $e.offset().top,
                     eb = et + $e.height();  
                return eb >= wt && et <= wb; 
            });  loaded = inview.trigger("unveil"); images = images.not(loaded); 
        }  $(window).scroll(unveil); unveil();  
        return this; 
    };
})(jQuery);

$("img.unveil").unveil();