プラグインアーカイブ - CodingMania

slick[jquery]を使ってサムネイル[カルーセル]が付いたスライドショー

yotigory — Sat, 12 Dec 2015 07:47:11 +0000

JSとCSSを読み込みます

main.js JavaScript

$(function() {
    //slick
    $(".slider-for01").slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        dots: true,
        //arrows: false,
        fade: true,
        adaptiveHeight: true,
        asNavFor: '.slider-nav01'
    });
    $(".slider-nav01").slick({
        slidesToShow: 8,
        slidesToScroll: 1,
        asNavFor: '.slider-for01',
        //centerMode: true,
        focusOnSelect: true
    });
    $(".slider-for02").slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        dots: true,
        //arrows: false,
        fade: true,
        adaptiveHeight: true,
        asNavFor: '.slider-nav02'
    });
    $(".slider-nav02").slick({
        slidesToShow: 8,
        slidesToScroll: 1,
        asNavFor: '.slider-for02',
        //centerMode: true,
        focusOnSelect: true
    });
    $(".slider-for03").slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        dots: true,
        //arrows: false,
        fade: true,
        adaptiveHeight: true,
        asNavFor: '.slider-nav03'
    });
    $(".slider-nav03").slick({
        slidesToShow: 8,
        slidesToScroll: 1,
        asNavFor: '.slider-for03',
        //centerMode: true,
        focusOnSelect: true
    });
    //枚数がカルーセルに満たない場合
    $(function() {
        $(".mod_slide").each(function() {
            var slidepak = $(this);
            var image = $(slidepak).find(".mod_slide_img");
            var num = $(slidepak).find(".mod_slide_img img").length;
            var dots = $(slidepak).find(".slick-dots li");
            var navimglast = $(slidepak).find("div.mod_slide_nav div.slick-track>div.slick-slide:last-child");
            var prevbtn = $(slidepak).find("button.slick-prev");
            var nextbtn = $(slidepak).find("button.slick-next");
            var slidernav = $(slidepak).find(".mod_slide_nav .slick-track>div");
            //
            if (num < 8) {
                $(dots).click(function() {
                    $(slidernav).removeClass("slick-current");
                    var indexnum = $(dots).index(this) + 1;
                    var checkimg = $(slidepak).find(".mod_slide_nav .slick-track>div:nth-child(" + indexnum + ")");
                    $(checkimg).addClass("slick-current");
                });

                function currmove() {
                    $(slidernav).removeClass("slick-current");
                    var curr = $(slidepak).find(".slick-dots li.slick-active");
                    var currIndex = $(dots).index(curr) + 1;
                    var btncheckimg = $(slidepak).find(".mod_slide_nav .slick-track>div:nth-child(" + currIndex + ")");
                    $(btncheckimg).addClass("slick-current");
                }
                $(prevbtn).click(function() {
                    currmove();
                });
                $(nextbtn).click(function() {
                    currmove();
                });
                // On swipe event
                $(image).on('swipe', function(event, slick, direction) {
                    currmove();
                    // left
                });

            }
        });
    });
});

HTMl

CSS

@charset "utf-8";



/* mod_body
-----------------------------------------*/
.mod_body{
  margin: 0 auto;
  width: 967px;
  margin-top: 50px;
}
.mod_body p{
  margin: 20px 0 20px 0;
}

/* mod_slide
-----------------------------------------*/
.mod_slide{
 margin:0 auto;
 width:706px;
 margin-bottom: 50px;
}
.mod_slide .mod_slide_nav .slick-slide{
 margin:5px;
}
.mod_slide .mod_slide_nav .slick-slide img{
 width:100%;
 height:auto;
 box-sizing:border-box;
 border:solid 2px #FFF;
 cursor: pointer;
}
.mod_slide .mod_slide_nav .slick-slide.slick-current img{
 border:solid 2px #f5a711;
}
.slick-initialized .slick-slide {
 overflow:hidden;
 }
