サンプルページ　　　Full Sscreen Slider

ﾎｰﾑ　へ　　　　　　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　Full Sscreen Slider　　fullscreenslider.htm （説明書・起動）

ﾌﾙｽｸﾘｰﾝで表示するDIVｺﾝﾃﾝﾂを、ﾎﾞﾀﾝでｽﾗｲﾄﾞ切り替えする。　　　　　　jQuery、DHTML。　　　　　　ﾌﾙｽｸﾘｰﾝで表示するDIVｺﾝﾃﾝﾂなどのｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。　　　　all 対応。　　　　　ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ、(^ ^)。

ﾃﾞﾓは、ddfullscreenslider.htm をｸﾘｯｸ、（jQuery実装ﾌｧｲﾙｻﾝﾌﾟﾙ）ﾍﾟｰｼﾞを表示。　　ｺﾝﾃﾝﾂ（ＤＩＶ）の切り替えは選択ﾎﾞﾀﾝのｸﾘｯｸやﾏｳｽのｽｸﾛｰﾙﾎﾞﾀﾝで。　　　この（説明書・起動）ﾍﾟｰｼﾞへの復旧は、右上の　Ｘ　で。

< ご使用方法 >

　・　ﾛｰｶﾙ（=PC）への保存は、fullscreenslider/をｸﾘｯｸ開いたﾎﾙﾀﾞｰで、fullscreenslider.htm（説明書）、,ddfullscreenslider.htm（jQuery実装ﾌｧｲﾙｻﾝﾌﾟﾙ）、jquery.mousewheel.min.js、ddfullscreenslider.js、ddfullscreenslider.css を右ｸﾘｯｸ、[対象をﾌｧｲﾙに保存] - 【ﾌｧｲﾙのﾀﾞｳﾝﾛｰﾄﾞ】、【ﾌｧｲﾙ名を付けて保存】 - <保存する場所>： ……、などで。　　　　※: 変わってしまった、ﾌｧｲﾙ名や、*.html 中のﾊﾟｽは要修正。

　・　このDHTMLの実装・編集方法は、ddfullscreenslider.htm をﾃｷｽﾄｴﾃﾞｨﾀｰや、ﾎｰﾑﾍﾟｰｼﾞ作成ｿﾌﾄなどのHTML挿入/編集ﾒﾆｭｰなどを使って編集・使用します。

　･　編集方法は、ddfullscreenslider.htm を WordPad や SmipleTextなどのﾃｷｽﾄｴﾃﾞｨﾀｰ、あるいは ”FrontPage Express” などのﾎｰﾑﾍﾟｰｼﾞ制作ｿﾌﾄのHTMLﾀｸﾞ挿入/編集ﾒﾆｭｰで開き編集します。　　　　下記の（例） (*1) と　(*3) を参考に太字部分の編集を任意に行います。　　　　※: ﾃｷｽﾄｴﾃﾞｨﾀｰによる編集は、HP制作ｿﾌﾄとの互換性の問題を生じません（HP制作ｿﾌﾄ間は少し生じる）。

　・　作動ﾃｽﾄは、ﾛｰｶﾙ（PC）に保存し、 Internet Explorer 10.x～などで開いて。　　　　更新の確認は、[F5]ｷｰを押し、最新ﾃﾞｰﾀ読み込み、で。　　　　あるいは、Internet Explorerを全て閉じ、再起動を行い、閲覧履歴の削除後や、【Internet Explorer】- [ﾂｰﾙ] - [ｲﾝﾀｰﾈｯﾄｵﾌﾟｼｮﾝ] - [閲覧の履歴] - [削除] などでも。

　･　ｱｯﾌﾟﾛｰﾄﾞや作動ﾃｽﾄは、ddfullscreenslider.html と同じ階層〔ﾎﾙﾀﾞｰ/ﾃﾞｨﾚｸﾄﾘｰ〕に、使用する画像、*.js、*.css なども転送/配置し実施。　　※：別ﾃﾞｨﾚｸﾄﾘｰに配置時は、*.html 中のﾊﾟｽは要修正。　　　FTPなどで変わってしまったﾌｧｲﾙ名は要修正。　　　　ｽｸﾘﾌﾟﾄ構文中への改行混入は非作動原因。

(*1) ：　ddfullscreenslider.htm （例）　　　　　　　

　HTMLの編集方法　

(*1) をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記の太字部分を編集し使用。

〔この列ﾍﾟｰｽﾄ不要〕　

jQuery

DD Full Screen Slider

画像（犬）

All About Mushrooms

画像（兎）

Coconuts!
画像（栗鼠）

A scrollable DIV!

Amsterdam City

画像（蜻蛉）

以下、同様。

Dolphin

画像（イルカ）

<!doctype html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="ddfullscreenslider.css" />

<style>
/* Responsive CSS for demo */

section.dd_fullscreenslider article.slide img{
max-width: 100%;
height: auto;
}

@media (max-height: 700px){ /* Decrease height of "intro" element and make it scrollable instead */
#intro{
height: 400px;
}

