cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div id="bar"><div id="barInner"></div></div>

<header id="header">
	<h1><a href="http://greensnap.jp/" target="_blank">greensnap slideshow</h1>
<!-- /#header --></header>

<section id="main">
    <div id="secGraph"></div>
<!-- /#main --></section>
            
          
!
            
              #bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: rgba(0,0,0,.85);
  z-index: 500;
}
#barInner {
  position: fixed;
  top: 0;
  left: 0;
  height: 10px;
  width: 0;
  background: rgba(255,255,255,.95);
}

.node {
  position: absolute;
  opacity: 1;
  transition: all .4s;
  overflow:hidden;
}

.node.on {
  opacity: 1;
}
.nodeInner {
  width: 100%;
  height: 100%;
  transition: all .4s;
  opacity: 0;
  transform: translate(-50%,0);
}

.nodeInner.on {
  opacity:1;
  transform: translate(0,0);
}

.node.on .nodeInner {
  transform: scale(1.2, 1.2);
}

h1 a { text-indent: -9999px; overflow:hidden; display:block; position: fixed; top:0;left:0;right:0;bottom:0; background: url(http://greensnap.jp/assets/images/base/logo.png) 50% 50% no-repeat;}
            
          
!
            
              var dataOrigin = [
{"id": "21198","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1433976846666_1433976846019_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1433976846888_thum_1433976846019_thum_tmp.jpg","totalLikes": 81},
{"id": "12225","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1429805766081_1429805351043_thum_DSC_1715.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1429805766210_thum_1429805351043_thum_DSC_1715.jpg","totalLikes": 165},
{"id": "33323","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437524082506_1437524081694_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437524082670_thum_1437524081694_thum_tmp.jpg","totalLikes": 45},
{"id": "33047","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437407777560_1437407776993_thum_sample.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437407777737_thum_1437407776993_thum_sample.jpg","totalLikes": 49},
{"id": "19954","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1433551264174_1433551263587_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1433551264353_thum_1433551263587_thum_tmp.jpg","totalLikes": 174},
{"id": "14762","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1431068424280_1431068423259_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1431068424428_thum_1431068423259_thum_tmp.jpg","totalLikes": 105},
{"id": "33574","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437608884542_1437608883890_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437608884685_thum_1437608883890_thum_tmp.jpg","totalLikes": 56},
{"id": "21115","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1433938145330_1433938033910_thum_003.JPG","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1433938145445_thum_1433938033910_thum_003.JPG","totalLikes": 111},
{"id": "33056","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437430612460_1437430611535_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437430612637_thum_1437430611535_thum_tmp.jpg","totalLikes": 52},
{"id": "17682","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1432514659221_1432514658714_thum_sample.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1432514659356_thum_1432514658714_thum_sample.jpg","totalLikes": 129},
{"id": "19808","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1433487712348_1433487613026_thum_DSC_20110612_0092.JPG","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1433487712546_thum_1433487613026_thum_DSC_20110612_0092.JPG","totalLikes": 129},
{"id": "33158","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437458432125_1437458431599_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437458432251_thum_1437458431599_thum_tmp.jpg","totalLikes": 47},
{"id": "33400","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437541323994_1437541322439_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437541324345_thum_1437541322439_thum_tmp.jpg","totalLikes": 66},
{"id": "33249","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437487154774_1437487153540_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437487154955_thum_1437487153540_thum_tmp.jpg","totalLikes": 54},
{"id": "29553","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1436347758740_1436347757724_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1436347758927_thum_1436347757724_thum_tmp.jpg","totalLikes": 321},
{"id": "33474","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437567728414_1437567727838_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437567728620_thum_1437567727838_thum_tmp.jpg","totalLikes": 74},
{"id": "33229","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437482704821_1437482703204_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437482705040_thum_1437482703204_thum_tmp.jpg","totalLikes": 49},
{"id": "33063","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437432441539_1437432440665_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437432441718_thum_1437432440665_thum_tmp.jpg","totalLikes": 48},
{"id": "33261","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437493851607_1437493849997_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437493851746_thum_1437493849997_thum_tmp.jpg","totalLikes": 66},
{"id": "33166","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437459765357_1437459764311_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437459765541_thum_1437459764311_thum_tmp.jpg","totalLikes": 44},
{"id": "33328","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437524993349_1437524992852_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437524993578_thum_1437524992852_thum_tmp.jpg","totalLikes": 47},
{"id": "33054","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437430298829_1437430298120_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437430298997_thum_1437430298120_thum_tmp.jpg","totalLikes": 80},
{"id": "33363","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437532826786_1437532826138_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437532826968_thum_1437532826138_thum_tmp.jpg","totalLikes": 64},
{"id": "18894","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1433065403998_1433065403300_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1433065404192_thum_1433065403300_thum_tmp.jpg","totalLikes": 226},
{"id": "15409","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1431363398735_1431363397930_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1431363398897_thum_1431363397930_thum_tmp.jpg","totalLikes": 80},
{"id": "33145","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437454112524_1437454111999_thum_sample.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437454112662_thum_1437454111999_thum_sample.jpg","totalLikes": 46},
{"id": "19582","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1433392782622_1433392781571_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1433392782833_thum_1433392781571_thum_tmp.jpg","totalLikes": 123},
{"id": "33450","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437560626621_1437560625951_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437560626816_thum_1437560625951_thum_tmp.jpg","totalLikes": 46},
{"id": "33761","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437648729893_1437648729093_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437648730142_thum_1437648729093_thum_tmp.jpg","totalLikes": 56},
{"id": "32256","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437173939837_1437173939179_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437173940004_thum_1437173939179_thum_tmp.jpg","totalLikes": 130},
{"id": "33136","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437450563851_1437450563306_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437450564001_thum_1437450563306_thum_tmp.jpg","totalLikes": 43},
{"id": "33521","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437577310494_1437577309762_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437577310652_thum_1437577309762_thum_tmp.jpg","totalLikes": 41},
{"id": "33240","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437485798182_1437485797282_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437485798312_thum_1437485797282_thum_tmp.jpg","totalLikes": 39},
{"id": "33550","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437602221324_1437602220742_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437602221451_thum_1437602220742_thum_tmp.jpg","totalLikes": 44},
{"id": "33469","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437566680070_1437566679122_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437566680260_thum_1437566679122_thum_tmp.jpg","totalLikes": 41},
{"id": "33226","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437479855609_1437479855135_thum_sample.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437479855840_thum_1437479855135_thum_sample.jpg","totalLikes": 40},
{"id": "33548","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437602161108_1437602160458_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437602161284_thum_1437602160458_thum_tmp.jpg","totalLikes": 44},
{"id": "33520","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437577118788_1437577118124_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437577118934_thum_1437577118124_thum_tmp.jpg","totalLikes": 42},
{"id": "33252","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437487971054_1437487970016_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437487971216_thum_1437487970016_thum_tmp.jpg","totalLikes": 42},
{"id": "33172","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437463626482_1437463625686_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437463626670_thum_1437463625686_thum_tmp.jpg","totalLikes": 42},
{"id": "33060","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437431781910_1437431780835_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437431782053_thum_1437431780835_thum_tmp.jpg","totalLikes": 42},
{"id": "33304","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437520676875_1437520676357_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437520677016_thum_1437520676357_thum_tmp.jpg","totalLikes": 38},
{"id": "33139","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437452087514_1437452086818_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437452087668_thum_1437452086818_thum_tmp.jpg","totalLikes": 39},
{"id": "33132","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437449479499_1437449479057_thum_sample.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437449479646_thum_1437449479057_thum_sample.jpg","totalLikes": 38},
{"id": "33580","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437609769042_1437609768118_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437609769221_thum_1437609768118_thum_tmp.jpg","totalLikes": 44},
{"id": "33288","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437518224636_1437518224223_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437518224763_thum_1437518224223_thum_tmp.jpg","totalLikes": 40},
{"id": "33423","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437549398023_1437549396924_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437549398246_thum_1437549396924_thum_tmp.jpg","totalLikes": 43},
{"id": "33365","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437533282361_1437531538340_thum_P7212002.JPG","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437533282555_thum_1437531538340_thum_P7212002.JPG","totalLikes": 45},
{"id": "33569","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437607390812_1437607390106_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437607390939_thum_1437607390106_thum_tmp.jpg","totalLikes": 42},
{"id": "33163","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437459565506_1437459564414_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437459565681_thum_1437459564414_thum_tmp.jpg","totalLikes": 40},
{"id": "33177","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437464964870_1437464964128_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437464965038_thum_1437464964128_thum_tmp.jpg","totalLikes": 44},
{"id": "33222","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437478261073_1437478260559_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437478261206_thum_1437478260559_thum_tmp.jpg","totalLikes": 40},
{"id": "33209","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437474303945_1437474302909_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437474304298_thum_1437474302909_thum_tmp.jpg","totalLikes": 40},
{"id": "33045","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437406834523_1437406833565_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437406834706_thum_1437406833565_thum_tmp.jpg","totalLikes": 41},
{"id": "33311","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437521527361_1437521526522_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437521527554_thum_1437521526522_thum_tmp.jpg","totalLikes": 38},
{"id": "33444","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437556791613_1437556790636_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437556791780_thum_1437556790636_thum_tmp.jpg","totalLikes": 41},
{"id": "33138","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437450875200_1437448186210_thum_DSC_0091.JPG","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437450875330_thum_1437448186210_thum_DSC_0091.JPG","totalLikes": 40},
{"id": "33436","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437554473535_1437554472642_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437554473732_thum_1437554472642_thum_tmp.jpg","totalLikes": 42},
{"id": "33271","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437499470048_1437499469524_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437499470217_thum_1437499469524_thum_tmp.jpg","totalLikes": 42},
{"id": "33524","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437578643278_1437578642664_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437578643442_thum_1437578642664_thum_tmp.jpg","totalLikes": 40},
{"id": "33547","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437602063447_1437602062903_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437602063600_thum_1437602062903_thum_tmp.jpg","totalLikes": 36},
{"id": "33382","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437538574480_1437538573551_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437538574683_thum_1437538573551_thum_tmp.jpg","totalLikes": 36},
{"id": "33306","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437520848389_1437520847541_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437520848532_thum_1437520847541_thum_tmp.jpg","totalLikes": 35},
{"id": "33228","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437482592291_1437482591044_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437482592482_thum_1437482591044_thum_tmp.jpg","totalLikes": 34},
{"id": "33052","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437422889890_1437422889104_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437422890025_thum_1437422889104_thum_tmp.jpg","totalLikes": 33},
{"id": "33127","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437447662801_1437447662058_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437447662946_thum_1437447662058_thum_tmp.jpg","totalLikes": 34},
{"id": "33562","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437605788196_1437605787342_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437605788335_thum_1437605787342_thum_tmp.jpg","totalLikes": 35},
{"id": "32763","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437312512870_1437312512278_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437312513089_thum_1437312512278_thum_tmp.jpg","totalLikes": 78},
{"id": "33358","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437530525027_1437530524274_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437530525202_thum_1437530524274_thum_tmp.jpg","totalLikes": 33},
{"id": "33377","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437536333501_1437536332627_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437536333882_thum_1437536332627_thum_tmp.jpg","totalLikes": 35},
{"id": "33062","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437432299793_1437432299137_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437432299944_thum_1437432299137_thum_tmp.jpg","totalLikes": 34},
{"id": "33142","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437452914303_1437452913406_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437452914458_thum_1437452913406_thum_tmp.jpg","totalLikes": 34},
{"id": "33471","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437567273736_1437567272884_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437567273891_thum_1437567272884_thum_tmp.jpg","totalLikes": 39},
{"id": "33112","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437444969316_1437444865308_thum_P7202015.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437444969452_thum_1437444865308_thum_P7202015.jpg","totalLikes": 33},
{"id": "33135","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437450507834_1437450507371_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437450507987_thum_1437450507371_thum_tmp.jpg","totalLikes": 33},
{"id": "33488","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437571770141_1437571768890_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437571770315_thum_1437571768890_thum_tmp.jpg","totalLikes": 35},
{"id": "32789","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437327982482_1437327981477_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437327982681_thum_1437327981477_thum_tmp.jpg","totalLikes": 86},
{"id": "33434","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437554279645_1437554279033_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437554279828_thum_1437554279033_thum_tmp.jpg","totalLikes": 35},
{"id": "33203","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437473060768_1437473059955_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437473060933_thum_1437473059955_thum_tmp.jpg","totalLikes": 39},
{"id": "33566","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437605996367_1437605995863_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437605996544_thum_1437605995863_thum_tmp.jpg","totalLikes": 35},
{"id": "33410","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437546050937_1437546049924_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437546051141_thum_1437546049924_thum_tmp.jpg","totalLikes": 32},
{"id": "33299","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437520245724_1437520245148_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437520245875_thum_1437520245148_thum_tmp.jpg","totalLikes": 37},
{"id": "33543","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437601370341_1437601369749_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437601370422_thum_1437601369749_thum_tmp.jpg","totalLikes": 35},
{"id": "33558","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437603997243_1437603996240_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437603997387_thum_1437603996240_thum_tmp.jpg","totalLikes": 36},
{"id": "33523","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437578510839_1437578510194_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437578510979_thum_1437578510194_thum_tmp.jpg","totalLikes": 42},
{"id": "33151","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437456753345_1437456752730_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437456753549_thum_1437456752730_thum_tmp.jpg","totalLikes": 35},
{"id": "33529","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437588141464_1437588140780_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437588141658_thum_1437588140780_thum_tmp.jpg","totalLikes": 35},
{"id": "33291","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437518884590_1437518884102_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437518884733_thum_1437518884102_thum_tmp.jpg","totalLikes": 36},
{"id": "33184","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437465599848_1437465599383_thum_sample.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437465600012_thum_1437465599383_thum_sample.jpg","totalLikes": 33},
{"id": "33247","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437486597074_1437486596210_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437486597180_thum_1437486596210_thum_tmp.jpg","totalLikes": 37},
{"id": "33427","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437550131407_1437550130910_thum_sample.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437550131554_thum_1437550130910_thum_sample.jpg","totalLikes": 31},
{"id": "33555","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437603389812_1437603389106_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437603389992_thum_1437603389106_thum_tmp.jpg","totalLikes": 32},
{"id": "33214","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437476263333_1437476262404_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437476263486_thum_1437476262404_thum_tmp.jpg","totalLikes": 30},
{"id": "33475","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437567836359_1437567835361_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437567836575_thum_1437567835361_thum_tmp.jpg","totalLikes": 32},
{"id": "33083","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437436877449_1437436876216_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437436877711_thum_1437436876216_thum_tmp.jpg","totalLikes": 31},
{"id": "33749","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437644614917_1437644614174_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437644615104_thum_1437644614174_thum_tmp.jpg","totalLikes": 38},
{"id": "32945","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437381516813_1437381515846_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437381516977_thum_1437381515846_thum_tmp.jpg","totalLikes": 64},
{"id": "33290","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437518798276_1437518797785_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437518798411_thum_1437518797785_thum_tmp.jpg","totalLikes": 31},
{"id": "33461","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437564701930_1437564701465_thum_sample.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437564702064_thum_1437564701465_thum_sample.jpg","totalLikes": 30},
{"id": "33192","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437467375371_1437467374833_thum_sample.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437467375533_thum_1437467374833_thum_sample.jpg","totalLikes": 30},
{"id": "33489","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437571871609_1437571871110_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437571871772_thum_1437571871110_thum_tmp.jpg","totalLikes": 30},
{"id": "33452","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437561651243_1437561650618_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437561651388_thum_1437561650618_thum_tmp.jpg","totalLikes": 30},
{"id": "33361","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437532024471_1437532023894_thum_sample.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437532024646_thum_1437532023894_thum_sample.jpg","totalLikes": 33},
{"id": "32549","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437261518762_1437261517959_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437261518979_thum_1437261517959_thum_tmp.jpg","totalLikes": 100},
{"id": "33017","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437395357634_1437395357030_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437395357798_thum_1437395357030_thum_tmp.jpg","totalLikes": 56},
{"id": "33355","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437529996873_1437529996248_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437529997051_thum_1437529996248_thum_tmp.jpg","totalLikes": 31},
{"id": "32550","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437261774802_1437261774222_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437261774971_thum_1437261774222_thum_tmp.jpg","totalLikes": 100},
{"id": "33350","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437528458226_1437528457357_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437528458381_thum_1437528457357_thum_tmp.jpg","totalLikes": 32},
{"id": "33165","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437459711242_1437459710342_thum_tmp.jpg","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437459711392_thum_1437459710342_thum_tmp.jpg","totalLikes": 30},
{"id": "33111","imageUrlDetail": "https://img.greensnap.jp.s3.amazonaws.com/1437444757422_1437444561135_thum_P1261747.JPG","imageUrlSquare": "https://img.greensnap.jp.s3.amazonaws.com/1437444757542_thum_1437444561135_thum_P1261747.JPG","totalLikes": 32}
];

//ギャラリー用変数
var pageNum = 0;//ページ番号
var thumbNum = 10;//サムネイル数
var slideTime = 5000;//スライド切り替え時間
var maxPageNum;//最大ページ数
 
var graph_width = window.innerWidth;//表示幅
var graph_height = window.innerHeight;//表示高さ
var tree = {name: "greensnap"}//D3.jsのtreemapオブジェクト宣言
 
//DOMをD3オブジェクトに
var photoGraph = d3.select("#secGraph")
  .append('div')
  .attr("width", graph_width+'px')
  .attr("height", graph_height+'px');
 
var bar = d3.select('#bar');
var barInner = d3.select('#barInner');
 
maxPageNum = Math.floor( dataOrigin.length / thumbNum );//最大ページ数を設定。端数は切り捨て

setTreemap();//ツリーマップセット関数実行
 
function setTreemap() {
  barInner.attr('style','width:0;');//遷移バーの幅を初期化。
  var dataArr = [];//1ページに表示させる画像配列の宣言
  if( pageNum === maxPageNum ){
    for(var i = pageNum * thumbNum ; i < dataOrigin.length; i++){
        dataArr.push( dataOrigin[i] );
    }
    pageNum = 0;
  }
  else {
    for(var i = pageNum * thumbNum ; i < ( pageNum + 1 ) * ( thumbNum ); i++){
        dataArr.push( dataOrigin[i] );
    }
    pageNum++;
  }

/* スライドの描画 */
tree.children = dataArr;//treeに1ページ分の配列をセット。
var treemap = d3.layout.treemap()
    .size([graph_width, graph_height])
    .sort(null)
    .value(function(d) {
      return ( parseInt( d.totalLikes ) );//表示領域の大きさの基準を、ライク数に設定。
  });
 
var node = photoGraph.datum(tree);
 
//node remove スライドのデータなどを削除し、初期化。
node
  .selectAll(".node")
  .data({})
  .exit()
  .remove();
 
//node enter
node
  .selectAll(".node")
  .data(treemap.nodes)
  .enter()
  .append("div")
  .attr('class','node')
  .attr('style',function(d){
    return 'width:' +  d.dx + "px; height:" + d.dy + "px; top:" + ( graph_height - d.y - d.dy ) + "px; left:" + ( graph_width - d.x - d.dx ) + "px";
  })
  .on('click',function(d){
    //モーダル表示などあればここで
  })
  //mouseover/outのエフェクト追加。
  .on('mouseover',function(d,i){
    d3.select(this).attr('class','node on');
  })
  .on('mouseout',function(d,i){
    d3.select(this).attr('class','node');
  })

//背景画像表示枠の設定
node
  .selectAll(".node")
  .append("div")//.nodeにDIVをappend。
  .attr('class','nodeInner')//appendしたDIVにnodeInnerクラスを付与。
  .attr('style',function(d){//画像URLを、背景画像で設定。
    return 'background:url(' + d.imageUrlDetail + ') 50% 50% no-repeat; background-size:cover;';
  })
  .transition()//transition(遷移)の指定。
  .delay(function(d,i){//delay(遅延)マイクロ秒の指定関数。同時に、バーの表現・次のスライドへの遷移を実装。
    if( dataArr.length == i ){//最後のスライド画像の場合
      barInner
        .attr('class','on') //
        .transition()//バーにもtransitionを指定。
        .duration(slideTime)//遷移時間は、あらかじめ変数化してあります。
        .attr('style','width:100%;')//遷移の内容。CSSで、widthを100%にします。
        .each("end",function(){//遷移のコールバック。
          setTreemap();//遷移完了 → setTreemap()を再実行。
      })
    }
    return 1200 / dataArr.length * i;//インデックス数で掛け合わせ、パラパラした動きを実装。
  })
  .duration(0)//遷移時間は無しにしてますが、ここでなんか処理かけても面白いかも。
  .attr("class",'nodeInner on')//あらかじめCSSで設定しておいた、表示時の効果(opacity:1など)が掛かるようにクラス指定
}
            
          
!
999px
Loading ..................

Console