BGS-WORKS Blog » Javascript http://blog.bgs-works.com WEB業界で生き残るためのTipsやカスタマイズ方法をご紹介　 bgs-works.com Sun, 13 Mar 2011 04:22:53 +0000 ja hourly 1 http://wordpress.org/?v=3.0 [Cording] カラーミーで、サムネイルマウスオーバーで拡大画像の効果をつける http://blog.bgs-works.com/2011/03/cording-%e3%82%ab%e3%83%a9%e3%83%bc%e3%83%9f%e3%83%bc%e3%81%a7%e3%80%81%e3%82%b5%e3%83%a0%e3%83%8d%e3%82%a4%e3%83%ab%e3%83%9e%e3%82%a6%e3%82%b9%e3%82%aa%e3%83%bc%e3%83%90%e3%83%bc%e3%81%a7%e6%8b%a1/ http://blog.bgs-works.com/2011/03/cording-%e3%82%ab%e3%83%a9%e3%83%bc%e3%83%9f%e3%83%bc%e3%81%a7%e3%80%81%e3%82%b5%e3%83%a0%e3%83%8d%e3%82%a4%e3%83%ab%e3%83%9e%e3%82%a6%e3%82%b9%e3%82%aa%e3%83%bc%e3%83%90%e3%83%bc%e3%81%a7%e6%8b%a1/#comments Sun, 13 Mar 2011 04:22:53 +0000 admin http://blog.bgs-works.com/?p=756
カラーミーショップをカスタマイズすると、JSが外部から呼び出せないジレンマに陥ることがありますよね。
(新しく追加されたFTPオプションなるものを使えば、外部JSを呼び出せるようになるのかな？わかんないけど)

でも、最近ECサイトで良く見かける、
詳細画面でトップ画像以外のサムネイルにマウスオーバーすると、トップ画像の場所にサムネイルのでかい画像に差し変わる。という効果を入れてみたくないですか？
新規ページで画像だけが開くのも昔チックだし・・・

で、HTML内に埋め込める短いJSソースで、カラーミーの独自タグを生かした方法を見つけました。

入れ込むJavascript

<script type='text/javascript'>
<!--
function largeImg(sImg)
{
document.images['imgBox'].src=sImg;
}
-->
</script>

HTML側のソース

<!-- 商品画像 -->
<{if $product.img_url != ""}>
    <div class="img"><img src="<{$product.img_url}>" class="large" width="400" name="imgBox" /></div>
<{else}>
    <div class="img"><img src="http://img.shop-pro.jp/tmpl_img/21/now200.gif" class="large" /></div>
<{/if}>
<!--// 商品画像 -->

<!-- 商品画像その他 -->
<table cellspacing="0" cellpadding="0">
<tr>
<td><{if $product.ot1_url != ""}><a href="JavaScript:void(0)" onmouseover='largeImg("<{$product.ot1_url}>")' onmouseout='largeImg("<{$product.img_url}>")'><img src="<{$product.ot1_url}>" width="125" /></a><{/if}></td>
<td><{if $product.ot2_url != ""}><a href="JavaScript:void(0)" onmouseover='largeImg("<{$product.ot2_url}>")' onmouseout='largeImg("<{$product.img_url}>")'><img src="<{$product.ot2_url}>" width="125" /></a><{/if}></td>
<td><{if $product.ot3_url != ""}><a href="JavaScript:void(0)" onmouseover='largeImg("<{$product.ot3_url}>")' onmouseout='largeImg("<{$product.img_url}>")'><img src="<{$product.ot3_url}>" width="125" /></a><{/if}></td>
</tr>
</table>
<!--// 商品画像その他 -->

HTMLのtableタグはもちもん、自分のコードに合わせてくれていいんですけど、

onmouseover='largeImg("<{$product.ot1_url}>")'
でサムネイル用のイメージタグである
<{$product.ot1_url}>
を出して、
onmouseout='largeImg("<{$product.img_url}>")'
で一番目の商品画像である
<{$product.img_url}>
タグに戻すって訳ですね。

