「javascript/gallery」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
#js(){{{{{
<script type="text/javascript">
$(function(){
/* 今後JSプラグインでstyleが使えなくなるのに備えてインラインcssでスタイル定義する */
var style = '<style type="text/css">'+
'.gallery {display:inline-block;width:600px;height:337px;margin:10px 10px 60px 0px;position:relative;}'+
'.gallery img {display:none;position:absolute;overflow:hidden;left:0;top:0;bottom:0;background-color:#C0C0C0;width:100%;height:100%;}'+
'/* btn */'+
'div.gallery_btn {position:absolute;right:0;top:calc(100% + 10px);}'+
'div.gallery_btn div {position:relative;cursor:pointer;padding:5px 10px;float:left;border:solid 1px #aaa;margin-left:-1px;background:#eee;background-image:linear-gradient(top, #F6F6F6, #ccc);background-image:-ms-linear-gradient(top, #F6F6F6, #ccc);background-image:-moz-linear-gradient(top, #F6F6F6, #ccc);background-image:-webkit-gradient(linear, left top, left bottom, from(#F6F6F6), to(#ccc));box-shadow:2px 2px 6px #ddd;-moz-box-shadow:2px 2px 6px #ddd;-webkit-box-shadow:2px 2px 6px #ddd;text-shadow:1px 1px 0px #fff;}'+
'div.gallery_btn div:first-child {border-radius:7px 0 0 7px;-webkit-border-radius:7px 0 0 7px;-moz-border-radius:7px 0 0 7px;}'+
'div.gallery_btn div:last-child {border-radius:0 7px 7px 0;-webkit-border-radius:0 7px 7px 0;-moz-border-radius:0 7px 7px 0;}'+
'div.gallery_btn div.checked {color:#fff;background:#C3C3C3;background-image:linear-gradient(top, #C3C3C3, #DBDBDB);background-image:-ms-linear-gradient(top, #C3C3C3, #DBDBDB);background-image:-moz-linear-gradient(top, #C3C3C3, #DBDBDB);background-image:-webkit-gradient(linear, left top, left bottom, from(#C3C3C3), to(#DBDBDB));text-shadow:0px 0px 0px #fff;}'+
'/* for SP page */' +
'@media screen and ( max-width:600px ) {.gallery {margin:10px 0px 60px 0px;width:100%;height:calc((100vw - 20px) / 600 * 337);}}'+
'</style>';
$(style).appendTo('head');
/* 初期値 */
var $width = 600; // 横幅
var $height = 337; // 高さ
var $btn_h = 10; // ボタン位置
var $fade_speed = 800; // フェード処理の早さ（ミリ秒）
$('.gallery').each(function(){
$('img:first', this).addClass('active').show();
/* クリック判定用の透明なdiv作成 */
var prev = $('<div>').addClass('prev');
var next = $('<div>').addClass('next');
$(this).append($(prev)).append($(next));
$(' div.prev', this).css({
'z-index': 101,
'width':'50%',
'height':'100%',
'position':'absolute',
'top':0,
'left':0,
});
$(' div.next', this).css({
'z-index': 101,
'width':'50%',
'height':'100%',
'position':'absolute',
'top':0,
'right':0,
});
/* ボタン作成 */
var imgNum = $('img', this).length;
var div2 = $('<div>').addClass('gallery_btn');
for(var i=1; i<=imgNum; i++){
var btn = $('<div>').text(i);
if(i==1){$(btn).addClass('checked');}
$(div2).append($(btn));
}
$(this).append($(div2));
});
/* ひとつ前にフェードする処理 */
$('.gallery div.prev').click(function(){
var aaa = $(this).parent();
var active = $('.active', aaa);
var num = $('img', aaa).index(active) - 1;
if (num < 0){ num = $('img', aaa).length - 1;}
gallery_click(aaa, num);
});
/* ひとつ次にフェードする処理 */
$('.gallery div.next').click(function(){
var aaa = $(this).parent();
var active = $('.active', aaa);
var num = $('img', aaa).index(active) + 1;
if ($('img', aaa).length <= num){ num = 0; }
gallery_click(aaa, num);
});
/* ボタン処理 */
$('div.gallery_btn div').click(function() {
var aaa = $(this).parent().parent();
var num = parseInt($(this).text()) - 1;
if(!($(this).hasClass('checked'))){
gallery_click(aaa, num);
}
});
function gallery_click(aaa, num){
/* アニメーション終了 */
$('img', aaa).finish();
/* フェード処理 */
var active = $('.active', aaa);
var next = $('img:eq('+num+')', aaa);
active.fadeTo($fade_speed, 0).removeClass('active');
next.fadeTo($fade_speed, 1).addClass('active');
/* ボタン処理 */
var ccc = $('div.gallery_btn div:eq('+num+')', aaa);
$(ccc).parent().each(function() {
$('div', this).removeClass('checked');
});
$(ccc).addClass('checked');
}
});
</script>
}}}}}
#js(){{{{{
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
/* 今後JSプラグインでstyleが使えなくなるのに備えてインラインcssでスタイル定義する */
var style = '<style type="text/css">'+
'.gallery {display:inline-block;width:600px;height:337px;margin:10px 10px 60px 0px;position:relative;}'+
'.gallery img {display:none;position:absolute;overflow:hidden;left:0;top:0;bottom:0;background-color:#C0C0C0;width:100%;height:100%;}'+
'/* btn */'+
'div.gallery_btn {position:absolute;right:0;top:calc(100% + 10px);}'+
'div.gallery_btn div {position:relative;cursor:pointer;padding:5px 10px;float:left;border:solid 1px #aaa;margin-left:-1px;background:#eee;background-image:linear-gradient(top, #F6F6F6, #ccc);background-image:-ms-linear-gradient(top, #F6F6F6, #ccc);background-image:-moz-linear-gradient(top, #F6F6F6, #ccc);background-image:-webkit-gradient(linear, left top, left bottom, from(#F6F6F6), to(#ccc));box-shadow:2px 2px 6px #ddd;-moz-box-shadow:2px 2px 6px #ddd;-webkit-box-shadow:2px 2px 6px #ddd;text-shadow:1px 1px 0px #fff;}'+
'div.gallery_btn div:first-child {border-radius:7px 0 0 7px;-webkit-border-radius:7px 0 0 7px;-moz-border-radius:7px 0 0 7px;}'+
'div.gallery_btn div:last-child {border-radius:0 7px 7px 0;-webkit-border-radius:0 7px 7px 0;-moz-border-radius:0 7px 7px 0;}'+
'div.gallery_btn div.checked {color:#fff;background:#C3C3C3;background-image:linear-gradient(top, #C3C3C3, #DBDBDB);background-image:-ms-linear-gradient(top, #C3C3C3, #DBDBDB);background-image:-moz-linear-gradient(top, #C3C3C3, #DBDBDB);background-image:-webkit-gradient(linear, left top, left bottom, from(#C3C3C3), to(#DBDBDB));text-shadow:0px 0px 0px #fff;}'+
'/* for SP page */' +
'@media screen and ( max-width:600px ) {.gallery {margin:10px 0px 60px 0px;width:100%;height:calc((100vw - 20px) / 600 * 337);}}'+
'</style>';
$(style).appendTo('head');
/* 初期値 */
var $width = 600; // 横幅
var $height = 337; // 高さ
var $btn_h = 10; // ボタン位置
var $fade_speed = 800; // フェード処理の早さ（ミリ秒）
$('.gallery').each(function(){
$('img:first', this).addClass('active').show();
/* クリック判定用の透明なdiv作成 */
var prev = $('<div>').addClass('prev');
var next = $('<div>').addClass('next');
$(this).append($(prev)).append($(next));
$(' div.prev', this).css({
'z-index': 101,
'width':'50%',
'height':'100%',
'position':'absolute',
'top':0,
'left':0,
});
$(' div.next', this).css({
'z-index': 101,
'width':'50%',
'height':'100%',
'position':'absolute',
'top':0,
'right':0,
});
/* ボタン作成 */
var imgNum = $('img', this).length;
var div2 = $('<div>').addClass('gallery_btn');
for(var i=1; i<=imgNum; i++){
var btn = $('<div>').text(i);
if(i==1){$(btn).addClass('checked');}
$(div2).append($(btn));
}
$(this).append($(div2));
});
/* ひとつ前にフェードする処理 */
$('.gallery div.prev').click(function(){
var aaa = $(this).parent();
var active = $('.active', aaa);
var num = $('img', aaa).index(active) - 1;
if (num < 0){ num = $('img', aaa).length - 1;}
gallery_click(aaa, num);
});
/* ひとつ次にフェードする処理 */
$('.gallery div.next').click(function(){
var aaa = $(this).parent();
var active = $('.active', aaa);
var num = $('img', aaa).index(active) + 1;
if ($('img', aaa).length <= num){ num = 0; }
gallery_click(aaa, num);
});
/* ボタン処理 */
$('div.gallery_btn div').click(function() {
var aaa = $(this).parent().parent();
var num = parseInt($(this).text()) - 1;
if(!($(this).hasClass('checked'))){
gallery_click(aaa, num);
}
});
function gallery_click(aaa, num){
/* アニメーション終了 */
$('img', aaa).finish();
/* フェード処理 */
var active = $('.active', aaa);
var next = $('img:eq('+num+')', aaa);
active.fadeTo($fade_speed, 0).removeClass('active');
next.fadeTo($fade_speed, 1).addClass('active');
/* ボタン処理 */
var ccc = $('div.gallery_btn div:eq('+num+')', aaa);
$(ccc).parent().each(function() {
$('div', this).removeClass('checked');
});
$(ccc).addClass('checked');
}
});
</script>
}}}}}
Comments policy & Terms of Use
・ネタバレ自粛期間中はシナリオや真名のネタバレは禁止です！
ネタバレ自粛期間の文字列挿入箇所
・コメントの内容に準じたコメントフォームを利用しましょう！
※報告を扇動したり異なるフォームへの投稿が散見した場合、coや規制対応することがあります
・現在、異なる板へのガチャ報告に利用者が定型文で誘導を行えるようルール改定するか議論中です。
時間がありましたら賛成/反対だけで構わないのでレスの協力お願いします
閉じる