#coconutsbody{ /* Decrease height of "coconutsbody" element and make it scrollable instead */
height: 200px !important;
}
}

@media (max-width: 740px){

section.dd_fullscreenslider article.slide{
line-height: 1.5em !important;
}

section.dd_fullscreenslider article.slide h2{
font-size: 2em !important;
}

section.dd_fullscreenslider article.slide .scrollable{
width: 100% !important;
}

}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="jquery.mousewheel.min.js"></script>

<script src="ddfullscreenslider.js">

/***********************************************
* DD Full Screen Slider- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script>

var fss // register arbitrary global variable

jQuery(function(){
fss = new ddfullscreenslider({
sliderid: 'ddfss', // id of main slider container
sliderstate: 'open' // default state of slider
})
})

</script>

</head>
<body>

<section id="ddfss" class="dd_fullscreenslider">


<div class="slidewrapper">

<article class="slide" data-title="Introduction">
<h2>DD Full Screen Slider</h2>
<p id="intro" class="scrollable">This full screen Slider creates slides that cover the entire page, allowing you to present content in an interactive, digestible format to viewers. Desktop and mobile friendly, the slides can be navigated in a plethora of ways- auto generated navigational buttons, keyboard, mousewheel, and drag/swipe on the desktop and on mobile. Each slide adds an unique hash (#) to the window URL to make them navigable and sharable with distinct URLs. Unique amongst its features is the ability to enable "scrollable" DIVs inside a slide that do not partake in the scrolling of the slide itself when swiped, so the content in question can be scrolled instead. Full Screen Slider harnesses CSS3 for its animations, falling back to jQuery for older browsers.</p>
<p class="scrollable">
<img src="http://xml-xsl.sakura.ne.jp/win7/windows26h1230.jpg" style="height: 400px" /></p>
</article>

<article class="slide" data-title="All about mushrooms">
<h2>All About Mushrooms</h2>
<p>"Mushroom" describes a variety of gilled fungi, with or without stems, and the term is used even more generally, to describe both the fleshy fruiting bodies of some Ascomycota and the woody or leathery fruiting bodies of some Basidiomycota.</p>
<img src="http://xml-xsl.sakura.ne.jp/win7/windows34h1230.jpg" style="height: 400px" />
</article>

<article class="slide" data-title="Coconuts Galore!">
<h2>Coconuts!</h2>
<img src="http://xml-xsl.sakura.ne.jp/win7/windows19h1230.jpg" style="height: 400px" />

<div id="coconutsbody" style="background:#7BBF28; height: 300px" class="scrollable">

<h3>A scrollable DIV!</h3>
<p>Coconuts are different from any other fruits because they contain a large quantity of "water" and when immature they are known as tender-nuts or jelly-nuts and may be harvested for drinking. The coconut is known for its great versatility as seen in the many uses of its different parts and found throughout the tropics and subtropics. Coconuts are part of the daily diets of many people. Coconuts are different from any other fruits because they contain a large quantity of "water" and when immature they are known as tender-nuts or jelly-nuts and may be harvested for drinking. When mature, they still contain some water and can be used as seednuts or processed to give oil from the kernel, charcoal from the hard shell and coir from the fibrous husk. </p>

<p>Coconuts are different from any other fruits because they contain a large quantity of "water" and when immature they are known as tender-nuts or jelly-nuts and may be harvested for drinking. The coconut is known for its great versatility as seen in the many uses of its different parts and found throughout the tropics and subtropics. Coconuts are part of the daily diets of many people. Coconuts are different from any other fruits because they contain a large quantity of "water" and when immature they are known as tender-nuts or jelly-nuts and may be harvested for drinking. When mature, they still contain some water and can be used as seednuts or processed to give oil from the kernel, charcoal from the hard shell and coir from the fibrous husk. </p>

</div>

</article>

<article class="slide" data-title="Amsterdam, Netherlands">
<h2>Amsterdam City</h2>
<p>Amsterdam is the capital city and most populous city of the Kingdom of the Netherlands. Its status as the Dutch capital is mandated by the Constitution of the Netherlands though it is not the seat of the Dutch government, which is The Hague. Amsterdam has a population of 825,080 within the city proper, 1,317,663 in the urban area and 1,590,520 in the metropolitan area.</p>
<img src="http://xml-xsl.sakura.ne.jp/win7/windows16h1230.jpg" style="height: 400px" />
</article>

この間、説明を省略。

<article class="slide" data-title="dolphin">
<h2>Dolphin</h2>
<p>生物分類上はイルカとクジラに差はない。　　頭頂部に呼吸のための独立した噴気孔をもち、肺呼吸する。　　呼吸の周期はおよそ40秒である。　　生殖器は通常外見からはメスとオスの区別は困難であるが、交接時にはペニスが露出するため容易に鑑別できる。
　　誕生からしばらくの間は母乳によって育てられる。　　多くは魚類や頭足類などを捕食する肉食である。　　イルカは体重に占める脳がヒトに次いで大きい、知性の潜在的可能性が多くの研究者の研究対象、興味の対象とされてきた。　　イルカの脳はサイズは大きいものの、グリア細胞の割合が多く、ニューロン自体の密度はそれほど高くない。　　人間と同様の知性を持つか
！？、科学的根拠は確認されていない。　　高い周波数>をもったパルス音を発して、物体に反射した音からその物体の特徴を知る能力を持つ。　　その特徴を他の個体にパルス音で伝えたりと、コミュニケーション能力は高く､いじめも行うこともわかっており､魚などを集団で噛み付き弱らせ弄んだ挙句食べずに捨てる､　　小さな同種のイルカや弱ったものを集団で噛み付くなどして、殺すなど集団的な暴行行為も行う｡</p>
<img src="http://xml-xsl.sakura.ne.jp/win7/windows18h1230.jpg" style="height: 400px" width="640" />
</article>
　

</div>


<div class="closex" onClick="location='http://www.dynamicdrive.com/dynamicindex17/ddfullscreensliderdoc.htm'">Close</div>

</section>

</body>

</html>

(*3) ：　ddfullscreenslider.css （例）　　　　　　　　　ﾃｷｽﾄｴﾃﾞｨﾀｰで開き、編集し ddfullscreenslider.htm と同ﾃﾞｨﾚｸﾄﾘｰに転送・配置します。　

　*.cssの編集方法　

(*3)をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓の太字部分を編集し使用。

〔この列ﾍﾟｰｽﾄ不要〕

html.fssopen, html.fssopen body{ /* class added to HTML element when full screen slider is open to hide potential body scrollbars */
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
}