上に書いたJSはその入れ替わる場所を指定する方法なんだそうです。

タグ:, , , ,
]]> http://blog.bgs-works.com/2011/03/cording-%e3%82%ab%e3%83%a9%e3%83%bc%e3%83%9f%e3%83%bc%e3%81%a7%e3%80%81%e3%82%b5%e3%83%a0%e3%83%8d%e3%82%a4%e3%83%ab%e3%83%9e%e3%82%a6%e3%82%b9%e3%82%aa%e3%83%bc%e3%83%90%e3%83%bc%e3%81%a7%e6%8b%a1/feed/ 0 [JS] jQueryのプラグイン。画像関係のまとめサイト http://blog.bgs-works.com/2011/01/js-jquery%e3%81%ae%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%80%82%e7%94%bb%e5%83%8f%e9%96%a2%e4%bf%82%e3%81%ae%e3%81%be%e3%81%a8%e3%82%81%e3%82%b5%e3%82%a4%e3%83%88/ http://blog.bgs-works.com/2011/01/js-jquery%e3%81%ae%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%80%82%e7%94%bb%e5%83%8f%e9%96%a2%e4%bf%82%e3%81%ae%e3%81%be%e3%81%a8%e3%82%81%e3%82%b5%e3%82%a4%e3%83%88/#comments Sat, 22 Jan 2011 13:10:03 +0000 admin http://blog.bgs-works.com/?p=720 うわ〜と感動するほど、網羅してくれてます、このまとめ！
本当いつもすみません。
大変お世話になっております。かちびと.net様！

画像を使ったいろいろなjQueryプラグイン224個まとめ( 200+ collection of jQuery for images )

と

広告等に使えそうなjQueryプラグインいろいろ

ブログを構築する上ですごく便利なjQuery。
あんまりわかってないので、こういうまとめてくれてるのはすごく助かります。
「こういう動きを実装したい」と思っても、それをどんな名前で探せば効率よく見つかるのか、
そこが問題ですからねぇ。検索上位で希望する動きのプラグインが見つかるとも限りませんしね・・・

すぐに見失ってしまって慌てるので、覚え書きをかねての投稿でした。

タグ:, ,
]]> http://blog.bgs-works.com/2011/01/js-jquery%e3%81%ae%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%80%82%e7%94%bb%e5%83%8f%e9%96%a2%e4%bf%82%e3%81%ae%e3%81%be%e3%81%a8%e3%82%81%e3%82%b5%e3%82%a4%e3%83%88/feed/ 0 [JS] Feed2.js　を使ってフィードを表示すると、新しい記事がすぐ反映されないときの対処法 http://blog.bgs-works.com/2010/10/js-feed2-js%e3%80%80%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%83%95%e3%82%a3%e3%83%bc%e3%83%89%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%99%e3%82%8b%e3%81%a8%e3%80%81%e6%96%b0%e3%81%97%e3%81%84%e8%a8%98/ http://blog.bgs-works.com/2010/10/js-feed2-js%e3%80%80%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%83%95%e3%82%a3%e3%83%bc%e3%83%89%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%99%e3%82%8b%e3%81%a8%e3%80%81%e6%96%b0%e3%81%97%e3%81%84%e8%a8%98/#comments Thu, 21 Oct 2010 09:23:04 +0000 admin http://blog.bgs-works.com/?p=713 最近「これ使って」といわれて使ったFeed2.js
導入はRSS Feed（フィード）を表示するを参考にさせていただいて、サクサクいけたのですが、
実際使い始めると「記事を書いても反映されない」とクレームが・・・・
これは困るということで、調べました。

feed2.jsは基本の設定で、新しい反映は　”1時間毎に確認”　になっているようなんです。
なんでやねん！遅いやん！と思ってしまいましたが、文句を言っても始まらないので、地味に設定自体をいじってしまいましょう。

