image Archive

前にjQueryでpngfix [ jquery.pngFix.js ]というjQuery使用のIE6でもpng画像を透過させる方法を書いたが、、、、
png画像を背景でリピートさせた場合、IE6では画像がリピートされず画像1つがドン！と拡大されて表示されるのでした。。。

で、そんなときに「あなたのIE6/PNG頭痛の薬!」DD_belatedPNG.jsというのがあったので忘れないうちにメモ。

続きはこちら

Create a Stunning Sliding Door Effect with jQuery

jQueryとjQuery Easing.jsを使っています。
マウスオーバーで画像が4つに割れて背景が表示されます。

Create a Stunning Sliding Door Effect with jQuery

マウスオーバーすると画像が自動ドアのように左右にスライドして背景を表示させます。

デモ

サンプルのhtml

<!--.box_containerサンプル-->
<div class='box_container'>
        <div class='images_holder'>
        <div class='image_div left'><img class='box_image' src='img/dammy.jpg' style='width:400px'/></div>
        <div class='image_div right'><img class='box_image' src='img/dammy.jpg' style='width:400px'/></div>
        <div class='clear'></div>
    </div>
<!--START THE TEXT-->
Dreamweaverが開いた。
<!--END THE TEXT-->
</div>

css

.box_container {
    position:relative;
/*画像のサイズ*/
    width:400px;
    height:320px;
    overflow:hidden;
/*開いたときの背景*/
    background:url(img/dw.jpg) no-repeat left top;
    color:white;
}
.images_holder{
    position:absolute;
}
.image_div {
    position:relative;
    overflow:hidden;
    width:50%;
    float:left;
}
.right img{
    margin-left: -100%;
}
.clear{
    clear:both;
}

javascript

<script type="text/javascript" src="jquery.js"></script>

jQueryを読み込んで
下のスクリプトを書きます。

<script type="text/javascript">
$(document).ready(function() {

//.box_container
    $('.box_container').hover(function(){
        var width = $(this).outerWidth() / 2;
        $(this).find('.left').animate({ right : width },{queue:false,duration:300});
        $(this).find('.right').animate({ left : width },{queue:false,duration:300});
        }, function(){
        $(this).find('.left').animate({ right : 0 },{queue:false,duration:300});
        $(this).find('.right').animate({ left : 0 },{queue:false,duration:300});
    });
});
</script>

jQuery Easing.jsも読み込むとeasing効果も追加できます。

サンプル２のjavascript

<script type="text/javascript">
$(document).ready(function() {
//easing.jsを使用↓
    $('.box_container').hover(function(){
    var width = $(this).outerWidth() / 2;
    $(this).find('.left').animate({ right : width },{easing: 'easeOutBounce', queue:false,duration:1000});
    $(this).find('.right').animate({ left : width },{easing: 'easeOutBounce', queue:false,duration:1000});
    }, function(){
    $(this).find('.left').animate({ right : 0 },{easing: 'easeOutBounce',queue:false,duration:1000});
    $(this).find('.right').animate({ left : 0 },{easing: 'easeOutBounce',queue:false,duration:1000});
    });
});
</script>

サンプル３のjavascript

<script type="text/javascript">
$(document).ready(function() {
//easing.jsを使用↓    
    $('.box_container').hover(function(){
    var width = $(this).outerWidth() / 2;
    $(this).find('.left').animate({ right : width },{easing: 'easeOutCirc', queue:false,duration:1100});
    $(this).find('.right').animate({ left : width },{easing: 'easeOutCirc', queue:false,duration:1100});
    }, function(){
    $(this).find('.left').animate({ right : 0 },{easing: 'easeOutCirc',queue:false,duration:1100});
    $(this).find('.right').animate({ left : 0 },{easing: 'easeOutCirc',queue:false,duration:1100});
    });
});
</script>

Image splitting effect with CSS and JQuery

フォーカスしていない要素の透明度を変える。

上記サンプルのhtmlは、

<ul class="fade">
<li><a href="#"><img src="img/01.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/02.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/03.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/04.jpg" alt="" /></a></li>
</ul>

普通に画像を並べる。

ここでは、クラス名 fadeをつけました。

あとは、jQueryを読み込み

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function() {
 $('.fade').children().hover(function() {
 $(this).siblings().stop().fadeTo(500,0.5);
 }, function() {
 $(this).siblings().stop().fadeTo(500,1);
 });
});
</script>

このように書くと、上記サンプルのようにフォーカスされていない要素の透明度が変わります。
fadeTo(ミリ秒,透明度);
なので、数値を変えると変化する秒数、透明度を変えることが出来ます。

mootoolsを使ったイメージギャラリーmooflow

MooFlow

クリックするとフリップが反転する

rotate3Di – Flip HTML content in 3D

サムネイルの表示・自動スライド・next and prev・説明文の表示などcoolなスライドショー

mb.ideas

AnythingSlider

↑デモ

AnythingSlider

（追記しました）背景リピートについて

IE6でPNG画像を表示させると

PNG画像の透過部分がグレーに表示されてしまいます。
で、そんなときは、IE PNG Fixとかを使っていますが、
最近、jQueryを使う機会が多いので、どうせならjQueryを使う方法はないかと探していたらありました。

[htmlで画像表示サンプル]

<img src="img/png-hand.png" width="150" height="150" alt="png-hand" />

[cssで背景画像として表示サンプル]

<div style="background:url(img/png-hand.png) no-repeat;height:150px;width:150px;">
pngの背景画像です。<br />サンプル画像が気持ち悪くてスイマセン。。。
</div>

How To Use

jQuery.png.fix.jsのサイトから
jquery.pngFix.jsをダウンロード

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.pngFix.js"></script>

のようにjsファイルを読み込み。

<script type="text/javascript">
    $(document).ready(function(){ 
        $(document).pngFix(); 
    }); 
</script>

document readyを書いて読み込みが終わったらすぐpngfixを作動させると。
これだけでIE6でもpngが透過されます。

（追記）IE6で背景としてpng画像をリピートさせると画像が1つ拡大されて表示された。で、IE PNG Fix以外で他の方法を追記しました。
「png IE6でも背景画像をリピートできる　DD_belatedPNG」

slide tabbed box using jQuery