● 内容
① セレクトボックスで画像を選択します。
② フェードスピードの指定が可能。
● 変更来歴
① スクリプトを簡単にしたものを追加(簡易版）
● 設置例
● やり方
① ピグ画像をセレクトボックスの選択により変えたいという要望に 対する記事のため、ピグ画像を例にやり方を説明します。
② 用意する画像の例（例では３画像用意しました）
③ フリープラグインへ下記を追加する
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>(function(j){j(function(){$=jQuery=j})})($)</script>
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css"></script>
<script type="text/javascript">
$(document).ready(function(){
selectbox_change('#pigg_image_area',1000);
});
</script>
■ 説明
selectbox_change('#pigg_image_area',1000);
'#pigg_image_area'・・・セレクタ名（複数設置する場合はここを変える）
1000・・・フェードタイム(ミリ秒） 1000は１秒の意味。
● 簡易版
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>(function(j){j(function(){$=jQuery=j})})($)</script>
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css"></script>
<script type="text/javascript">
$(document).ready(function(){
selectbox_change2('#pigg_image_area',1000);
});
</script>
④ 記事、メッセージボード、フリースペース、フリープラグインなどに
ＨＴＭＬモードで入れる。
<div id="pigg_image_area">
<div id="image_area">
<img alt="pigg1" src="画像のＵＲＬ①" class="active">
<img alt="pigg2" src="画像のＵＲＬ②">
<img alt="pigg3" src="画像のＵＲＬ③">
</div>
<br>
<div id="sbox_area" align="center">
<select name="sbox1" id="sbox1">
<option value="none">選択</option>
<option value="画像のＵＲＬ①">画像１</option>
<option value="画像のＵＲＬ②">画像２</option>
<option value="画像のＵＲＬ③">画像３</option>
</select>
</div>
</div>
● 簡易版
<div id="pigg_image_area">
<div id="image_area">
<img alt="pigg1" src="画像のＵＲＬ①" class="active">
<img alt="pigg2" src="画像のＵＲＬ②">
<img alt="pigg3" src="画像のＵＲＬ③">
</div>
<br>
<div id="sbox_area" align="center">
<select name="sbox1" id="sbox1">
<option value="none">選択</option>
<option value="0">画像１</option>
<option value="1">画像２</option>
<option value="2">画像３</option>
</select>
</div>
</div>
⑤ ＣＳＳへ下記を追加する。
/* ------------------------------------ */
/* イメージセレクトボックスコントロール */
/* ------------------------------------ */
#pigg_image_area{/* ピグ表示エリア全体 */
width:320px; /* 幅 */
margin:auto;
}
#pigg_image_area #image_area{/* 画像表示エリア */
width:320px; /* 画像幅 */
height:240px; /* 画像の高さ */
display:block;
position:relative; /* 相対配置 */
margin:auto;
}
#pigg_image_area #image_area img{/* 通常画像 */
position:absolute; /* 絶対配置 */
top:0; /* 位置 */
left:0; /* 位置 */
z-index:8; /* 重なりの優先度 */
}
#pigg_image_area #image_area img.active{/* 表示中画像 */
z-index:10; /* 重なりの優先度 */
}
#pigg_image_area #image_area img.last-active{/* 表示切り替え時画像 */
z-index:9; /* 重なりの優先度 */
}
#pigg_image_area #sbox_area{/* セレクトボックス 全体*/
width:320px; /* 幅 */
}
#pigg_image_area #sbox_area option{/* セレクトボックス */
width:290px; /* 幅 */
}
● ソースコード
// select box image change
function selectbox_change(selec,fadeSpeed){
$(selec+" select#sbox1").change(function(){
$(selec+" select#sbox1 option:selected").each(function(){
var active_img,controls_img;
active_img=$(selec+' #image_area' + " img.active");
var sbox_value = $(this).attr("value");
var controls_img;
$(selec+' #image_area img').each(function(){
if($(this).attr("src")==sbox_value){
controls_img = $(this);
}
});
if(sbox_value!="none"){
active_img.addClass("last-active");
controls_img.css({opacity: 0.0}).addClass('active').animate({opacity: 1.0}, fadeSpeed,
function() {
active_img.removeClass('active last-active');
});
}
});
}).change();
}