変更する箇所は以下です。
feed2.jsフォルダ直下にある「feed2js_config.php」を開きます。
34行目の

define(‘MAGPIE_CACHE_AGE’, 60*60);

を

define(‘MAGPIE_CACHE_AGE’, 300);

に変更。
これで5分毎に反映の確認をしにいきます。

作った人の感性でしょうが、クライアント（日本人）がせっかちなんですかね？
1時間毎で文句なしなんですかね？
私が個人で使うとしてもちょっと気になっちゃうなぁ。

タグ:,
]]> http://blog.bgs-works.com/2010/10/js-feed2-js%e3%80%80%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%83%95%e3%82%a3%e3%83%bc%e3%83%89%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%99%e3%82%8b%e3%81%a8%e3%80%81%e6%96%b0%e3%81%97%e3%81%84%e8%a8%98/feed/ 0 [Cording] 初めてのJQuery — class名で判定してCSSを指定する方法 http://blog.bgs-works.com/2010/09/cording-%e5%88%9d%e3%82%81%e3%81%a6%e3%81%aejquery-class%e5%90%8d%e3%81%a7%e5%88%a4%e5%ae%9a%e3%81%97%e3%81%a6css%e3%82%92%e6%8c%87%e5%ae%9a%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/ http://blog.bgs-works.com/2010/09/cording-%e5%88%9d%e3%82%81%e3%81%a6%e3%81%aejquery-class%e5%90%8d%e3%81%a7%e5%88%a4%e5%ae%9a%e3%81%97%e3%81%a6css%e3%82%92%e6%8c%87%e5%ae%9a%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/#comments Sat, 25 Sep 2010 12:54:59 +0000 admin http://blog.bgs-works.com/?p=688 HTML5とCSS3の勉強を始めると、どうしてもJSが必要になると感じました。
（対応していないブラウザへ最低限の装飾を、条件分岐でJSをかけるとか？）
今まで出来上がりのサンプルしか使った事のない私ですが、簡単なJSをオリジナルでかけるようにしとかなきゃこれから大変！！と思い、「初めてのJQuery」を勉強日記としてアップしていきたいと思います。

とりあえず、すぐにも必要になるであろう、条件分岐をHTML上の「class名」で判定してみたいと思います。
今回はズル、というかなんというか、ほとんど人に教えてもらって作りました。
実際のコードから

<script type="text/javascript">
$(function(){
	$("p").each(function(){
		if( $(this).attr("class") != $("body").attr("class") ) {
			$(this).css("color", "#ff0000");
		}
	});
});
</script>

HTML側はこんなん

<body class="About">
<h1>jQueryサンプル</h1>
<p class="Top">Top</p>
<p class="About">About</p>
<p class="Hoge">Hoge</p>
<p class="Hage">Hage</p>
</body>

では、復習がてらの説明です。

