【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>

【wordpress】trustformのメールアドレス確認ではまったとき

メールアドレス確認用を追加したところ、なんと!
trustformの確認画面でメールアドレスが消えちゃってる!
ってな現象があったので、この現象はどう探せばよいのだ…
と思いつつ「trustform メールアドレス確認 確認画面」であっさり見つかったでござる。
たぶん、これが原因ぽいので助かりました!

「メールアドレス」項目は 「メールアドレス要素」ブロックで作りますが

「メールアドレス【確認】」項目は「テキストボックス要素」ブロックで作成しましょう!!!

引用:Trust Form(WordPressプラグイン)で普通ははまらないところでハマったハマった(泣)
https://blog.gti.jp/post-3310

【wordpress】カスタムフィールドを使って条件分岐でカテゴリテンプレートを変更する

固定ページの用にテンプレート設定ができると一番よいのですが、、、なぜないの^^;

今回進めてる案件では最上位カテゴリと2階層目の子カテゴリがないカテゴリと2階層目の子カテゴリがあるカテゴリと3階層目のカテゴリで表示方法が違うので最初はcategory.phpで対応しようとしてたんですが、どうも面倒くさ…(ゲフンゲフン)もとい、時間がかかってしまうので
あらかじめ決めうちでテンプレ作って、カスタムフィールドの値で分岐させようかなーってノリです。
使ったプラグインは超有名「advanced custom fields」です。

使いまわしが効くようにwp_queryでもろもろゲットしてます。

global $wp_query;
$cat_obj = $wp_query->get_queried_object();
$current_id = $cat_obj->cat_ID;
$post_id = 'category_'.$current_id;
$cat_select = get_field('cat_temp',$post_id);
if($cat_select == "○○○") {
include_once(TEMPLATEPATH . '/category_○○○.php');
}else if($cat_select == "○○○") {
include_once(TEMPLATEPATH . '/category_○○○.php');
}else if($cat_select == "○○○") {
include_once(TEMPLATEPATH . '/category_○○○.php');
}

[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/

WordPressでremove_filter('the_content', 'wpautop')とbrBrbrプラグインとの併用について

さて、前の記事で

タグを削除するというの書いたのですが、その後設定してページを見たところ…

姉さん…事件です!改行が効いていません!
まあ、これはプラグインのフィルターを強制的に削除しているため発生しちゃったわけです。
pタグは消したいんだけど、brはそのままがいいんです。

うーん、これは困ったって思ってググってみたところ、まあこちらも強制ですが対処があったので使わせていただくことにしました。
って、ことで前のremoveはスルー!スルー!
ようするに最初のpタグの出力をコメントアウトしちゃうってことですね。助かりました!

//$brbr="<p>\n".$brbr."</p>\n";

参考:brBrbrの「pタグ」のカスタマイズ
http://mimimin.net/brbrbr/

[wordpress]でpタグ除去(remove_filter('the_content', 'wpautop');)が効かない時

自分以外が作ったサイトとかって、自分では使わないプラグインが入ってる場合が多いので、、、

まんまとはまりました!ティクショー!

「brBrbr」プラグインが有効になっていると、remove_filter('the_content', 'wpautop');が効かない現象が発生しちゃいます。

探したら下記サイト様に助けられました。ありがたやー(-人-)
http://ameblo.jp/trapshooter/entry-11622880339.html

<?php remove_filter('the_content','brBrbr'); ?>
<?php remove_filter('the_content', 'wpautop'); ?>
<?php the_content(); ?>

これでいけるようです。面倒なのでsingle.phpにしてますが、function.phpでもたぶん同じ記述でいけるはずです。