jQueryで、画像をimg要素に読み込むに、attr()を使用しsrc属性を変更、画像表示をします。極一般的なものです(2015/05/16 追記)。
jQueryのattr()で属性を変更して画像表示
jQueryで、画像をimg要素に読み込むに、attr()を使用して、img要素のsrc属性の属性を変更(画像ＵＲＬ)、画像表示をしています。attr()には読み取りと書き込みの2種類の機能があります。(其の外の機能を持ったものも有る)
attr()で画像読み込み表示の方法
attr()で、対象のimg要素、src属性の画像ＵＲＬを変更すれば、画像を取得して表示します。
attr()は、HTMLの属性 (attribute) を扱うための「jQueryメソッド」です。
書式
● 属性の読み取り、attr(name)
name は文字型、属性名
● 属性へ書き込み、attr(key,value)
key は文字型、属性名。value は変更する値。
attr()使用の画像表示
仮に下記のような画像を表示する html 構造が有るとします。
<div id="image-box"><img /></div>
画像URLが変数 img_url にあるとすると次ぎのＪＳで表示できます。
オブジェクト形(連想配列形)で記載するなら、下記のようになる
var img_url="/main/images/toyota_car10.jpg";
$("#image-box").children("img").attr({'src':img_url});
複数の属性を設定するならば
$("#image-box").children("img").attr({'src':img_url,'width':640,'height':300});
通常、大きさはCSSでの設定が主であるから、通常はsrcだけ操作
src 1要素だけなら、文字形で下記のようにも出来る [注意]
$("#image-box").children("img").attr('src',img_url);
これで、画像ＵＲＬが正しければ、画像が表示されます。記載の画像ＵＲＬは当方の場合の例です。
[注意] 但し、IE8でこの「文字形」の記述が認識しない場合が有るので(どれが認識しないなどの詳細は全てをテストしていないので不明)、IEはトカク「変」な所があるので大事を取り「オブジェクト形」の記述で書くようにしている。
attr()使用の画像データの読み取り
画像データは、下記のように属性として埋め込んでいることが多いようです。読み取るには
<ul id="tab-menu">
<li><a href="/main/images/toyota_car10.jpg">INDEX1</a></li>
<li text="/main/images/toyota_car11.jpg">INDEX2</li>
<li rel="/main/images/toyota_car12.jpg">INDEX2</li>
</ul>
href属性にある場合
var img_url=$("#tab-menu").find("li").eq(0).children("a").attr("href");
text属性にある場合
var img_url=$("#tab-menu").find("li").eq(1).attr("text");
rel属性にある場合
var img_url=$("#tab-menu").find("li").eq(2).attr("rel");
このように読み取ることが出来ます。
text属性は勝手に作った属性ですが、読み取り書き込み可能です。属性名は任意です。
html的にはli要素に、rel属性は存在しませんが、読み取り書き込み可能です。
サムネールを表示して、attr()で画像ＵＲＬ読み取り
サムネールを表示して置くのも方法です。すでにキャッシュされていますので、直ぐ表示し、加工に便利な点がある。
<ul id="tab-menu">
<li><img src="/main/images/toyota_car10.jpg" width="64" height="30" /></li>
<li><img src="/main/images/toyota_car11.jpg" width="64" height="30" /></li>
<li><img src="/main/images/toyota_car11.jpg" width="64" height="30" /></li>
</ul>
サムネールsrc属性にある場合
var img_url=$("#tab-menu").find("li").eq(0).children("img").attr("src");
ここでのサムネールは加工された「小さな画像」ではなく、htmlで表示する大きさを変えています。
便利な反面、拡大表示しなくとも、不必要な画像をもＬＯＡＤしますのでこの点は問題です。枚数は少なめが良い。
注意、attr()はjQueryバージョン1.6で、「仕様変更」になりましたが、混乱が起き直ぐに1.6.1で、「元の仕様」に戻った経緯があります。1.6系の安定版は jquery-1.6.4 ですから問題は無いと思います。
この辺の詳細は、下記 ginpen.com さんの記事を参照ください
【参照】ginpen.com: CSSは分かるけどjQueryは苦手という人が .attr()と .prop()に親しんで...
動的にサムネールを作り表示する (2015/05/16 追記)
JSで「画像URLのリスト」を読み、それで指定位置にサムネールを表示したい場合があります。この場合JSを変更すれば画像を変更できるメリットがあります。
● 下記の様なサムネールを入れるDivボックスがあると仮定します。
別ページに「デモ」があります。
<div id="btn-box2"></div>
var assets_url=[];
var clickbtn=[];
var loadImage_len=0;
var image_max=0;
//オブジェクトを保存
var btnBox=$('#btn-box2').css({'display':'none'});
//画像URLのリスト
var imagelist=[
"/main/images/toyota_car10.jpg",
"/main/images/toyota_car11.jpg",
"/main/images/toyota_car12.jpg",
"/main/images/toyota_car13.jpg",
"/main/images/toyota_car16.jpg"
];
image_max=loadImage_len=imagelist.length;
assets_url=imagelist;
● 動的にサムネールを作る。
p要素の中にspan要素を入れているのは中央配置と番号ボタンに変更する場合有利なため。この辺は自由である。
1. 作り方が悪いと表示しないので注意のこと。
2. アクションを設定、attr処理をするには必ず append してから。
(DOMに認識されて無いと処理出来ない)
3. bodyにappendされれば画像を読み込み指定サイズで表示する。
処理の一例
var html="";
for (var i=0; i < image_max; i++) {
var btn='<span><img /></span>';
clickbtn[i]=btn;
html=html+btn;
}
html='<p>'+ html +'</p>';
//append
btnBox.append(html);
//action
btnBox.find('span').each(function(i){
$(this).children("img").attr({'src':imagelist[i],'width':'64','height':'30'});
$(this).click(function(){clickhandle(i)});
});
btnBox.css({'display':'block'});
//click-action
function clickhandle(no) {
//略す
}
---------------------------------------------------------
勿論大きさをCSSで設定しても良い
$(this).children("img").attr({'src':imagelist[i]}).css({'width':'64px','height':'30px'});
● ボタンにクラスを設定すれば、以下の様にも書ける。これらの設計は自由で有る。
書き方など多種多様なので、要するに、機能するように作れば良い。
var btn='<span class="thumbnal"><img /></span>';
$('.thumbnal').each(function(i){
//略す
});
● アクションが「a要素」にある場合。
LightBox系はほとんど「a要素」にアクション設定がなされている。こんな場合、href属性から画像URLを取得することになる。
またクリックアクションも「a要素」に与えることが多いので、最後に return false を入れないと機能しないので注意。
<p><a class="popslightbox" href="/main/images/testImage10.jpg">[ 画像を表示 1 ]</a>
//処理例の簡素化したもの
$('.popslightbox').each(function(i){
var url=$(this).attr('href');
$(this).click(function(){clickhandle(url)});
});
//click-action
function clickhandle(url) {
//略す
//重要
return false
}
追加のデモ (動的にサムネール作った画像表示)
簡単なサンプル
Example
単に、メニュー要素の中にあるＵＲＬデータを読み取り、attr()で画像ＵＲＬを変えているだけの単純なＪＳです。
サンプルのHTML JS CSS
HTML
下記のように記載する。画像ＵＲＬはサンプルのＵＲＬです。実際の場合は使用者の画像ＵＲＬを記載ください。
<ul id="tab-menu">
<li text="/main/images/toyota_car10.jpg">INDEX1</li>
<li text="/main/images/toyota_car11.jpg">INDEX2</li>
<li text="/main/images/toyota_car12.jpg">INDEX3</li>
</ul>
<div id="image-box"><img /></div>
text属性は当方が勝手に作った属性ですが、読み取り書き込み可能です。属性名は任意です。
JS
imgload02.js 必要な設定はＪＳ上部参照。
//imgload02.js
//日本語 簡易画像表示
(function($){
$(function () {
//指定場所のOPEN
var select_no=0;
var img_url="";
//指定場所のOPEN
$("#tab-menu").find("li").eq(select_no).addClass("active");
img_url=$("#tab-menu").find("li").eq(select_no).attr('text');
//指定画像を表示
$("#image-box").children("img").attr({'src':img_url});
//click-action
$("#tab-menu").find("li").click(function() {
//MENUのactiveをセットする
$("#tab-menu").find("li").removeClass("active");
$(this).addClass("active");
//画像URL取得、画像の読み込み表示
img_url=$(this).attr('text');
$("#image-box").children("img").attr({'src':img_url});
return false;
});
});
})(jQuery);
ＪＳ名、クラス名など修正したい場合は、html js css 共に該当部分を修正ください。自由な名前で設定できます。
.click()使用の場合は、原則、最後に return false を記入します。同一のＢＯＸに複数 click() を利用した場合に return false を記入しないと反応しないことがあります。
また、click()設定部に aリンク要素が有る場合は、必ず return false を記入ください。
CSS
imgload02.css
/* imgload02.css 日本語 */
/* tab-menu */
ul#tab-menu {
display:inline-block;
list-style:none;
width:100%;
height:20px;
margin:0;
padding:0;
}
#tab-menu li {
display:inline;
list-style:none;
width:60px;
height:20px;
line-height:20px;
font-size:11px;
font-weight:bold;
text-align:center;
margin-right:2px;
border-top-left-radius:5px;
border-top-right-radius:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-top-left:5px;
-webkit-border-radius-top-right:5px;
background-color:#888888;
float:left;
cursor:pointer;/*default*/
}
#tab-menu li.active {
background-color:#EEEEEE;
}
#tab-menu li:hover {
color:#FFFFFF;
background-color:#FF1493;
}
/* image-box */
#image-box {
display:block;
width:640px;
height:300px;
padding:0;
margin:0;
background-color:#000000;
overflow:hidden;
}
#image-box img {
width:100%;
height:100%;
}
現在、メニュー指定場所のOPEN、及び画像ＢＯＸの指定画像表示をＪＳで行っています。もしＪＳでなくHTMLで行う場合は下記のように修正します。
初期の画像設定の別の方法
HTMLの変更
メニュー liの最初に開きたい所にクラスを入れる
<li class="active" text="/main/images/toyota_car10.jpg">INDEX1</li>
画像ＢＯＸの画像ＵＲＬを直接記載する
<div id="image-box"><img src="/main/images/toyota_car10.jpg" /></div>
JSの変更
JS上部の以下の部分をコメントアウトにするか、もしくは削除する。
//指定場所のOPEN
//$("#tab-menu").find("li").eq(select_no).addClass("active");
//img_url=$("#tab-menu").find("li").eq(select_no).attr('text');
//指定画像を表示
//$("#image-box").children("img").attr({'src':img_url});
以上です。
[ この記事のURL ]
