img アーカイブ - CodingMania

サムネイルの画像をクリックで拡大・切り替え・表示します！[キャプション付]

yotigory — Mon, 01 Sep 2014 08:10:08 +0000

JSを読み込みます

[swapimage.js]JavaScript

// JavaScript Document
$(function() {
    $(".mod_thumlist").each(function() {
        var click_flg = false;
        var photoH = $(this).find(".mod_thumlist_photo_entry img").innerHeight();
        var captionH = $(this).find(".mod_thumlist_photo_entry p").innerHeight();
        $(this).find(".mod_thumlist_photo").css("height", photoH + captionH + "px");
        var linkbtn = $(this).find("ul li a");
        var bigimgwrap = $(this).find(".mod_thumlist_photo");
        $(linkbtn).click(function() {
            if (click_flg == false) {
                click_flg = true;
                $(bigimgwrap).prepend("" + $(this).attr("title") + "");
                var removeimg = $(bigimgwrap).find(".mod_thumlist_photo_entry:eq(1)");
                $(removeimg).stop(true, false).fadeOut("fast", function() {
                    $(this).remove();
                    click_flg = false;
                });
                click_flg = false;
                return false;
            } else {
                return false;
            }
        });
    });
});

HTMl












オレンジのキャプション

CSS

/*
-----------------------------------------*/
.mod_thumlist li{
	width:60px;
	height:60px;
	float:left;
	background:none;
	padding:0 10px 0px 0;
	margin:0 0 10px 0;
}
.mod_thumlist li a{
	display:block;
}
.mod_thumlist li a:link    {}
.mod_thumlist li a:visited {}
.mod_thumlist li a:hover   {opacity:0.8;}
.mod_thumlist li a:active  {opacity:0.8;}
/* IE—p «*/
.mod_thumlist li a:hover img {filter:alpha(opacity=80);}

.mod_thumlist_photo{
}
.mod_thumlist_photo_entry{
	position:absolute;
	width:700px;
}

投稿サムネイルの画像をクリックで拡大・切り替え・表示します！[キャプション付] は CodingMania に最初に表示されました。

サムネイル画像のマウスオーバーで画像を大きく表示、クリックするとリンク先とびます。

yotigory — Tue, 06 May 2014 15:13:39 +0000

JSを読み込みます

[swapimage.js]JavaScript

$(function(){
 $(".mod_thumbnail").each(function(){
  var set = $(this);
  var btn = set.find(".thumbnaillist li img");
  var image = set.find(".mainimglist img");
	// hover時
	$(btn).hover(function(){
    var imagesrc=$(this).attr("class");
		$(image).attr("src","img/"+imagesrc+".jpg").fadeIn();
		$(image).attr("alt",$(this).attr("title"));
	});
});
});

HTMl

CSS

/* サムネイル画像表示（thumbnaillist）
-----------------------------------------*/
.thumbnaillist{
	margin:10px 0 0 0;
}
.thumbnaillist ul{
}
.thumbnaillist li{
	width:60px;
	height:auto;
	float:left;
	background:none;
	padding:0 10px 0px 0;
	margin:0 0 10px 0;
}
.thumbnaillist li img{
	width:60px;
	height:auto;
}
.thumbnaillist li a{
	display:block;
}
.thumbnaillist li a:link    {}
.thumbnaillist li a:visited {}
.thumbnaillist li a:hover   {opacity:0.8;}
.thumbnaillist li a:active  {opacity:0.8;}
/* IE用 ↓*/
.thumbnaillist li a:hover img {filter:alpha(opacity=80);}


/* メイン画像表示（mod_mainimglist）
-----------------------------------------*/
.mainimglist{
	width:700px;
	height:350px;
	margin:0 0 0 0;
}
.mainimglist img{
}

/* clearfix：float解除＆親要素に高さを算出させる
-----------------------------------------*/
.ex_clearfix:after {
  content: ".";  /* 新しい要素を作る */
  display: block;  /* ブロックレベル要素に */
  clear: both;
  height: 0;
  visibility: hidden;
}
.ex_clearfix {
  min-height: 1px;
}
* html .ex_clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}

