#js(){{{{{ <script type="text/javascript"> $(function(){ /* 今後JSプラグインでstyleが使えなくなるのに備えてインラインcssでスタイル定義する */ var style = '<style type="text/css">'+ '.gallery {display:inline-block;width:600px;height:390px;margin-top:10px;position:relative;}'+ '.active {display:inline-block;}'+ '.gallery img {display:none;}'+ '.gallery_list > img,.gallery_list > div {position:absolute;overflow:hidden;left:0;top:0;bottom:0;background-color:#C0C0C0;}'+ '.gallery_list > div {font-size:24px;margin:auto;height:80px;text-align:center;}'+ '/* btn */'+ 'div.gallery_btn {position:absolute;right:0;}'+ '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;}'+ '</style>'; $(style).appendTo('head'); /* 初期値 */ var $width = 600; // 横幅 var $height = 337; // 高さ var $btn_h = 10; // ボタン位置 var $fade_speed = 800; // フェード処理の早さ(ミリ秒) var $img_max = 100; // 画像最大枚数 /* 読み込むタイミングをこのJSで管理する */ $('.gallery img').each(function() { $(this).removeClass('lazy atwiki_plugin_ref') .attr('data-origin', $(this).attr('data-original')) .removeAttr('data-original'); }); $('.gallery').each(function(){ /* 画像を移動 */ var div1 = $('<div>').addClass('gallery_list'); $(' img', this).each(function(i,img){ $(img).css({'z-index': $img_max - i}); $(div1).append($(img)); }); $(this).html($(div1)); /* 画像の初期位置を設定 */ $(' div.gallery_list img', this).css({ 'width':$width, 'height':$height }); $(' div.gallery_list img:first', this).addClass('active').show(); /* 画像の読み込みを開始する */ $(' div.gallery_list img', this).each(function() { $(this).on('error', function() { $(this).insertBefore( $('<div>').css({ 'width':$width, 'z-index':$(this).css('z-index') }).text('画像の読み込みに失敗しました')); $(this).remove(); }); /* コールバックより後に読み込み開始する(src指定) */ $(this).attr('src', $(this).attr('data-origin')); }); /* クリック判定用の透明なdiv作成 */ var prev = $('<div>').addClass('prev'); var next = $('<div>').addClass('next'); $(this).append($(prev)).append($(next)); $(' div.prev', this).css({ 'z-index': $img_max + 1, 'width':$width/2, 'height':$height, 'position':'absolute', 'top':0, 'left':0, }); $(' div.next', this).css({ 'z-index': $img_max + 1, 'width':$width/2, 'height':$height, 'position':'absolute', 'top':0, 'right':0, }); /* ボタン作成 */ var imgNum = $('img', div1).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)); $(' div.gallery_btn', this).css({ 'top':$height + $btn_h, }); }); /* ひとつ前にフェードする処理 */ $('.gallery div.prev').click(function(){ var aaa = $(this).parent(); var active = $(' div.gallery_list img.active', aaa); var size = $(' div.gallery_list img', aaa).length; var index = 1 + $(' div.gallery_list img', aaa).index(active); if(index == 1){var num = size;} else{var num = -1 + index;} gallery_click(aaa, num); }); /* ひとつ次にフェードする処理 */ $('.gallery div.next').click(function(){ var aaa = $(this).parent(); var active = $(' div.gallery_list img.active', aaa); var size = $(' div.gallery_list img', aaa).length; var index = 1 + $(' div.gallery_list img', aaa).index(active); if(index == size){var num = 1;} else{var num = 1 + index;} gallery_click(aaa, num); }); /* ボタン処理 */ $('div.gallery_btn div').click(function() { var aaa = $(this).parent().parent(); var num = $(this).text(); if(!($(this).hasClass('checked'))){ gallery_click(aaa, num); } }); function gallery_click(aaa, num){ /* アニメーション終了 */ $(' div.gallery_list img', aaa).finish(); /* フェード処理 */ var active = $(' div.gallery_list img.active', aaa); var next = $(' div.gallery_list img:nth-of-type('+num+')', aaa); active.fadeOut($fade_speed).removeClass('active'); next.fadeIn($fade_speed).addClass('active'); /* ボタン処理 */ var ccc = $(' div.gallery_btn div:nth-of-type('+num+')', aaa); $(ccc).parent().each(function() { $('div', this).removeClass('checked'); }); $(ccc).addClass('checked'); } }); </script> }}}}}
Comments policy & Terms of Use
・ネタバレ自粛期間中はシナリオや真名のネタバレは禁止です!
ネタバレ自粛期間の文字列挿入箇所
・コメントの内容に準じたコメントフォームを利用しましょう!
※報告を扇動したり異なるフォームへの投稿が散見した場合、coや規制対応することがあります
・現在、異なる板へのガチャ報告に利用者が定型文で誘導を行えるようルール改定するか議論中です。
時間がありましたら賛成/反対だけで構わないのでレスの協力お願いします
閉じる