■

またいろいろ勉強中

年始ぐらいからまたindexhibitをさわりはじめたのやったことのメモ。
大したことをやってるわけじゃないがGit Hubとかにコードを保存したほうがいい気がしてる。
ただindexhibit2.0系はシェアウェアなのでライセンス的にどうなんだろとかそういうのもありこのブログにはほとんど該当部分しか書いていない

jQueryとPHPの本しか持っていないのとJSの基本ぐらいは勉強しとこうと思って今日これ買った。まだ序章。

ノンプログラマのためのJavaScriptはじめの一歩 (WEB+DB PRESS plus)

サンプルコード一覧 - ノンプログラマのためのJavaScriptはじめの一歩

実践マスター PHP+MySQL PHP5対応

PHPの本は職業訓練で買わされたこいつしか持っていない。
終わってからあまり読んでないけどamazonレビューの評判良くないねぇ

[Indexhibit]Pull Down Menuの実装[JS]

Indexhibitには
indexpand http://www.indexhibit.org/plugin/utility/indexpand/というプラグインや
Expanding Menusというプラグインがすでにあるのだが、
マウスホバー時に意図した動作をしてくれなかったので、Webで調べてプラグイン化した。
ほぼコピペに近いけど、Indexhibitのメニュー構造が既にUL ,LIの入れ子構造だったため楽だった。
以前試して失敗したレスポンシブでのハンバーガーメニューとの切り替えなんかもやれる気がする

[plugin.pull_down_menu.php]

<?php

/*
Plugin Name: Pull-down menu
Plugin URI: http://log.hatenadiary.com/
Description: Pull-down menu
Version: 1.0
Author: yozhik
Author URI: http://log.hatenadiary.com
Type: front
Hook: pre_load
Function: pull_down_menu:go
End
*/

class pull_down_menu
{
	function go()
	{
		$OBJ =& get_instance();
		
		// do we need to do a file check for this?
		$OBJ->page->add_jquery('jquery.pull_down_menu.js', 25);	
		
		return null;
	}
}

[jquery.pull_down_menu.js]

$(function() {
	$("#nav li").hover(function() {
		$(this).children('ul').toggle();
	});
});

style.cssに以下を追加

/* pull_down_menu */
#index ul.section li ul{ display: none; }

• 参考にしたサイト

www.finefinefine.jp
www.task-notes.com
www.jquerystudy.info

[Indexhibit]jQuery Cycle2 plugin導入

http://jquery.malsup.com/cycle2/
前ヴァージョンのjQuery Cycleよりも有名じゃないけれど、レスポンシブ対応していたので組み込んでみた。htmlタグ内で設定できるようになった模様。

format.no_thumbs.phpを基に改造してulリストの中に画像が挿入されるようにした。

		// images
		$s .= "<div id='img-container'>\n";
			$s .= "<ul class='cycle-slideshow' data-cycle-fx='fade' data-cycle-next='.cycle-slideshow' data-cycle-speed='300' data-cycle-slides='li'>\n";
		$s .= ($OBJ->vars->exhibit['placement'] == 0) ? $OBJ->vars->exhibit['content'] . $a : 
			$a . "<div class='cl'><!-- --></div>" . $OBJ->vars->exhibit['content'];
			$s .= "</ul>\n";
		$s .= "</div>\n";

style.cssに以下を追加。

/* Slideshow cycle2 plugin */
.cycle-slideshow { z-index: 1; text-align:center; margin:0 auto; width: 80%;}
.cycle-slideshow img { width: 100%; height: auto; }
.cycle-slideshow li { display: none }
.cycle-slideshow li:first-child { display: block }

具体的には

• メニューとかぶってしまうのを避けるためにz-indexで階層を下げる。
• レスポンシブ対応で画像をウインドウの80％に指定。センタリング。
• liリストの最初のもの以外を非表示にすることで読み込み時に一瞬画像が表示されてしまうのを避ける