/* slick-list */
.mod_slide_nav .slick-list {
  margin: 0 30px 0 30px;
}
/* slick-dots */
.slick-dots {
    margin-top: 10px;
    display: block;
    list-style: outside none none;
    padding: 0;
    text-align: center;
    width: 100%;
}
.slick-dots li {
    cursor: pointer;
    display: inline-block;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    position: relative;
    width: 15px;
}
.slick-dots li button {
    background: transparent none repeat scroll 0 0;
    border: 0 none;
    color: transparent;
    cursor: pointer;
    display: block;
    font-size: 0;
    height: 20px;
    line-height: 0;
    outline: medium none;
    padding: 5px;
    width: 20px;
}
.slick-dots li button:hover, .slick-dots li button:focus {
    outline: medium none;
}
.slick-dots li button:hover::before, .slick-dots li button:focus::before {
    opacity: 1;
}
.slick-dots li button::before {
    color: black;
    content: "●";
    font-size: 28px;
    height: 20px;
    left: 0;
    line-height: 20px;
    opacity: 0.25;
    position: absolute;
    text-align: center;
    top: 0;
    width: 15px;
}
.slick-dots li.slick-active button::before {
    color: black;
    opacity: 0.55;
    font-size: 34px;
}
/*  */
.slick-prev, .slick-next {
    background: transparent none repeat scroll 0 0;
    border: medium none;
    color: transparent;
    cursor: pointer;
    display: block;
    font-size: 0;
    height: 20px;
    line-height: 0;
    margin-top: -30px;
    outline: medium none;
    padding: 0;
    position: absolute;
    top: 50%;
    width: 20px;
    z-index:9;
}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
    background: transparent none repeat scroll 0 0;
    color: transparent;
    outline: medium none;
}
.slick-prev:hover::before, .slick-prev:focus::before, .slick-next:hover::before, .slick-next:focus::before {
    opacity: 1;
}
.slick-prev.slick-disabled::before, .slick-next.slick-disabled::before {
    opacity: 0.25;
}
.slick-prev::before, .slick-next::before {
    color: #666;
    font-size: 20px;
    line-height: 1;
    opacity: 0.75;
}
.slick-prev {
    left: 0px;
}
[dir="rtl"] .slick-prev {
    left: auto;
    right: 0px;
}
.slick-prev::before {
  content: " \f053";
  font-family: FontAwesome;
}
[dir="rtl"] .slick-prev::before {
  content: " \f054";
  font-family: FontAwesome;
}
.slick-next {
    right: 0px;
}
[dir="rtl"] .slick-next {
    left: 0px;
    right: auto;
}
.slick-next::before {
  content: " \f054";
  font-family: FontAwesome;
}
[dir="rtl"] .slick-next::before {
  content: " \f053";
  font-family: FontAwesome;
}

投稿 slick[jquery]を使ってサムネイル[カルーセル]が付いたスライドショーは CodingMania に最初に表示されました。

carouFredSel[jquery]を使ってサムネイルが付いたスライドショー

yotigory — Thu, 30 Jan 2014 08:02:46 +0000

JSを読み込みます

JavaScript

HTMl

CSS

.mod_mainslide {
 width:960px;
 margin:50px auto 0 auto;
}
.mod_carousel ul{
 height:350px;
 overflow:hidden;
}
.mod_carousel li { 
 width:960px;
 display: block;
 float: left;
}
.mod_pager{
 margin:10px 0 0 0;
 text-align:center;
}
.mod_pager a{
 margin:0 5px 0 5px;
 border:solid 1px #999;
 display:inline-block;
}
.mod_pager a.selected{
 border:solid 1px #333;
}

投稿 carouFredSel[jquery]を使ってサムネイルが付いたスライドショーは CodingMania に最初に表示されました。

carouFredSel[jquery]を使ってサムネイル[カルーセル]が付いたスライドショー

yotigory — Mon, 11 Nov 2013 05:49:38 +0000

JSを読み込みます

JavaScript

HTMl

