Under the Bridge

a Picture of the Late Him

スライドショウ(Ajax)

2007年4月 6日 00:01 | Writer: yoshi | 記事本文 | コメント(3) | トラックバック(0)

いやそんなにたいした事をやっている訳ではないが...(って何度もいうな、と叱られそうだが)

スライドショウをいちおう完成させた。重視項目は

  • 構築が簡単である、楽である
  • 構築が早い
  • ソコソコの見栄えである
  • ユーザの使い勝手がいい
  • 動作が軽い

こんなもんである。

今のところajaxというフォルダをルートとして、下層にこういうフォルダを置き、絶対パスで指定している。

css:スタイルシートのフォルダ。

js:ajaxライブラリ置き場。

lightbox:Lightboxのサンプル置き場。

完成品はこれである。

http://www.apstars.com/blog/ajax/lightbox/imagelist/index.php 目新しい部分は何もない。既出の技術を組み合わせただけ。コードは以下。短い。

<?php echo '<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'; ?>
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <title>Ajax Lightbox List Sample</title>
    <link rel="stylesheet" href="http://www.apstars.com/blog/ajax/css/lightbox.css" type="text/css" media="all" />
    <link rel="stylesheet" href="http://www.apstars.com/blog/ajax/css/lightboxlist.css" type="text/css" media="all" />
    <script type="text/javascript" src="http://www.apstars.com/blog/ajax/js/prototype.js"></script>
    <script type="text/javascript" src="http://www.apstars.com/blog/ajax/js/scriptaculous.js?load=effects"></script>
    <script type="text/javascript" src="http://www.apstars.com/blog/ajax/js/lightbox.js"></script>
</head>
<body>
    <?php require_once("pictlist.php");?>
</body>
</html>

前回からの改造点は、サムネイル画像を準備したことと、メイン画像のサイズを縮小したことくらい。また、特徴として、メイン部分はphpで、つまりヘッダとボディは別々に作成している。つまり中身のみをブログへペトっとできる。

こんな感じだ(※ここから見える画像では画像右下にクローズボタンが出ない。jsを書き換えたくないから放置ですが、Lightbox観覧から元に戻るにはページ再読み込み(リロード)して下さい) つけました。


Warning: require_once(http://www.apstars.com/blog/ajax/lightbox/imagelist/pictlist.php) [function.require-once]: failed to open stream: HTTP request failed! HTTP/1.1 404 Not Found in /virtual/alpinestar/public_html/www.apstars.com/blog/214ajax/ajax_2.php on line 157

Fatal error: require_once() [function.require]: Failed opening required 'http://www.apstars.com/blog/ajax/lightbox/imagelist/pictlist.php' (include_path='.:/usr/local/lib/php') in /virtual/alpinestar/public_html/www.apstars.com/blog/214ajax/ajax_2.php on line 157