投稿サムネイル画像のマウスオーバーで画像を大きく表示、クリックするとリンク先とびます。は CodingMania に最初に表示されました。

[キャプション付き]サムネイルの画像をマウスオーバーで拡大・切り替え・表示します！

yotigory — Sat, 08 Mar 2014 07:49:06 +0000

JSを読み込みます

[swapimage.js]JavaScript

$(function(){
 $(".mod_thumbnail").each(function(){
  var set = $(this);
  var btn = set.find(".thumbnaillist li a");
  var image = set.find(".mainimglist img");
  var cap = set.find(".mainimglist p");

	// hover時
	$(btn).hover(function(){
		$(image).attr("src",$(this).attr("href")).fadeIn();
		$(image).attr("alt",$(this).attr("title"));
		$(cap).text($(this).attr("title"));

	});
	//クリック時   
	$(".thumbnaillist a").click(function(){
	return false;
	});
});
});

HTMl

CSS

/* mod_thumbnail
--------------------------------------------*/
.mod_thumbnail{
 margin:0 0 30px 0;
}

/* サムネイル画像表示（thumbnaillist）
-----------------------------------------*/
.thumbnaillist{
}
.thumbnaillist ul{
}
.thumbnaillist li{
	width:60px;
	height:60px;
	float:left;
	background:none;
	padding:0 10px 0px 0;
	margin:0 0 10px 0;
}
.thumbnaillist li a{
	display:block;
}
.thumbnaillist li a:link    {}
.thumbnaillist li a:visited {}
.thumbnaillist li a:hover   {opacity:0.8;}
.thumbnaillist li a:active  {opacity:0.8;}
/* IE用 ↓*/
.thumbnaillist li a:hover img {filter:alpha(opacity=80);}


/* メイン画像表示（mod_mainimglist）
-----------------------------------------*/
.mainimglist{
	width:700px;
	height:350px;
	margin:20px 0 0 0;
}
.mainimglist img{
}

投稿 [キャプション付き]サムネイルの画像をマウスオーバーで拡大・切り替え・表示します！は CodingMania に最初に表示されました。

carouFredSel[jquery]を使ってタブをクリックできるスライドショー

yotigory — Tue, 12 Nov 2013 07:14:50 +0000

JSを読み込みます

JavaScript

HTMl

CSS

/* carousel
-----------------------------------------*/
.mod_mainslide {
 width:952px;
 margin:50px auto 0 auto;
 border:4px solid #333;
}
.mod_mainslide_wrap {
 position:relative;
 width:952px;
 height:350px;
}
.caroufredsel_wrapper{
 margin-top:0px!important;
}
#carousel ul{
 height:350px;
 overflow:hidden;
}
#carousel li { 
 width:952px;
 display: block;
 float: left;
}
#pager {
 position:absolute;
 top:-49px;
 left:-4px;
}
#pager a {
 float:left;
 width:127px;
 height:45px;
 padding:0 2px 0 0;
 display:block;
}
#pager a.menu01{
	background:transparent url('../img/slide_nav01.png') no-repeat left top;
}
#pager a.menu01.selected{
	background:transparent url('../img/slide_nav01_current.png') no-repeat left top;
}
#pager a.menu02{
	background:transparent url('../img/slide_nav02.png') no-repeat left top;
}
#pager a.menu02.selected{
	background:transparent url('../img/slide_nav02_current.png') no-repeat left top;
}
#pager a.menu03{
	background:transparent url('../img/slide_nav03.png') no-repeat left top;
}
#pager a.menu03.selected{
	background:transparent url('../img/slide_nav03_current.png') no-repeat left top;
}
#pager a.menu04{
	background:transparent url('../img/slide_nav04.png') no-repeat left top;
}
#pager a.menu04.selected{
	background:transparent url('../img/slide_nav04_current.png') no-repeat left top;
}
#pager a.menu05{
	background:transparent url('../img/slide_nav05.png') no-repeat left top;
}
#pager a.menu05.selected{
	background:transparent url('../img/slide_nav05_current.png') no-repeat left top;
}