CSS

/* slidewrapper */
#slidewrapper {
  position: relative;
  background-color: #fff;
  border: 1px solid #C9CACA;
  width: 719px;
  height: 449px;
  overflow: hidden;
}
#slidewrapper ul li {
  display: block;
  float: left;
}
#images { overflow: hidden; }
#thumbs {
  height: 70px;
  overflow: hidden;
}
#images {
  width: 721px;
  height: 354px;
}
#thumbs { }
#thumbs img {
  width: 110px;
  height: 54px;
  margin: 20px 7px 0 7px;
  cursor: pointer;
}
#thumbs img.selected {
  opacity: 0.8;
  -ms-filter: "alpha( opacity=80 )";
  filter: alpha(opacity=80);
}
#prev {
  width: 15px;
  height: 21px;
  display: block;
  background: transparent url("../img/bg_carousel_right.png") no-repeat 0 0;
  position: absolute;
  left: 695px;
  bottom: 37px;
}
#next {
  width: 15px;
  height: 21px;
  display: block;
  background: transparent url("../img/bg_carousel_left.png") no-repeat 0 0;
  position: absolute;
  left: 15px;
  bottom: 37px;
}

投稿 carouFredSel[jquery]を使ってサムネイル[カルーセル]が付いたスライドショーは CodingMania に最初に表示されました。

アラートをカスタマイズする。

yotigory — Mon, 02 Apr 2012 16:03:31 +0000

JSを読み込みます

HTMl

投稿アラートをカスタマイズする。は CodingMania に最初に表示されました。

ah-placeholder.jsを使って入力エリアに入力ヒントを表示します

yotigory — Thu, 01 Mar 2012 02:24:48 +0000

JSを読み込みます



$(function()
{
    $('.jq-placeholder').ahPlaceholder({
        placeholderColor : 'silver',
        placeholderAttr  : 'title',
        likeApple        : false
    });
});

HTMl

[html5]要素type="search"を使用した場合、chromeだとボックス内に×印が表示されてしまします。
type="text"にすることで×は表示されません。

CSS

/* input[type="search"]reset｜Safari Chrome Mac */
input[type="search"] {
	-webkit-appearance: textfield;
	-webkit-box-sizing: content-box;
}
input[type="search"]:focus {
	outline-offset: -2px;
}
input[type="search"]::-webkit-search-decoration {
	display: none;
}
.mod_search{
}
.mod_search form{
	width:270px;
	height:30px;
}
.mod_search input#search{
	width:192px;
	height:31px;
	float:left;
	border:none;
	padding:0 0 0 5px;
	background:transparent url('img/bg_search.jpg') no-repeat left top;
}
.mod_search input#search_btn{
	width:40px;
	height:31px;
	float:left;
}
.mod_search input#search:focus{
	outline:none;　/* Safari Chrome Mac */
}

投稿 ah-placeholder.jsを使って入力エリアに入力ヒントを表示しますは CodingMania に最初に表示されました。

jquery tile.jsでグリッドの高さを揃えます

yotigory — Tue, 16 Aug 2011 05:08:24 +0000

JSを読み込みます

HTMl




タイトル

キャプション
説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。



タイトル

キャプション
説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。



タイトル
写真とキャプションをとりました。



タイトル
写真とキャプションをとりました。



タイトル

キャプション
説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。



タイトル
写真とキャプションをとりました。

CSS

.mod_grid3hBox{
	width:720px;
	margin-right:-20px;
}
.mod_grid3hBox_inner{
	width:220px;
	float:left;
	margin:0 20px 10px 0;
	background-color:#FFFFCC;
}
.mod_grid3hBox_inner h3{
	font-weight: bold;
	font-size: 1.4em;
	border-bottom:double 3px #000;
	margin:0 0 5px 0;
}
.mod_grid3hBox_inner p.mod_caption{
	color:#666;
	padding:0 0 5px 0;
}

投稿 jquery tile.jsでグリッドの高さを揃えますは CodingMania に最初に表示されました。

