くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[HTML/ CSS/ jQuery]課題サイト「Photolog」

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

 

このサイトのポイント

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

 

Photo Log

f:id:pleasure10501:20150506171855p:plain

 

f:id:pleasure10501:20150506172600p:plain

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

 

 

 

 

 

 

f:id:pleasure10501:20150506172915p:plain

2、ポートフォリオ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

 

 

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

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

 

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

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

 

 

Photo Log

広告を非表示にする