esprits top Esprit's Style

    -    エンジニアの足つぼ    -

Highslide JS を使ってみよう!

〆 おしゃれな画像表示JavaScript Highslide JS

オリジナルのJavascript提供元はこちら.
この例は highslide-3.2.5.zip を用いています。

1. 画像を表示著作権表示付きで大きく表示

Highslide JS
白細枠
白細枠
Highslide JS
白丸枠
白丸枠
Highslide JS
枠なし
枠なし
Highslide JS
黒枠

黒枠
Highslide JS
ナビボタン付きスライドショー。

ナビボタン付き


〆 Highslide JS は、画像以外の表示にも利用できます。

HTMLの表示例
このサイトでは、/highslide/highslide.cssを使っていますが、
オリジナルのzipには入っていません。インターナルスタイルシートが
嫌だったので外部スタイルシートに変更しています。
@highslide.html
<header>
<title></title>
・・・
  <link href="./highslide/highslide.css" rel="stylesheet"
     type="text/css" media="screen" />
  <script type="text/javascript" src="highslide/highslide.js"></script>
  <script type="text/javascript" src="highslide/highslide-html.js"></script>
  <script type="text/javascript" src="../modules/highslide/swfobject.js"></script>

</header>
<body>
・・・
   <div id="highslide">
    <a href="#" onclick="return hs.htmlExpand(this, {contentId: 'highslide-html'})"
        class="highslide">HTML content</a>
    <div class="highslide-html-content" id="highslide-html"
        style="width: 400px;background-color :#fff">
      <div style="height:20px; padding: 2px">
        <a href="#" onclick="return hs.close(this)" class="control">Close</a>
        <a href="#" onclick="return false" class="highslide-move control">Move</a>
      </div>
      <div class="highslide-body" style="padding: 0 10px 10px 10px;">
      このサイトでは、/highslide/highslide.cssを使っています
      </div>
    </div>
   </div>
・・・
</body>

〆 Highslide JS スクロールバー付きHTMLの表示。

スクロールバー付きHTMLの表示例

ニッポンサバイバル 著 姜尚中より

Cicero

 バブル期でもある程度格差はありましたが、地方交付税とか補助金とかいった形である種富の再分配がなされていました。平均的に潤い、みんなが中級意識を持ち得た社会。
しかし現在は、勝ち組と負け組みの格差が歴然と現れるようになりました。この格差が生まれたのは、新自由主義(ネオリベラリズム)という思想の影響が大きいでしょう。経済的な自由競争を絶対視した市場至上主義で、規制を緩和することで結果の平等より機会の平等を目指すという考え方です。80年代のサッチャー政権で政策として取り入れられて以来、世界を席巻しています。
新自由主義は、国家の役割を縮小し、民間による効率やサービスの向上を目指すという点ではたしかに効率的です。しかし所得再分配のメカニズムを断ち切って、自由競争をさせることで、結果的に勝者と敗者を生み出してしまう。しかもそれはすべて自己責任であるとする弱肉強食の厳しい社会です。

 特に小泉政権になって、それが強く推し進められました。自己責任という名のもとに医療保険の負担は笛、労働市場の自由化という名のものとに、非正規雇用者、派遣労働者が主流になってしまった。その一方で超安定的な大企業のごくごく一部の人たちだけが右肩上がりの所得を伸ばし、そうした勝ち組に対しては、国はどんどん障害を少なくして優遇することになりました。負け組はそのおこぼれに預かって生きるしかないわけです。
新自由主義が支配する社会では、まずお金を持っている人たちが勝ちなのです。「いくらお金を持っていても幸せになれない」という人がいますが、現実的には、お金がものをいう社会になってしまっているのです。
さらにいうと日本には770兆円の借金があり、赤ちゃんを含めて一人当たり約600万円くらいの借金がある。これは若い世代にとってものすごい重圧になるはずです。
五年以内に消費税が跳ね上がる可能性が高い。医療保険の自己負担はどんどんふえ、年金だってどうなるかわかりません。そうなると低所得者の人たちは大変です。病気をしても病院に行けない人たちが出てくることになります。正規雇用でなければ、退職金も出ないし、家もなければ、資産もない。

 格差社会になったときに困るのは貧乏人だけじゃないでしょう。低所得層が増加すれば社会は不安定になるし、犯罪が増える可能性があります。結局は富裕層の人たちにとっても行きづらい世の中に社会になる。