Easy Sliderを使って横にスライドするスライドショー！

yotigory — Thu, 07 Jul 2011 16:21:24 +0000

JSを読み込みます

HTMl

▼HTMLソース[自動エンドレスループ]

CSS

.mod_slide{/* numeric controlsの位置指定の為 */
	position:relative;
	width:696px;
}

	#slider ul, #slider li,
	#slider2 ul, #slider2 li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider li,
	#slider2 li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:696px;
		height:241px;
		overflow:hidden; 
		}	
	#prevBtn, #nextBtn,
	#slider1next, #slider1prev{ 
		display:block;
		width:30px;
		height:77px;
		position:absolute;
		left:-30px;
		top:71px;
		z-index:1000;
		}	
	#nextBtn, #slider1next{ 
		left:696px;
		}														
	#prevBtn a, #nextBtn a,
	#slider1next a, #slider1prev a{  
		display:block;
		position:relative;
		width:30px;
		height:77px;
		background:url(../images/btn_prev.gif) no-repeat 0 0;	
		}	
	#nextBtn a, #slider1next a{ 
		background:url(../images/btn_next.gif) no-repeat 0 0;	
		}	
		
	/* numeric controls */	

	ol#controls{
		position:absolute;
		top:0px;
		right:0px;
		margin:5px 0 0 0;
		padding:0;
		height:20px;	
		}
	ol#controls li{
		margin:0 5px 0 0; 
		padding:0;
		float:left;
		list-style:none;
		height:20px;
		line-height:20px;
		}
	ol#controls li a{
		float:left;
		height:20px;
		line-height:20px;
		border:1px solid #ccc;
		background:#DAF3F8;
		color:#555;
		padding:0 6px;
		text-decoration:none;
		}
	ol#controls li.current a{
		background:#5DC9E1;
		color:#fff;
		}
	ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}

投稿 Easy Sliderを使って横にスライドするスライドショー！は CodingMania に最初に表示されました。

jqueryでクロスフェードするスライドショー

yotigory — Sat, 16 Apr 2011 06:55:44 +0000

JSを読み込みます

[fade.js]JavaScript

$(function(){
	$("#slidelist").html($("#slidelist li").get().reverse());
	
	$("#slidelist li").hover(function(){
		$(this).stop(true, true);
	},function(){
		crossFade();
	})
	
	function crossFade(){
			$("#slidelist li:last").delay(4000).fadeOut("slow",function(){
					$(this).prependTo("#slidelist").show()
					crossFade();
			})
	}
	crossFade();
})

HTMl

CSS

.mod_billboard {
	 width:500px;
	 height:300px;
}
.mod_billboard li{
  position: absolute;
}

投稿 jqueryでクロスフェードするスライドショーは CodingMania に最初に表示されました。

プラグイン アーカイブ - CodingMania

slick[jquery]を使ってサムネイル[カルーセル]が付いたスライドショー

JSとCSSを読み込みます

main.js JavaScript

HTMl

CSS

carouFredSel[jquery]を使ってサムネイルが付いたスライドショー

JSを読み込みます

JavaScript

HTMl

CSS

carouFredSel[jquery]を使ってサムネイル[カルーセル]が付いたスライドショー

JSを読み込みます

JavaScript

HTMl

CSS

アラートをカスタマイズする。

JSを読み込みます

HTMl

ah-placeholder.jsを使って入力エリアに入力ヒントを表示します

JSを読み込みます

HTMl

CSS

jquery tile.jsでグリッドの高さを揃えます

JSを読み込みます

HTMl

タイトル

タイトル

タイトル

タイトル

タイトル

タイトル

CSS

Easy Sliderを使って横にスライドするスライドショー！

JSを読み込みます

HTMl

▼HTMLソース[自動エンドレスループ]

CSS

jqueryでクロスフェードするスライドショー

JSを読み込みます

[fade.js]JavaScript

HTMl

CSS

プラグインアーカイブ - CodingMania