【Jquery】シンプルな画像切り替えJSサンプル

すごい簡単な画像切り替えのJS
ECサイトによくあるあれっすあれ。
前回に引き続き、ID割り振りとかめんどくさいのでエセ汎用ぽく作ってます。
ビバ!thisとかprevとかnextとかchildrenとか!

HTML

    <div class="change">
     <div class="main"><a href="img/sample.jpg" target="_blank"><img src="img/sample.jpg"></a></div>
     <div class="thums">
      <a href="img/sample.jpg" target="_blank"><img src="img/sample.jpg"></a>
      <a href="img/sample2.jpg" target="_blank"><img src="img/sample2.jpg"></a>
      <a href="img/sample3.jpg" target="_blank"><img src="img/sample3.jpg"></a>
     </div>
    </div>

SASS


		.change {
			width:720px;
			overflow:hidden;
			.main {
				float:left;
				width:610px;
			}
			.thums {
				width:95px;
				float:right;
				text-align:left;
				img {
					margin-bottom:10px;
				}
				span {
					display:block;
					margin-bottom:5px;
				}
			}
		}

CSS


		.change {
			width:720px;
			overflow:hidden;
		}
			.change .main {
				float:left;
				width:610px;
			}
			.change .thums {
				width:95px;
				float:right;
				text-align:left;
			}
				.change .thums img {
					margin-bottom:10px;
				}
				.change .thums span {
					display:block;
					margin-bottom:5px;
				}

JS

<script type="text/javascript" charset="utf-8">
$(function(){
	$(".change a").hover(
		function () {
			var ImgSrc = $(this).attr("href");
			$(this).parent().prev().children("a").attr({href:ImgSrc}).children("img").attr({src:ImgSrc});
			return false;
		},
		function () {
		}
	);
});
</script>

[jquery]超簡易なインライン要素のモーダルウィンドウ

せっかく作ったので一応載せておこう。
汎用性は…おそらく…ない…でしょう。^▽^;
IDとかclass割り振りとかそこまで組むのがいやだったので単純にnextで処理かけています。
なのでsampleブロックを複製すれば複数のモーダルが設置できます。

HTML

   <div class="sample">
    <a href="#" class="inline"><img src="sample.jpg"></a>
    <div class="modal-inline">
     <div class="modal-cont">
      <p><img src="sample_l.jpg"></p>
      <p>ここにテキスト</p>
     </div><!--//modal-cont-->
    </div><!--//modal-inline-->
   </div><!--//sample-->

   <div class="sample">
    <a href="#" class="inline"><img src="sample.jpg"></a>
    <div class="modal-inline">
     <div class="modal-cont">
      <p><img src="sample_l.jpg"></p>
      <p>ここにテキスト</p>
     </div><!--//modal-cont-->
    </div><!--//modal-inline-->
   </div><!--//sample-->

ぶっちゃけ、modal-inlineのdivはいらないっていう ^^;

CSS


.modal-cont {
	width: 50%;
	height:50%;
	margin: 0;
	background:#fff;
	position: fixed;
	z-index: 999;
	top:50%;
	left:50%;
	margin-left:-50%;
	margin-top:-50%;
	text-align:center;
	border-radius:30px;
}

.overlay {
	display: block;
	position: fixed;
	top: 0 ;
	left: 0 ;
	cursor:pointer;
	width: 100% ;
	height: 100%;
	min-height:100%;
	background: rgba( 0,0,0, 0.75 ) ;
	zoom:1;
	z-index: 300;
	}

JS

jQuery(function($){
	$(".inline").on('click', function() {
		$("body").css("overflow","hidden");
		$(this).next().fadeIn("fast");
		$(".modal-cont").before("<div class=overlay></div>");
	});
	
	$(document).on("click",".overlay ", function() {
		$("body").css("overflow","visible");
		$(".modal").fadeOut("fast");
		$(".overlay").remove();
	});
  });

【jquery】beforeやappendで追加した要素でonclickイベントが実行しないとき

ちょっとカスタマイズが必要だったので自作モーダル作ってたら、DOM追加した要素のclickが効かないので格闘すること1時間…。
開発者ツールでもエラーが出ないのでめっちゃ悩みました。

$(".yoso").before("<div class=close></div>").append("<div class=photo></div>");

<div class="yoso">しょーりゃく</div>

こういう感じでdivの中に要素追加した場合、下記のコードでは動きません。
追加要素に対してはスルーされてしまうようです。

$(".close").on('click', function() {
//省略
});

なので、こっちで記述すると良い模様~。

$(document).on("click",".close", function() {
//省略
});

長かったぜい…。

参考:jQueryのappendで追加した要素のclickイベントが動かない場合
http://milkyshade.com/javascript/166/

[jQuery]twitterの横幅520px以上に指定を変えたいとき

なんていうか、知らなかったでござる。

【jQuery】Twitter埋め込みウィジェットが最大520px固定になっていたので強引に戻す | Creator Clip http://creatorclip.info/2015/07/twitter-widget-max-width-520px

これ応用すればfacebookもいけるんじゃね?とか浅い考えです。はい。
iframeってドメイン違ったら操作できなるからfacebookは無理かの…

[Jquery]ページ一定移動でスクロールボタン表示

よくあるあれだす。

【1】汎用

    $(window).load(function() {
        $(window).scroll(function () {
            var s = $(this).scrollTop();
            var m = 200;
            if(s > m) {
                $("#pagetop").fadeIn('3000');
            } else if(50 > m) {
            }else {
                $("#pagetop").fadeOut('3000');
		}
        });
        $("#pagetop").click(function () {
            $('html,body').animate({ scrollTop: 0 }, '300');
            return false;
        });
    });