$(“p”).each(function(){

この $("p") で今回は「Pタグ」すべてを対象とし、
.each で「Pタグ」を1つづつ function 内の処理をするように回しています。

次に function 内ですが、

if( $(this).attr(“class”) != $(“body”).attr(“class”) ) {

この部分の詳細説明。
$(this) は上記で指定しているPタグのこと（thisは「これ」ですよね〜）
$("body") は「bodyタグ」を直接指定しています。
今回のHTMLコードをみてもらうとわかりますが、「bodyタグ」にクラスをつけていますよね？これをJSに見つけて欲しいための指定なのです。
.attr("class") はドットの前に指定した$(this)やら$("body")やらのタグの中に書かれているものを探しにいく指定。今回は”class”としましたので、クラス名を取りにいきます。
で、その2つのクラス名が同じか違うかの判定をif文でしている訳です。（!= は「ノットイコール」の時ということになります）

$(this).css(“color”, “#ff0000″);

ここはそのままわかりそうな感じですが、「this」である「Pタグ」に新しくCSSを上書きしています。
CSSの書き方は、最初の””内にプロパティ（background-colorとかfontとか）２個目の””の中に値（カラー番号とかフォントファミリーとか）を指定します。
CSSの指定が多い場合は $(this).css("color", "#ff0000"); の部分を増やしていきます。

HTML側の説明は省くとして、
これでPタグとBODYタグ 両方のクラス名が一緒でない場合は、JS内に書かれたCSSが上書きされる指定が出来ました。

CSS3の指定が使えないブラウザには、上記分岐の応用で、専用のCSSを振り分ける事が出来ます。
このサンプルだと、「ブラウザごとのCSSを別で作れば解決やん？」と思ってしまいますが、
実際作ってみると、それだけではどうにもならない事が出てきちゃうんです。（私は勉強中にさっそくぶちあたりました）
上記サンプルはそのままだと実践用ではないですが、考えようによっては使いやすくなる気がします。

タグ:, , , , ,
]]> http://blog.bgs-works.com/2010/09/cording-%e5%88%9d%e3%82%81%e3%81%a6%e3%81%aejquery-class%e5%90%8d%e3%81%a7%e5%88%a4%e5%ae%9a%e3%81%97%e3%81%a6css%e3%82%92%e6%8c%87%e5%ae%9a%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/feed/ 1 [Cording] IEでmin-heightやmax-widthを使えるようにするJavascript http://blog.bgs-works.com/2010/01/cording-ie%e3%81%a7min-height%e3%82%84max-width%e3%82%92%e4%bd%bf%e3%81%88%e3%82%8b%e3%82%88%e3%81%86%e3%81%ab%e3%81%99%e3%82%8bjavascript/ http://blog.bgs-works.com/2010/01/cording-ie%e3%81%a7min-height%e3%82%84max-width%e3%82%92%e4%bd%bf%e3%81%88%e3%82%8b%e3%82%88%e3%81%86%e3%81%ab%e3%81%99%e3%82%8bjavascript/#comments Tue, 26 Jan 2010 06:13:15 +0000 admin http://blog.bgs-works.com/?p=547 CSSハックで使えるようになる場面もありますが、
positonなんかとmin-heightと一緒に使うとハックも役に立たなくなるようで、
もういっそのことJavascriptで処理してもらおう！！と探しました。

minmax.js
使い方は読み込むのみ！！
しかもスクリプト本体でIEのみ読み込むようにしてくれているので、モダンブラウザでは存在がなくなる。
素晴らしいです。

ありがとうございます。

タグ:, , , ,
]]> http://blog.bgs-works.com/2010/01/cording-ie%e3%81%a7min-height%e3%82%84max-width%e3%82%92%e4%bd%bf%e3%81%88%e3%82%8b%e3%82%88%e3%81%86%e3%81%ab%e3%81%99%e3%82%8bjavascript/feed/ 0 [Cording] IE6用に透過pngを使用する場所によってのタイプ別JS　Vol.3 （背景画像編） http://blog.bgs-works.com/2009/11/cording-ie6-png-vol3/ http://blog.bgs-works.com/2009/11/cording-ie6-png-vol3/#comments Wed, 04 Nov 2009 14:37:51 +0000 admin http://blog.bgs-works.com/?p=438 とうとう来ましたね〜cssの「background」対応バージョン。
いままでも単純に1枚画像ならbackground-imageとして指定する事は出来たのですが、
「background-position」やら「background-repeaat」やらには対応してないものばかりでした。
これが指定出来ないのが本当につらかった・・・・

ようやく見つけましたよ。
png指定も簡単で、且つ、background指定諸々にも耐えうるJS！！

DD_belatedPNG
09/11/04現在の最新バージョンは0.0.8aのようですが、とにかく最新バージョンをダウンロードします。

