［HTML/ CSS/ jQuery］課題サイト「Photolog」

jQueryを使った課題サイトを作成しました。

このサイトのポイント

1. rollover.js、LightBox.jsの２つのプラグインを使用
2. 左サイドバーとメインコンテンツの重なり
3. 画像だけではない、パーツの横並びが多い

Photo Log

 １、ナビゲーションにrollover.jsを使用して、マウスオン時に画像が変化するように
しています

２、ポートフォリオにLightbox.jsを実装し、
モーダルウィンドウのフォトギャラリーになっています。

LightBox.jsもそのまま使用するのではなく、拡大スピード、フェードのスピード、topからの位置、をカスタマイズしました

 var LightboxOptions = (function() {
    function LightboxOptions() {
      this.fadeDuration                = 400;  //デフォルト500
      this.fitImagesInViewport         = true;
      this.resizeDuration              = 500;  // デフォルト700
      this.positionFromTop             = 200; //ウィンドウの位置　デフォルトは50

３、トップのロゴと左サイドバーのメインコンテンツの上の重なりは、positionで実現できました。

メインコンテンツの左の大きな余白はpadding-leftです。

４、横並びがとても多いのですが、floatによる横並びをできる限り抑えました。

メインコンテンツ上部の３つのメニュー、および、ポートフォリオの画像の横並びにはfloatを使っていません。

Photo Log