【2】ちょっと専用

    $(window).load(function() {
        var scount = 0;
	$(window).on("scroll touchmove", function(){ 
            var s = $(this).scrollTop();
            var m = 300;
            if(s > m) {
	       if(scount == 0) {
	        $("#pagetop").fadeTo("1000", 0.5);
		$("#pagetop").delay("2000").fadeTo("1000", 1);
		scount = 1;
          	}else {
		$("#pagetop").fadeTo("1000", 1);
		}
            }else {
	    $("#pagetop").stop().fadeOut();
		}
	});


        $("#pagetop").click(function () {
	    $("#pagetop").stop().fadeOut();
            $('html,body').animate({ scrollTop: 0 }, '300');
            return false;
        });
    });

【3】こちらのサイトさまの応用
スクロール完了(停止)の検出と、フローティングメニューの実装

$(function () {
    var $target = $("#pagetop"), 
        $window = $(window),
        $document = $(document),
        timerId,
        defaultPos = $target.offset().top,
        targetHeight = $target.outerHeight(true),
        containerHeight = $target.parent().height(),
        DURATION = 500;
    function floatingMenu(scrollTop) {
	$("#pagetop").fadeTo("3000", 1);
    }
    if (!$target.length) {
        return;
    }
    $window.bind("scrollFinish", function (event, scrollTop) {
        floatingMenu(scrollTop);
    });

    $window.bind("scroll", function () {
        var scrollTop = $document.scrollTop();
        var m = 300;
        if(scrollTop > m) {
	$("#pagetop").css("opacity", 0.5).fadeIn();
	}else {
	$("#pagetop").stop().fadeOut();
	}
        if (timerId) {
            clearTimeout(timerId);
        }
        timerId = setTimeout(function () {
            timerId = null;
            if(scrollTop > m) {
            $window.trigger("scrollFinish", [scrollTop]);
	    }
        }, 1000);
    });
    $window.unload(function () {
        $window.unbind("scroll scrollFinish");
    });
    $("#pagetop").click(function () {
        $('html,body').animate({ scrollTop: 0 }, '300');
        return false;
    });
});

[jquery]ページ内スクロール

メモメモ。説明書くのがメンドイ。
.btnクリックで自分のn番目の値を代入、n番目に該当する.contents_boxまでページ内スクロール!な感じ

 <div id="nav">
  <span class="btn">あああ</span>
  <span class="btn">いいい</span>
  <span class="btn">ううう</span>
 </div>

 <div  class="contents_box">
あああ のとび先
 </div>
 <div  class="contents_box">
いいい のとび先
 </div>
 <div  class="contents_box">
ううう のとび先
 </div>
$(document).ready(function(){
	$(".btn").click(function () {
		var i = $(".btn").index(this)
		var p = $(".contents_box").eq(i).offset().top;
		$('html,body').animate({ scrollTop: p }, 'fast');
		return false;
	});
  });

[jquery][bxslider]サムネイルや左右ボタンクリックで自動スライドがとまる時の対処

もはや私の使う定番スライダーとなっている bxsliderなのですがネックがpagerやナビをクリックした際に動作がとまってしまうことだったんですよね。

前に探したときは探し方が悪く(?)見つからなかったんですが、
やっぱり対処がありました。オプションに。「オプションに」oh… オプション見てたんですが(悪あがき)

さすがですbxslider様(-人-)ありがたやー。

var foo = $('.bxslider').bxSlider({
onSlideAfter: function () { foo.startAuto(); }
});

というわけでこの部分で対処可能。
引数にbxsliderの設定を代入してコントロール系クリックでスライドさせた後、また自動でスライドさせますよーって感じでしょうか。多分。

実際使うときはこっち

<script>
  $(function(){
var foo = $('.bxslider').bxSlider({
          auto: true,
          pause: 1000,
          speed: 1000,
          onSlideAfter: function () { foo.startAuto(); }
		});
  });
</script>

【jquery】楽天GOLD用 パソコンのゴールドページにスマホでアクセスしたらGOLDスマホページにリダイレクト

11/17に書いた↓があるんですが、
楽天GOLDなどでスマホに飛ばすとき[jquery]

諸事情でPCゴールドを見せるのが微妙だったので、
とりあえず別verで対処しておこうかなーと。
まあ、楽天限定じゃないので、実質的にはjqueryでのスマホ振り分けになりますね。

●前提条件として
pcとスマホで同じページがあること
たとえば http://www.rakuten.ne.jp/gold/●●●/aaa.html がPCとした場合、
スマホでは http://www.rakuten.ne.jp/gold/●●●/sp/aaa.html のページがあるのが条件です。
  

<script type="text/javascript">
<!--
 var currentUrl = window.location.href;
 var resultUrl =  currentUrl.replace("http://www.rakuten.ne.jp/gold/●●●/", "http://www.rakuten.ne.jp/gold/●●●/sp/"); 

 if((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1)
  || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
	window.location.href = resultUrl;
 }
-->
</script>

これはどこのページをスマホで見ても対応したスマホページを表示させかったので、URLを置換して表示させています。
無い場合は普通にトップにリダイレクトさせればよいので

<script type="text/javascript">
<!--

 if((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1)
  || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
	window.location.href = "http://www.rakuten.ne.jp/gold/●●●/sp/";
 }
-->
</script>

こうなりますのです。
楽天の場合は大体がドリウィで構築してることが多いのでPCのテンプレヘッダに入れて構築すれば一瞬で完了^^b
ユーザビリティ的には1番目が良いかな~と思ったり。