使い方は、まずHTMLにjsファイルを読み込みます。
もう一つHTML側に、透過pngを使いたいタグ名やclass名をドンドン追加していきます。
公式ページのUsageには以下のソースが載っています。

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
  /* EXAMPLE */
  DD_belatedPNG.fix('.png_bg');

  /* string argument can be any CSS selector */
  /* .png_bg example is unnecessary */
  /* change it to what suits you! */
</script>
<![endif]-->

この

DD_belatedPNG.fix(‘.png_bg’);

のカッコの中に追加していくわけです。

fix(‘.example1, .example2, img’);

みたいに。

これだけ。これだけでマウスオーバーにも耐えうるし、連続背景左上から、とかの指定も可能。
凄い・・・・かなり嬉しい・・・・
透過pngのない世界って、もう面倒くさくって振り返る気が起きなくなっちゃいますね。

タグ:, , , , ,
]]> http://blog.bgs-works.com/2009/11/cording-ie6-png-vol3/feed/ 0 [Cording] IE6用に透過pngを使用する場所によってのタイプ別JS　Vol.2 （ナビゲーションボタンでのロールオーバー編） http://blog.bgs-works.com/2009/09/cording-ie6%e7%94%a8%e3%81%ab%e9%80%8f%e9%81%8epng%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%99%e3%82%8b%e5%a0%b4%e6%89%80%e3%81%ab%e3%82%88%e3%81%a3%e3%81%a6%e3%81%ae%e3%82%bf%e3%82%a4%e3%83%97%e5%88%a5js-2/ http://blog.bgs-works.com/2009/09/cording-ie6%e7%94%a8%e3%81%ab%e9%80%8f%e9%81%8epng%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%99%e3%82%8b%e5%a0%b4%e6%89%80%e3%81%ab%e3%82%88%e3%81%a3%e3%81%a6%e3%81%ae%e3%82%bf%e3%82%a4%e3%83%97%e5%88%a5js-2/#comments Tue, 15 Sep 2009 01:13:33 +0000 admin http://blog.bgs-works.com/?p=380 以前書いた「[Cording] IE6用に透過pngを使用する場所によってのタイプ別JS　Vol.1」の第2弾です。
今回はナビゲーションで透過pngを使いたい場合。絶対必要なロールオーバー表現を可能にするJSです。
とはいえ、あまりに有名なJSなのでご了承をば。

アルファ画像を扱うalphafilter.jsライブラリ
これです。
他にも数々あれど、ロールオーバーをこんなに簡単に作れるものを私は探せませんでしたよ。作者さまありがとうございます。
使い方は本家サイト見てもらった方が早いのですが、
まずは

<script type="text/javascript" defer="defer" src="js/alphafilter.js"></script>

を読み込みます。
このとき必要なのがdefer="defer"　これを忘れるとうまくいきません。
そのあと必要なことが、
透過pngを使いたいタグやimgにclass="alphafilter"をつけてあげること。
ロールオーバー表現をCSSで作る場合はそれ用のclassを作っていると思うので、それを
class="alphafilter btn"
みたいにして指定してあげればOK。
ちなみに、
ロールオーバー表現は2009/5に追加されていたんですね。
本当に感謝です！

タグ:, , , ,
]]> http://blog.bgs-works.com/2009/09/cording-ie6%e7%94%a8%e3%81%ab%e9%80%8f%e9%81%8epng%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%99%e3%82%8b%e5%a0%b4%e6%89%80%e3%81%ab%e3%82%88%e3%81%a3%e3%81%a6%e3%81%ae%e3%82%bf%e3%82%a4%e3%83%97%e5%88%a5js-2/feed/ 0 [Cording] Divなどで囲ったボックス内すべてをリンク先として指定したい！ http://blog.bgs-works.com/2009/05/cording-div%e3%81%aa%e3%81%a9%e3%81%a7%e5%9b%b2%e3%81%a3%e3%81%9f%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e5%86%85%e3%81%99%e3%81%b9%e3%81%a6%e3%82%92%e3%83%aa%e3%83%b3%e3%82%af%e5%85%88%e3%81%a8/ http://blog.bgs-works.com/2009/05/cording-div%e3%81%aa%e3%81%a9%e3%81%a7%e5%9b%b2%e3%81%a3%e3%81%9f%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e5%86%85%e3%81%99%e3%81%b9%e3%81%a6%e3%82%92%e3%83%aa%e3%83%b3%e3%82%af%e5%85%88%e3%81%a8/#comments Thu, 07 May 2009 05:18:16 +0000 admin http://blog.bgs-works.com/?p=121 ボックス内すべてのリンクって、わりかし要望あると思いませんか？

