一歩先を行く QHMユーザのためのTips

Page1

jQueryでギャラリー

【作成方法】
jQuery (Galleria)をQHMに設定し、ギャラリーを表示します。

  1. 以下のサイトからGalleriaをダウンロードする
    GALLERIA http://galleria.io/download/
  2. zipファイルを展開し、galleria のフォルダをQHMの直下へFTPでアップロードする。(jsのフォルダがあるところと同じ階層にアップロード)
  3. 以下の コード をギャラリーを表示するページにコピペする。
  4. 画像をSWFUでアップする。
  5. 画像の名前をアップしたファイル名に変更する。表示したい画像の名前を追加していくだけで簡単に画像の追加ができる。

【解説】

  • 画像の大きさは、#galleria で指定しているサイズに最適化されるようです。縦または横幅がそのサイズ内に入るように自動調整されます。
  • ギャラリーのテーマがいくつか用意されていて、無料で利用できるのは Classicのテーマだけのようです。他のテーマが利用したい場合は購入する必要があります。

【コード】

#beforescript{{
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="galleria/galleria-1.2.8.min.js"></script>
<script>
  Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
  Galleria.run('#galleria');
</script>

<style type="text/css">
#galleria{ width: 700px; height: 400px; background: #000 }
</style>
}}


#html{{
<div id="galleria">
  <img src="swfu/d/img750x180_1.jpg">
  <img src="swfu/d/img750x180_2.jpg">
  <img src="swfu/d/img750x180_3.jpg">
  <img src="swfu/d/qhmblog.jpg">
  <img src="swfu/d/QHMDesign.jpg">
</div>
}}

Page1

このページはヘッダとメニューを非表示にしています。以下のコードを使用。

#beforescript{{
<style type="text/css">
<!--
#header {display: none;}
#wrap_content {width:100%;}
#wrap_sidebar {width:0%;}
-->
</style>
}}

ご意見箱

皆様のご意見をお待ちします。


認証コード(1657)

当ページは役に立ちましたか?

選択肢 投票
たいへん役に立った 3  
ちょっとだけ役に立った 0  
普通 0  
あんまり 3  



a:1482 t:1 y:1

powered by QHM 6.0.9 haik
based on PukiWiki 1.4.7 License is GPL. QHM

最新の更新 RSS  Valid XHTML 1.0 Transitional