「javascript/gallery」の編集履歴（バックアップ）一覧はこちら
javascript/gallery - (2017/04/27 (木) 20:13:58) の１つ前との変更点
追加された行は緑色になります。
削除された行は赤色になります。
#js(){{{{{
<style>
.gallery {
display:inline-block;
width:600px;
height:390px;
margin-top:10px;
position:relative;
}
.gallery img {
position:absolute;
left:0;
top:0;
}
.gallery img:nth-of-type(n+2) {
display:none;
}
/* 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-top-left-radius: 7px;
border-bottom-left-radius: 7px;
-webkit-border-top-left-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
-moz-border-radius-topleft: 7px;
-moz-border-radius-bottomleft: 7px;
}
div.gallery_btn div:last-child {
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
-webkit-border-top-right-radius: 7px;
-webkit-border-bottom-right-radius: 7px;
-moz-border-radius-topright: 7px;
-moz-border-radius-bottomright: 7px;
}
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>
<script type="text/javascript">
$(document).ready(function(){
/* 初期値 */
var $width = 600; // 横幅
var $height = 337; // 高さ
var $btn_h = 10; // ボタン位置
var $fade_speed = 800; // フェード処理の早さ（ミリ秒）
$('.gallery').each(function(){
/* 画像を移動 */
var div1 = $('<div>').addClass('gallery_list');
$(' img', this).each(function(){
$(div1).append($(this));
});
$(this).html($(div1));
/* 画像の初期位置を設定 */
$(' div.gallery_list img', this).css({'position':'relative', 'overflow':'hidden', 'width':$width, 'height':$height});
$(' div.gallery_list img', this).hide().css({'position':'absolute', 'top':0, 'left':0});
$(' div.gallery_list 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({
'width':$width/2,
'height':$height,
'position':'absolute',
'top':0,
'left':0,
});
$(' div.next', this).css({
'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_click($(this), 1);
});
/* ひとつ前にフェードする処理 */
$('.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>
}}}}}
#js(){{{{{
<style>
.gallery {
display:inline-block;
width:600px;
height:390px;
margin-top:10px;
position:relative;
}
.gallery img {
position:absolute;
left:0;
top:0;
}
.gallery img:nth-of-type(n+2) {
display:none;
}
/* 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-top-left-radius: 7px;
border-bottom-left-radius: 7px;
-webkit-border-top-left-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
-moz-border-radius-topleft: 7px;
-moz-border-radius-bottomleft: 7px;
}
div.gallery_btn div:last-child {
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
-webkit-border-top-right-radius: 7px;
-webkit-border-bottom-right-radius: 7px;
-moz-border-radius-topright: 7px;
-moz-border-radius-bottomright: 7px;
}
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>
<script type="text/javascript">
$(document).ready(function(){
/* 初期値 */
var $width = 600; // 横幅
var $height = 337; // 高さ
var $btn_h = 10; // ボタン位置
var $fade_speed = 800; // フェード処理の早さ（ミリ秒）
$('.gallery').each(function(){
/* 画像を移動 */
var div1 = $('<div>').addClass('gallery_list');
$(' img', this).each(function(){
$(div1).append($(this));
});
$(this).html($(div1));
/* 画像の初期位置を設定 */
$(' div.gallery_list img', this).css({'position':'relative', 'overflow':'hidden', 'width':$width, 'height':$height});
$(' div.gallery_list img', this).hide().css({'position':'absolute', 'top':0, 'left':0});
$(' div.gallery_list 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({
'width':$width/2,
'height':$height,
'position':'absolute',
'top':0,
'left':0,
});
$(' div.next', this).css({
'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').each(function(){
gallery_click($(this), 1);
});
/* ひとつ前にフェードする処理 */
$('.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や規制対応することがあります
・現在、異なる板へのガチャ報告に利用者が定型文で誘導を行えるようルール改定するか議論中です。
時間がありましたら賛成/反対だけで構わないのでレスの協力お願いします
閉じる