でも普通のやりかたじゃぁダメなんですよねぇ～
CSSとHTMLタグでがんばってコーディングしちゃうと、できたとしてもマークアップ的にはNGになってしまう。。
もっといいやり方ないんかな？と探していると、やっぱりありました。
インターネットってすばらしいですね？

ボックス全体をリンクにしたい
redline
（上記の方法はJavascriptを使用します。）
作者さまありがとうございます。
元ネタはほかの方ですが、私はJqueryを使用する「Red様」のコードで実装してみました。

まずHTMLのheadの中に以下を加えます。

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
	var linkboxes = $(".linkbox");
		for (var i=0; i<linkboxes.length; i++){
		var readmores = $("p.readmore");
		for (var j=0; j<readmores.length; j++){
			$(".linkbox").click(function() {
				var anchorTags = this.getElementsByTagName("a");
				window.location = anchorTags[0].href;
			});
		}
	}
	$("p.readmore").addClass("none");
	$(".linkbox").hover(function(){
		$(this).addClass("box_hover");
		},
		function(){
		$(this).removeClass("box_hover");
	});
});
-->
</script>

次にCSS側でボックスの装飾をします。
上のJavascript内でボックスのクラスは「linkbox」
リンク先が記させたpタグのクラスは「readmore」
ボックス上にHoverさせた時は「box_hover」

となっているので、それを使って装飾・・・・

.linkbox{
	background:url(../images/menu_btn_bg.jpg) repeat-x bottom #e4fbd9;
	color:#333;
	padding:10px 10px 0;
	margin:0 0 15px;
	border:1px solid #ccc;
	border-bottom:1px solid #999;
	border-right:1px solid #999;
	width:580px;
}
.box_hover{
	background:#eeeeee;
	cursor:pointer;
}
.none{
	text-indent:-9999px;
	height:0px;
	overflow:hidden;
}
.linkbox h5{
	color:#3c2f13;
	font-size:1.8em;
	margin:0 0 5px;
	padding:0;
	font-weight:bold;
.linkbox p{
	letter-spacing:0.01em;
}
.linkbox p.floatL{
	float:left;
	margin:0 20px 0 0;
	padding:0;
}

で実際のHTMLコードはこんな感じになります。

<div class="linkbox">
        <p class="floatL"><img src="images/noimg_s.jpg" alt="no-image" width="120" height="80" /></p>
        <h5>Nail</h5>
        <p>内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。</p>
        <p class="readmore Clear"><a href="#">リンクはこちら</a></p>
 </div>

見事！マウスオーバーもきれいに決まり、ソースもきれい。

Javascriptを切っている方は、

<p class="readmore Clear"><a href="#">リンクはこちら</a></p>

の部分が表示され、ここからリンク先に飛べる仕組みです。
ボックス全体にかけているリンクは切れますが、表示も大幅に崩れることがなく、リンク先も死にません。

タグ:, , , , , , , ,
]]> http://blog.bgs-works.com/2009/05/cording-div%e3%81%aa%e3%81%a9%e3%81%a7%e5%9b%b2%e3%81%a3%e3%81%9f%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e5%86%85%e3%81%99%e3%81%b9%e3%81%a6%e3%82%92%e3%83%aa%e3%83%b3%e3%82%af%e5%85%88%e3%81%a8/feed/ 1