投稿 carouFredSel[jquery]を使ってタブをクリックできるスライドショーは CodingMania に最初に表示されました。

carouFredSel[jquery]を使った前後のスライドをグレーアウトするスライドショー。

yotigory — Tue, 12 Nov 2013 06:06:33 +0000

JSを読み込みます

JavaScript

HTMl











prev next

CSS

/* carousel
-----------------------------------------*/
.mod_mainslide {
  min-width: 960px;
  height: 350px;
  overflow: hidden;
  position: relative;
}
.mod_mainslide_wrap {
  position: absolute;
  width: 2880px;
  min-width: 2880px;
  left: 50%;
  margin-left: -1440px;
}
#carousel li { float: left; }
#pager {
  position: absolute;
  z-index: 999;
  top: 320px;
  left: 0px;
  width: 100%;
  text-align: center;
}
#pager a {
  display: inline-block;
  margin: 0 10px;
  width: 13px;
  height: 13px;
  background: url('../img/bg_sprite.png') no-repeat -200px 0px;
}
#pager a.selected { background-position: -200px -13px; }
#pager a span { display: none; }
#slide_prev span, #slide_next span { display: none; }
#slide_prev, #slide_next {
  display: block;
  width: 960px;
  height: 350px;
  position: absolute;
  top:0px;
}
#slide_prev {
  left:0px;
  background: url('../img/bg_nav.png') no-repeat left top;
}
#slide_next {
  left:1920px;
  background: url('../img/bg_nav.png') no-repeat left top;
}

投稿 carouFredSel[jquery]を使った前後のスライドをグレーアウトするスライドショー。は CodingMania に最初に表示されました。

carouFredSel[jquery]を使ったカルーセル

yotigory — Mon, 11 Nov 2013 07:41:36 +0000

JSを読み込みます

JavaScript

HTMl



文字も入ります
文字も入ります
文字も入ります
文字も入ります
文字も入ります

prev next

CSS

/* carousel
-----------------------------------------*/
.mod_slidepanel {
    margin: 0 auto;
    position: relative;
    width: 990px;
}
#carouselpanel li{
 position:relative;
 width:240px;
  height: 150px;
  margin: 0 10px 0 0;
  background-color: #FFF;
  float: left;
 font-size:93%; /* 12px */
}

#carouselpanel li a{
 display:block;
}
#carouselpanel li a span{
 display:inline-block;
 padding:8px 15px 0 15px;
}
#carouselpanel li a:link    {color:#000; text-decoration:none;}
#carouselpanel li a:visited {color:#000; text-decoration:none;}
#carouselpanel li a:hover   {color:#000; text-decoration:underline;}
#carouselpanel li a:active  {color:#000; text-decoration:underline;}

#panelslide_prev span,
#panelslide_next span{
	display: none;
}
#panelslide_prev,
#panelslide_next{
 display:block;
 width:33px;
 height:55px;
 position:absolute;
 top:40px;
}
#panelslide_prev{
 left:-33px;
	background: url('../img/bg_sprite.png') no-repeat 0px 0px;
}
#panelslide_next{
 left:993px;
	background: url('../img/bg_sprite.png') no-repeat -100px 0px;
}

投稿 carouFredSel[jquery]を使ったカルーセルは CodingMania に最初に表示されました。

画像置換でグローバルナビゲーションを作ります。

yotigory — Mon, 11 Jun 2012 15:16:30 +0000

HTMl



メニュー01
メニュー02
メニュー03
メニュー04
メニュー05

CSS

