リンクやテキストに、画像プレビューが付けられるプラグイン (imgPreview) -稀によくあるブログ

スポンサーサイト

上記の広告は１ヶ月以上更新のないブログに表示されています。新しい記事を書く事で広告が消せます。

リンクやテキストに、画像プレビューが付けられるプラグイン (imgPreview)

jQueryプラグインです。普通はテキストにイメージのプレビューをつけるように使うようですが、サムネイルに付けてみました。ちょっと、身も蓋も無い使い方になっちゃったかなぁって、感じです。
一応上が普通のプレビューで、下がリンク付きのプレビューになります。

限られたスペース、とりわけブログは使えるスペースが少ないことが多いので、こういった画像プレビューや、ツールチップなんかは、どんどん取り入れて、たくさん覚えて置くと、スマートにたくさんの情報を盛り込んだコンテンツが作れると思います。

スクリプト自体も軽いせいか、結構画像が大きめでも、ストレスを感じることなく表示してくれるので、かなり使えるものになってると思います。

New jQuery plugin: ‘imgPreview’ - James Padolsey

本家配布サイト。

サンプルソース

折りたたむ

本家デモとは違う、サムネイル画像を使用したもののソースです。


<style> 

/* tittle below CSS */

#imgPreviewWithStyles {
    background: #222;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    padding: 15px;
    z-index: 999;
    border: none;
}

/* Text below image */
#imgPreviewWithStyles span {
    color: white;
    text-align: center;
    display: block;
    padding: 10px 0 3px 0;
}


/* link prev CSS */ 

#imgPreviewWithStyles {
    background: #222;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    padding: 15px;
    z-index: 999;
    border: none;
}

/* Text below image */ 
#imgPreviewWithStyles span {
    color: white;
    text-align: center;
    display: block;
    padding: 10px 0 3px 0;
}


/*ここからはお好みで*/

.img-style{float:left; margin-left:10px ;}

ul {list-style-type: none;}

</style> 



<script type="text/javascript" src="./jquery-1_3_2_min.js"> </script> 
<script type="text/javascript" src="./imgpreview.js"> </script> 


<!-- テキストや、画像にプレビュー画像を付ける場合。 --> 

<ul id="sample1"> 

<li class="img-style"> 
<a href="プレビュー画像パス"> 
<img src="サムネイル画像パス" border="0" alt="" > 
<span style=" display: none;"> 
プレビュー画像に付けるキャプション
</span> </a> 
</li> 

<li class="img-style"> 
<a href="./imgPreview_m01.jpg"> 
<img src="./imgPreview_s01.jpg" border="0" alt=""> 
<span style=" display: none;"> 
IMG_9842 3104027147_496fc136d5_o.jpg by Toni.L, on Flickr
</span> </a> 
</li> 

</ul> 


<!-- リンクにプレビュー画像を付ける場合
     キャプションはリンク先アドレスが表示される --> 
     
<ul id="sample2"> 

<li class="img-style"> 
<a href="リンク先パス" rel="プレビュー画像パス"> 
<img src="サムネイル画像パス" border="0" alt=""> 
</a> 
</li> 

<li class="img-style"> 
<a href="http://www.flickr.com/" rel="./imgPreview_m04.jpg"> 
<img src="./imgPreview_s04.png" border="0" alt="Flickr"> 
</a> 
</li> 

</ul> 


<script type="text/javascript"> 

//TITTLE BELOW(画像、テキストにプレビュー)
$('ul#sample1 a').imgPreview({ //任意のid
    containerID: 'imgPreviewWithStyles',
    imgCSS: {
        height: 400 //画像の最大サイズ
    },
    // When container is shown:
    onShow: function(link){
        $('<span> ' + $(link).text() + '</span> ').appendTo(this);
    },
    // When container hides: 
    onHide: function(link){
        $('span', this).remove();
    }
});

//LINK+TITTLE BELOW(画像、テキストにプレビュー、プレビュー元にリンクを貼る)
$('ul#sample2 a').imgPreview({ //任意のid
    containerID: 'imgPreviewWithStyles',
    
    srcAttr: 'rel', //rel属性からprevew画像を読み込む
    imgCSS: {
    
        height: 400 //ウインドウの最大サイズ
    },
    // When container is shown:
    onShow: function(link){
        $('<span> ' + link.href + '</span> ').appendTo(this);
    },
    // When container hides: 
    onHide: function(link){
        $('span', this).remove();
    }
});

</script>

公開しているソースは自分が後で使用するためのものです。ただ、設置しようとして分からなくなった場合、より多くのサンプルソースがあったほうが良いと思いますので、公開しております。

	Copyright (C) Toni.L
	Copyright (C) Toni.L
	Copyright (C) Toni.L
	Copyright (C) Toni.L

スポンサーサイト

リンクやテキストに、画像プレビューが付けられるプラグイン (imgPreview)

サンプルソース

トラックバック Trackback URL

最新記事

フリーエリア

お世話になってるサイト

稀によくあるブログ

MHF INDEX

カウンター

更新する人

ブックマーカー

はてなブックマーク