delab » Lightbox http://de-lab.com xhtml CSS SEO CMS PHP など Webデザイン WEBサイト構築の話題 Wed, 05 Oct 2011 23:41:33 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Mootoolsと同じ機能をJqueryでも使いたい – リニューアル覚書 http://de-lab.com/article/jquery-like-mootools/ http://de-lab.com/article/jquery-like-mootools/#comments Thu, 15 May 2008 19:29:39 +0000 sato http://de-lab.com/?p=120

リニューアル前まではサイトの動的部分はMootools1.2を使用していましたが、最近Jqueryを勉強しているので、こちらも全部Jqueryに変更しました。

MootoolsからJqueryに移行

Mootoolsは視覚的な部分に特化し、Webデザイン的にはとても扱いやすいJavascriptライブラリでした。

しかしJqueryはそれに併せて軽量で高速、phpとの相性もよく、Prototype.jsなどとも共存可能(※異なるJSライブラリは競合を起こしやすい)と聞いたので最近は仕事でもこちらをよく使っています。

リニューアルで全てJqueryにすることにしました。

Tooltip

Mootools公式ページではTooltipsを表示できるサンプルがあり、特にプラグインを必要としくても簡単に導入できました。

Mootools tooltips のサンプル

<a href="http://de-lab.com" title="delab::トップページへ">delab</a>

title=”タイトル::説明”

mootools demos – Tips

希望するtooltips機能

  • 指定した要素(例：div#entry)内の[a="title"]形式になってるものにTooltipsが適用される
  • title=”タイトル::説明”が適用されるもの
  • Mootoolsデモは<a Class=”tips1″などのクラス属性が必要だけど、無くても動くもの
  • 半透明が好き

jqueryでも出来た

jQuery clueTip Plugin

何か複雑なことが出来るTooltipプラグインみたいですが、 Demoをみると良さそうなので採用しました。

デモはクラス属性がついてる物ばかりなので変えてみた。

header.php　

<script type="text/javascript" src="http://de-lab.com/wp-content/themes/delab/lib/js/jquery.dimensions.js"></script>
<script type="text/javascript" src="http://de-lab.com/wp-content/themes/delab/lib/js/jquery.hoverIntent.js"></script>
<script type="text/javascript" src="http://de-lab.com/wp-content/themes/delab/lib/js/jquery.cluetip.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('a[@title]').cluetip({splitTitle: '::' , dropShadow: false, showTitle: false});
	});
</script>

jquery.cluetip.css 該当箇所を書き換え

.cluetip-default {
  background-color: #4D473D;
  filter: alpha(opacity=80);
  -moz-opacity:0.8;
  opacity:0.8;
  color: #FFF;
  padding: 10px;
  z-index: 10000;
}
.cluetip-default #cluetip-outer {
  position: relative;
  margin: 0;
}
.cluetip-default h3#cluetip-title {
  margin: 0;
  padding: 0;
  font-size: 0.95em;
  font-weight: 700;
  color: #CCC;
}
.cluetip-default #cluetip-title a {
  color: #fff;
}
.cluetip-default #cluetip-inner {
  border-top : 1px #CCC dotted;
  margin:0;
  padding:0;
}

Lightbox系プラグイン

shadowbox.js

mootoolsでは軽い動作がよかったLightboxを使っていましたが、Jqueryプラグインではshadowboxを使いたかったので、Wordpressのプラグインになってるものを使用しました。

こちらはプラグインを入れるだけで済みました。

Slimbox, the ultimate lightweight Lightbox clone ・ digitalia.be

WordPress ? Shadowbox JS ≪ WordPress Plugins

その他

jquery-roundcorners-canvas

角丸を作成できるjavascriptです。可変幅デザインを考えていたので、とても便利でした。

jquery-roundcorners-canvas | jQuery Plugins

まだ作業してないけど、IEのPNG対策などもあとでやろうと思ってます。

]]> http://de-lab.com/article/jquery-like-mootools/feed/ 0 Zen-Cart構築例 ツルカンストア http://de-lab.com/work/case_zen-cart/ http://de-lab.com/work/case_zen-cart/#comments Thu, 13 Sep 2007 10:00:40 +0000 sato http://de-lab.com/blog/eccube/case_zen-cart/

Zen Cartで構築したオンラインショップです。内部ページ構造もSEOに最適化してあり、ログイン画面などのユーザビリティにも配慮しています。

去る9月10日、自社のオンラインストア『ツルカンストア』がオープンしました。

入社して早くも半年が経ち、そろそろ自社サイトにも手をかけようと、7月中旬から制作をはじめてようやくオープンすることができました。

オープンソースEC構築システム『zen-cart』を使った構築

最初『EC-CUBE』を使用するつもりで1週間位頑張ってみましたが、PHPセーフモードでは携帯サイトの動作が難しいのと、現状では拡張がないのを考慮して、何度か構築して馴染みも深い『zen-cart』を使用しました、

携帯サイトはこれから作成します。

追加したモジュールと追加機能

  • Lightboxで商品画像を画面遷移なしで拡大
  • 管理画面から商品画像をリサイズ・登録
  • 営業日カレンダー
  • 関連商品表示モジュール
  • 販売管理のため原価入力
  • 郵便番号データーベースで、郵便番号で自動住所入力
  • 最新ニュースの表示・管理モジュール
  • CSVで商品一括登録・変更
  • SEO対策としてSitemap.xmlの出力
  • 新着情報のRSS配信

ライブヘルプシステムの導入

販売サイトだからこそ、レスポンスのいいサポートが必要と考え、お問合わせ窓口をライブヘルプシステムにしてみました。

  • チャットを通してお客様をリアルタイムにサポート
  • 自動オンライン・オフライン画像切り替え
  • チャットログ
  • リアルタイムでアクセス状況が見られるアクセスログ
  • プッシュURLで訪問者を目的のページに誘導
  • オペレーター評価機能・アンケート
  • オペレーターから訪問者をチャットに招待
  • オフライン時メッセージお預かり

Summary

  • 公開日時：2007年9月10日(月)
  • 制作期間：約2ヵ月
  • 使用言語：XHTML/CSS、Ajax、PHP
  • システム：zen-cart
]]> http://de-lab.com/work/case_zen-cart/feed/ 0