/* mod_globalnav 画像置換
-----------------------------------------*/
.mod_globalnav{
  height:45px;
}
.mod_globalnav ul{
  margin:0 auto;
  width:750px;
  height:45px;
  overflow:hidden;
  position:relative;
}
.mod_globalnav ul li{
  float:left;
  width:150px;
  height:45px;
  overflow:hidden;  
}
.mod_globalnav ul li a{
  display:block;
  height:45px;
  text-indent: -9999px;
  background-image: url('bg_globalnav.jpg');  
  background-repeat:no-repeat;

}
.mod_globalnav ul li a.nav01{background-position:0px 0px;  width:150px;}
.mod_globalnav ul li.current-menu-item a.nav01,
.mod_globalnav ul li a.nav01:hover{background-position:0px -45px;}

.mod_globalnav ul li a.nav02{background-position:-150px 0px;  width:150px;}
.mod_globalnav ul li.current-menu-item a.nav02,
.mod_globalnav ul li a.nav02:hover{background-position:-150px -45px;}

.mod_globalnav ul li a.nav03{background-position:-300px 0px;  width:150px;}
.mod_globalnav ul li.current-menu-item a.nav03,
.mod_globalnav ul li a.nav03:hover{background-position:-300px -45px;}

.mod_globalnav ul li a.nav04{background-position:-450px 0px;  width:150px;}
.mod_globalnav ul li.current-menu-item a.nav04,
.mod_globalnav ul li a.nav04:hover{background-position:-450px -45px;}

.mod_globalnav ul li a.nav05{background-position:-600px 0px;  width:150px;}
.mod_globalnav ul li.current-menu-item a.nav05,
.mod_globalnav ul li a.nav05:hover{background-position:-600px -45px;}

投稿画像置換でグローバルナビゲーションを作ります。は CodingMania に最初に表示されました。

CSSでinput画像ボタンにロールオーバーをつける

yotigory — Fri, 06 Apr 2012 04:55:41 +0000

HTMl

CSS

.mod_formbtn{
	width:500px;
	text-align:center;
}
.mod_formbtn ul{
 letter-spacing:-0.4em;
 }
.mod_formbtn ul li{
 letter-spacing:normal;
 display:inline-block;
 *display: inline;
 *zoom: 1;
 margin:0 10px 0 10px;
}
.mod_formbtn ul li a{
  display:block;
 height:45px;
 overflow:hidden;
}

.mod_formbtn ul li.send{
 background:transparent url('send_on.gif') no-repeat left top;
}
.mod_formbtn ul li.back{
 background:transparent url('back_on.gif') no-repeat left top;
}
.mod_formbtn input:hover {
 opacity: 0.0;
 /* IE */
 filter: alpha(opacity=0);
}

投稿 CSSでinput画像ボタンにロールオーバーをつけるは CodingMania に最初に表示されました。

サムネイルの画像をクリックで拡大・切り替え・表示します！

yotigory — Thu, 01 Mar 2012 03:05:52 +0000

JSを読み込みます

[gallery.js]JavaScript

// JavaScript Document
$(window).on('load resize', function() {
    //写真の高さ取得
    var photoH = $("#photo>img").innerHeight();
    $("#photo").css("height", photoH + "px");
});
$(function() {
    var click_flg = false;
    $("#navi a").click(function() {
        if (click_flg == false) {
            click_flg = true;
            $("#photo img").before("");
            $("#photo img:last").stop(true, false).fadeOut("fast", function() {
                $(this).remove();
                click_flg = false;
            });
            return false;
        } else {
            return false;
        }
    });
});


//1ページに複数の場合
$(window).on('load resize', function() {
    $(".mod_gallery").each(function() {
        //写真の高さ取得
        var photoH = $(this).find(".mod_gallery_photo>img").innerHeight();
        $(this).find(".mod_gallery_photo").css("height", photoH + "px");
    });
    $(function() {
        var click_flg = false;
        $(".mod_gallery_navi a").click(function() {
            if (click_flg == false) {
                click_flg = true;
                var classname = $(this).attr("class");
                $("div." + classname + " img").before("");
                $("div." + classname + " img:last").stop(true, false).fadeOut("fast", function() {
                    $(this).remove();
                    click_flg = false;
                });
                return false;
            } else {
                return false;
            }
        });
    });
});

HTMl

CSS