格差社会の影響は、子供の教育にも大きく影を落としています。勉強さえすれば、誰でも同じように学校教育を受けられる、教育の機会は誰にでも平等にある、という人がいるけれど、それは建前で、そもそも親の所得が低ければ、受験競争に参加することさえできないのが現実です。かつての日本社会は、欧米とは違い階層の流動性が比較的高い社会、つまり階層の入れ代わりが比較的簡単な社会でした。しかしいまや階層の固定化が進みつつあります。

 こうした社会で皆さんがどういう行動を起こすかを考えてみると2つあります。
一つは、個人的な自己救済に走る場合。自分だけはせめて年収200万円以下にならないようにお金もうけに必死にならざるを得ない。私の子供だけは下流にならないようにあせって子供に投資しようとするわけです。
もうひとつは、「やっぱりこういう社会って変だよね」と同じような意見の人々と連帯して、知恵を出し合いながら社会を変えていこうとする場合。 結局、こういう社会を支えているのは前者の考え方です。格差が是正されないのは、前者の行動原理が大きな動機づけになっているからです。「自分だけは」「自分の家族だけは」という行動に駆られればかられるほど、格差はなくらないでしょう。だからそれが今、皆さんに問われているのです。自己救済に走るのか、もっと連帯を考えるのか。
しかし今の日本の社会では人と人との結びつきが弱い。例えば電車で飛び込み自殺にであって、交通が麻痺したりすると、多くの人々はきっと「迷惑だ」と思うでしょう。どうせ死ぬなら人に迷惑のかからない、他のところでやってくれと」。これは今の社会全体の雰囲気を表しているのではないでしょうか。
不幸になるのは、不幸になるだけの理由がある。自己責任というわけです。いちいちそれに構ってはいられない、こんなムードが支配的です。このムードを変えてゆくには、個人の幸せの中に逃げ込むのではなく、もっと広い世界を見据え、横のつながりを求めてゆくことが必要です。そして分断から連帯へと絆を深めていくしかありません。

@highslide_scroll.html
<header>
<title></title>
・・・
  <link href="./highslide/highslide.css" rel="stylesheet"
     type="text/css" media="screen" />
  <script type="text/javascript" src="highslide/highslide.js"></script>
  <script type="text/javascript" src="highslide/highslide-html.js"></script>
  <script type="text/javascript" src="../modules/highslide/swfobject.js"></script>

</header>
<body>
・・・
   <div id="highslide">
    <a href="#" onclick="return hs.htmlExpand(this, {contentId: 'highslide-html-2'})"
        class="highslide">HTML Scroll content</a>
    <div class="highslide-html-content" id="highslide-html-2"
        style="padding:15px;">
      <div style="height:15px; padding: 5px; border-bottom: 1px solid silver;">
        <a href="#" onclick="return hs.close(this)" class="control">Close</a>
      </div>
      <div class="highslide-body" style="padding: 0 20px 10px210px;">
        <h4>タイトル:ニッポンサバイバル 著 姜尚中より</h4>
        <p>表示視したいHTMLの中身</p>
        
・・・
・・・
</div> </div> </div> ・・・ </body>

〆 Highslide JS Ajax 要素の表示。

By エンジニアの足つぼ
@highslide_scroll.html
<header>
<title></title>
・・・
  <link href="./highslide/highslide.css" rel="stylesheet"
     type="text/css" media="screen" />
  <script type="text/javascript" src="highslide/highslide.js"></script>
  <script type="text/javascript" src="highslide/highslide-html.js"></script>
  <script type="text/javascript" src="../modules/highslide/swfobject.js"></script>

</header>
<body>
・・・
   <div id="highslide">
    <a href="es_ajax.html#intro" onclick="return hs.htmlExpand
        (this, {contentId: 'highslide-html-ajax', wrapperClassName: 'highslide-white',
         outlineType: 'rounded-white', outlineWhileAnimating: true, objectType: 'ajax' })"
         class="highslide">Ajaxの表示例</a>
    <div class="highslide-html-content" id="highslide-html-ajax"
        style="width: 400px;">
      <div style="height:18px;">
        <div class="controlbar5">
            <a href="#" class="previous" onclick="return hs.previous(this)"
               title="Previous (left arrow key)"></a>
            <a href="#" class="next" onclick="return hs.next(this)"
               title="Next (right arrow key)"></a>
            <a href="#" class="highslide-move" onclick="return false"
               title="Click and drag to move"></a>
            <a href="#" class="close" onclick="return hs.close(this)"
               title="Close"></a>
        </div>
      </div>
      <div class="highslide-body" style="padding: 0 10px 10px 10px"></div>
      </div>
    </div>
   </div>
   ・・・
</body>

The link to this site is free.   /   Last Updated : 28.May.2012   
Copyright © ESPRITS STYLE. 2003-2007   /   ご意見、感想、苦情は、 こちらへ...
counter