blog from hifu-koworks

パソコン工房hifu-kowooksのご紹介プログです。

2015年08月

トップページは画像ギャラリーをよく見かけます。このたびjqueryを用いてスライド混じりの画像ギャラリーを作成しました。その秘密はjquery(Multyslider&floater)の採用です。 

作成事例:『日田のものづくりを訪ねて』から
topdesiginⅡ
http://hifu-koworks.com/hitanokougei.ver08/index.html

その仕掛けは次の手順で作成することができます。

 

1.まずは、画面全体のレイアウト、画像ギャリーのデザインです。

静止画(スライド画も含めて)を配置した背景画像back.jpg(画像サイズ1366X1556 72pixel)を作成します。

cssbody { background:url("../img/back.jpg"); }

html<link rel="stylesheet" href="css/import.css">
 multyslider01

Back.jpgを背景にした画面。はスライド画を搭載予定
 

2.次はスライド画像の搭載です。

スライド部分(slideFlame)1~4まで設定可能。画像は複数(上記は各2種類)設定可能です。      

html

<head>

<link rel="stylesheet" href="css/style.css"><script src="js/jquery-1.7.2.min.js"></script><script src="js/slider.js"></script><script>$(function(){// 初期設定は、自動&左&linear10ms $("#slider-0").slider({ time: 32});// 手動で動かす$("#slider-1").slider({auto: false, pause: false});// 早送り・巻き戻し$("#slider-2").slider({direction: "right",time: 24, speed: 3});$("#slider-3").slider();});</script>

</head>

<body>

<div id="contents_inner0"><div class="slideFrame" id="slider-0">

<ul class="slideGuide">

<li class="slideCell"><img src="photo/75/001.jpg" width="135" height="135"></li>

<li class="slideCell"><img src="photo/75/002.jpg" width="135" height="135"></li>

</ul>

</div></div>

<div id="contents_inner2"><div class="slideFrame" id="slider-1">

<ul class="slideGuide">

<li class="slideCell"><img src="photo/150/001.jpg" width="432" height="280"></li>

<li class="slideCell"><img src="photo/150/002.jpg" width="432" height="280"></li>

</ul>

</div></div>

</body>

背景画像に合わせて、スライドの配置をします。サイズと上下の位置はhtmlを、左右の位置はCSSを調整して決めていきます。

css#contents{width: 1366px; } #contents_inner0{width: 131px; } #contents_inner1{width: 435px; }
multyslider02

slider-0slider-2photo75/001002photo150/001002をそれぞれ搭載しました。
 

3.最後はナビケーションボタンの設定です。

上下にスライドするフロータータイプのfloaterボタン(nav-3)です。

html

<head><script src="http://code.jquery.com/jquery.min.js"></script><script src="js/jquery.easing.js"></script>

<script src="js/floater.js"></script><script>(function($) {$(function() {// デフォルト$("#nav-1").floater();// オプション指定$("#nav-2").floater({marginTop: $("#header").outerHeight() + 60, marginBottom: $("#footer").outerHeight() + 60});// オプション全部指定$("#nav-3").floater({marginTop: $("#header").outerHeight() + 60, marginBottom: $("#footer").outerHeight() + 60,agility: 0.75,speed: 2000,

easing: "easeOutBounce"});// position: fixed 対応$("#nav-4").floater({marginTop: 100, fixed: true});});})(jQuery); </script>

</head>

<body>

<div id="container"><div id="nav-3">

<ul>

<li><a href="index.html">HOME</a></li>

<li><a href="sakuhin/togei.html"><img src="img/001.png" width="120" height="120"></a></li>

<li><a href="sakuhin/takemotuko.html"><img src="img/002.png" width="120" height="120"></a></li>

<li><a href="sakuhin/kagu.html"><img src="img/003.png" width="120" height="120"></a></li>

<li><a href="sakuhin/geta.html"><img src="img/004.png" width="120" height="120"></a></li>

</ul>

</div></div>

</body>

floaterボタンの配置はCSSを調整して決めます。

css#nav-3 { right: 800px; } #nav-3 li{ padding: 5px 1em; font-size: 20px; line-height: 1.5em; }
 multyslider03
multyslider05

■スライド画像(slider-0slider-2)とフローターボタン画像(nav-3)が搭載されました。


4.最後はfooter部の作成です。
フッターは全体にバランス良く仕上げましょう。

html

<div id="footer">
<ul class="footmenu">

<li class="first"><a href="index.html">HOME</a></li>

<li><a href="sakuhin/togei.html">陶芸</a></li>

<li><a href="sakuhin/takemotuko.html">竹・木工芸品</a></li>      

<li><a href="sakuhin/kagu.html">家具</a></li>

<li><a href="sakuhin/geta.html">下駄</a></li>
</ul>
multyslider06
■フッダー部(タイトルと
nav

multyslider04
■背景画像を変えて画像ギャラリーの全体イメージを変化させることが可能です。
http://hifu-koworks.com/hitanokougei.ver08/home.html

 以上。動画混じりの画像ギャラー/jquery(Multyslider&floater)のご紹介でした。2015.08

 


日田のものづくりを訪ねて。日田の工芸品
九州の小京都とよばれる日田。ここは古くから北部九州の各地を結ぶ交通の要衝として栄え、江戸時代には幕府直轄地・天領として郡代が置かれるなど、九州の政治・経済・文化の中心地として繁栄し、当時の歴史的な町並みが受け継がれています。

自然の恵みをいかし、熟練した技と心で作られる日田の工芸品は、伝統を守り続けてきた匠達の手業の結晶です。数々の作品をご紹介します。

desigin01
http://hifu-koworks.com/hitatopchenger.ver02/index.html

陶芸
美しい自然に囲まれた山間の里。川のせせらぎや柔らかな土の匂いが人々をやさしく包んでくれます。その土を使って匠達は創作に余念がありません。日田玖珠地域には、小鹿田焼、日田焼、清流焼、玖山窯、天領窯など、個性豊かです。

base01
base01a
base02

木・竹工芸品
素朴さと..使いやすさと...明治末期に漆器の生産がはじまり、その頃よりこの豊かな自然環境の中で、巧たちは多種多様な工芸品を生み出してきました。

base03

下駄
伝統の技を受け継ぐ職人の自信と心意気を感じさせる日田下駄のやさしい履き心地は、健康面でも見直され静かなブームを呼んでいます。

base04
base06

木・竹工芸品
素朴さと..使いやすさと...明治末期に漆器の生産がはじまり、その頃よりこの豊かな自然環境の中で、巧たちは多種多様な工芸品を生み出してきました。

base07
base08
base10

desigin02
desigin04
topdesiginⅡ

ver08
desigin00
desigin001
desigin002
desigin003
desigin004

bodybase02

http://hifu-koworks.com/hitanokougei.ver08/index.html

desigin001
木・竹工品
素朴さと..使いやすさと...日田地方では、明治末期に漆器の生産がはじまり、その頃よりこの豊かな自然環境の中で、巧たちは多種多様な工芸品を生み出してきました。現在では、周辺地域で産出される良質な竹材を使った箸やスプーンなどのテーブルウェアや花器、竹の器など生活に根ざした商品を生産しています。
 
陶芸
美しい自然に囲まれた山間の里。日田玖珠地方。川のせせらぎや柔らかな土の匂いが人々をやさしく包んでくれます。その土を使って匠達は創作に余念がありません。日田玖珠地域には、小鹿田焼、日田焼、清流焼、玖山窯、天領窯など、個性豊かな窯元があります。
desigin01

家具
日田は、明治後半から周辺地域の豊富な森林資源を活用してロクロ技術など木工品の製造技術が発展してきました。家具生産の起点は食堂用の丸椅子と地元の雑木を使って飯台(食事の台)等の生産をしたのが始まりです。その後、生活様式の洋リビングセットやダイニングセット等の脚物家具を主として生産され産地が形成されました。

 下駄
特産品である日田下駄は、日田が天領だった天保年間(1830~1844)に代官が殖産興業の手段として下駄づくりを奨励したことから発展しました。日田では昔ながらの下駄はもとより、現代的な感覚のカラフルな下駄やサンダルなど、伝統の技を受け継ぐ職人の自信と心意気を感じさせる下駄のやさしい履き心地が見直されています。
desigin04
 http://hifu-koworks.com/hitanokougei.ver08/sakuhin/geta.html

topdesigin




 
 

↑このページのトップヘ