section.dd_fullscreenslider{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 2000;
font-size: 16px; /* base font size */
visibility: visible;
overflow: hidden;
}

div.slidewrapper{ /* wrapper DIV that surrounds the ARTICLE elements inside .dd_fullscreenslider */
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
-webkit-transform: translate3d(0, 0, 0); /* to prevent flickering in iOS */
-moz-transition: -moz-transform 0.5s; /* actual duration controlled by script */
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}

ul.fssnav{ /* UL list dynamically added by script for Slider navigation */
list-style: none;
padding: 0;
margin: 0;
position: fixed;
top: 50%; /* vertically center menu */
right: 10px; /* distance from right edge of screen */
transform: translateY(-50%); /* vertically center menu */
}

ul.fssnav li{
margin-bottom: 15px;
}

ul.fssnav li a{
text-decoration: none;
border: 5px solid white; /* border color of nav links */
border-radius: 50%;
width: 14px; /* dimensions of nav links */
height: 14px;
display: block;
position: relative;
text-indent: -500px;
outline: none;
overflow: hidden;
}

ul.fssnav li a::after{ /* create "fill" element inside A */
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 100%;
left: 0;
background: white; /* color of "fill" element */
transition: top 0.5s; /* transition for "fill up" effect */
}

ul.fssnav li.selected a::after{
top: 0; /* fill up selected A element from bottom to top */
}

section.dd_fullscreenslider article.slide{ /* CSS for each slide */
width: 100%;
height: 100%;
display: block;
font-family: 'Lato', sans-serif; /* Use google font */
padding: 20px;
font-size: 1.2em;
line-height: 2em;
color: white;
overflow: hidden;
-webkit-box-sizing: border-box; /* include padding/ border as part of declared menu width */
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: 1000;
background: #E56464;
-webkit-transform: translate3d(0, 0, 0); /* to prevent flickering in iOS */
}

section.dd_fullscreenslider article.slide h2{ /* H2 Header inside each slide */
font-size: 3em;
margin: 0;
line-height: 1.1em;
letter-spacing: 3px;
}

section.dd_fullscreenslider article.slide .scrollable{ /* Assign this class to elements within a slide that should be scrollable */
overflow: auto;
}

section.dd_fullscreenslider article.slide a{
color: yellow;
}

section.dd_fullscreenslider article.slide:nth-of-type(2){ /* 2nd demo slide bgcolor */
background: #22AFE2;
}

section.dd_fullscreenslider article.slide:nth-of-type(3){ /* 3rd demo slide bgcolor */
background: #88D332;
}

section.dd_fullscreenslider article.slide:nth-of-type(4){ /* 4th demo slide bgcolor */
background: #A36400;
}

section.dd_fullscreenslider div.closex{ /* Large x close button inside Slider */
width: 50px;
height: 50px;
overflow: hidden;
display: block;
position: fixed;
cursor: pointer;
text-indent: -1000px;
opacity: 0.8;
z-index: 1001;
top: 5px;
right: 3px;
}

section.dd_fullscreenslider div.closex::before, section.dd_fullscreenslider div.closex::after{ /* render large x inside close button */
content: "";
display: block;
position: absolute;
width: 100%;
height: 6px;
background: white; /* color of x button */
top: 50%;
margin-top: -3px;
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}

section.dd_fullscreenslider div.closex::after{ /* render large cross inside close button */
-ms-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}

< 補足 >　　　　適時参照あれ！。

　・　Wordpad　によるHTMLｿｰｽ（ﾀｸﾞ）を見ながらの直接編集方法。