#navi li{
	width:60px;
	height:60px;
	float:left;
	background:none;
	padding:0 10px 0px 0;
	margin:0 0 10px 0;
}
#navi li a{
	display:block;
}
#navi li a:link    {}
#navi li a:visited {}
#navi li a:hover   {opacity:0.8;}
#navi li a:active  {opacity:0.8;}
/* IE用 ↓*/
#navi li a:hover img {filter:alpha(opacity=80);}

#photo{
	margin:20px 0 0 0;
}
#photo img{
 position:absolute;
 width:100%;
 height:auto;
 max-width:700px;
}

/* mod_gallery(複数設置の場合)
-----------------------------------------*/
.mod_gallery{
 margin:20px 0 20px 0;
}
/* .mod_gallery_navi */
.mod_gallery_navi li{
	width:60px;
	height:60px;
	float:left;
	background:none;
	padding:0 10px 0px 0;
	margin:0 0 10px 0;
}
.mod_gallery_navi li a{
	display:block;
}
.mod_gallery_navi li a:link    {}
.mod_gallery_navi li a:visited {}
.mod_gallery_navi li a:hover   {opacity:0.8;}
.mod_gallery_navili a:active  {opacity:0.8;}
/* IE用 ↓*/
.mod_gallery_navi li a:hover img {filter:alpha(opacity=80);}

/* mod_gallery_photo */
.mod_gallery_photo{
	margin:20px 0 0 0;
}
.mod_gallery_photo img{
 position:absolute;
 width:100%;
 height:auto;
 max-width:700px;
}

投稿サムネイルの画像をクリックで拡大・切り替え・表示します！は CodingMania に最初に表示されました。

クリックで、右へ左へスライドするスライドショー

yotigory — Tue, 20 Sep 2011 14:50:27 +0000

JSを読み込みます

[billboard.js]JavaScript

$(function(){
	//初期設定
	$("#billboard ul").css("width",530*$("#billboard ul li").size()+"px");
	$("#billboard ul li:last").prependTo("#billboard ul");
	$("#billboard ul").css("margin-left","-530px");
	//ボタン前へ
	$("#prev").click(function(){
		$("#billboard ul").animate({
			marginLeft : parseInt($("#billboard ul").css("margin-left"))+530+"px"},"","swing" , 
		function(){
			$("#billboard ul").css("margin-left","-530px")
			$("#billboard ul li:last").prependTo("#billboard ul");
			$("#next,#prev").show();
		});
	});
	//ボタン次へ
	$("#next").click(function(){
		$("#billboard ul").animate({
			marginLeft : parseInt($("#billboard ul").css("margin-left"))-530+"px"},"","swing" , 
		function(){
			$("#billboard ul").css("margin-left","-530px");
			$("#billboard ul li:first").appendTo("#billboard ul");
			$("#next,#prev").show();
		});
	});
	//timer
	var timerID = setInterval(function(){
		$("#next").click();
	},5000);
	//reset
	$("#prev img,#next img").click(function(){
		clearInterval(timerID);
	});
});

HTMl








テキストの入力もできます。

CSS

.mod_billboardbelt{
	padding:40px 0 40px 0;
	background-color:#062D46;
    -webkit-box-shadow: 0 0 20px #162229 inset;
    -moz-box-shadow: 0 0 20px #162229 inset;
    box-shadow: 0 0 20px #162229 inset;
}
.mod_billboardcontent{
	width:630px;
	margin:0 auto;
	position:relative;
}

#billboard{
	width:530px;
	height:250px;
	overflow:hidden;
	position:relative;
}

#billboard ul li{
	float:left;
	width:520px;
	height:240px;
	display:block;
	border:solid 5px #3C4F5C;
}
.mod_billboardcontent_btn #next{
	position:absolute;
	top:110px;
	left:-50px;
	cursor:pointer;
}
.mod_billboardcontent_btn #prev{
	position:absolute;
	top:110px;
	left:550px;
	cursor:pointer;
}

投稿クリックで、右へ左へスライドするスライドショーは CodingMania に最初に表示されました。