display images:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

<!doctype html>
<html>
<head>
<meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="geovindu,Geovin Du, 涂聚文">
    <meta name="author" content="geovindu">
    <title>WowBook, a flipbook jQuery plugin Preview images- create table of contents</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  
 
<script type="text/javascript" src="./wow_book/pdf.combined.min.js"></script>
<link rel="stylesheet" href="./wow_book/wow_book.css" type="text/css" />
        <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <!-- Custom Fonts -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">
 
    <!-- Plugin CSS -->
    <link rel="stylesheet" href="css/animate.min.css" type="text/css">
 
    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/creative.css" type="text/css">
 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
 
     
</head>
 
<body id="page-top">
 
 
     
     
<div id="book1" class="lightbox-images">
     <div>
    <h1>目录</h1>
       <ul>
            <li>目录 涂聚文</li>
            <li><a href="#book1/2">封面................................</a></li>
            <li><a href="#book1/3">目录............................第1页</a></li>
            <li><a href="#book1/4">酒店推荐.........................第2页</a>
                    <ul>
                        <li><a href="#book1/5">亚朵酒店...............................第3页</a></li>
                        <li><a href="#book1/6">珀丽酒店...............................第4页</a></li>
                        <li><a href="#book1/7">明阳酒店...............................第5页</a></li>
                        <li><a href="#book1/8">艺嘉酒店...............................第6页</a></li>
                        <li><a href="#book1/9">百合酒店...............................第7页</a></li>
                        <li><a href="#book1/10">乐酒店.................................第8页</a></li>
                        <li><a href="#book1/11">香格里拉酒店...........................第9页</a></li>
                        <li><a href="#book1/12">明新新地酒店...........................第10页</a></li>
                        <li><a href="#book1/13">维也纳酒店.............................第11页</a></li>                     
                        <li><a href="#book1/14">7天连锁酒店............................第12页</a></li>
                        <li><a href="#book1/15">新贝酒店...............................第13页</a></li>
                    </ul>
            </li>
            <li><a href="#book1/16">餐饮推荐...........................第14页</a>
                    <ul>
                        <li><a href="#book1/17">汉阳馆.烤肉大师...........................第15页</a></li>
                        <li><a href="#book1/17">海底捞..................................第15页</a></li>
                        <li><a href="#book1/17">点都德..................................第15页</a></li>
                        <li><a href="#book1/18">慕湘（湖南菜）...........................第16页</a></li>
                        <li><a href="#book1/18">探鱼...................................第16页</a></li>
                        <li><a href="#book1/18">鱼小妖.................................第16页</a></li>
                        <li><a href="#book1/19">酸渡酸菜鱼..............................第17页</a></li>
                        <li><a href="#book1/19">龙发鸡煲................................第17页</a></li>
                        <li><a href="#book1/19">忆年四季椰子鸡锅.........................第17页</a></li>
                        <li><a href="#book1/20">丹桂杆（新都店）粤菜.....................第18页</a></li>
                        <li><a href="#book1/20">稻香迎喜皇宫............................第18页</a></li>
                             
                    </ul>
            </li>
           <li><a href="#book1/21">封底.........................</a></li>
     </ul>
 
    </div> 
  <div>
    <img class="book-thumb" src="img/lukfook/index.jpg" alt=""/>
  </div>
 
  <div>
    <img class="book-thumb" src="img/lukfook/2021消费指南-02.png" alt=""/>
  </div>
  
  <div>
    <img class="book-thumb" src="img/lukfook/2021消费指南-03.jpg" alt=""/>
  </div>
  
  <div>
    <img class="book-thumb" src="img/lukfook/2021消费指南-04.jpg" alt=""/>
  </div>
      <div>
    <img class="book-thumb" src="img/lukfook/2021消费指南-05.jpg" alt=""/>
  </div>
      <div>
    <img class="book-thumb" src="img/lukfook/2021消费指南-06.jpg" alt=""/>
  </div>
      <div>
    <img class="book-thumb" src="img/lukfook/2021消费指南-07.png" alt=""/>
  </div>
      <div>
    <img class="book-thumb" src="img/lukfook/2021消费指南-08.png" alt=""/>
  </div>
 
    <div>
    <img class="book-thumb" src="img/lukfook/2021消费指南-09.jpg" alt=""/>
  </div>  
 
    <div>
    <img class="book-thumb" src="img/lukfook/2021消费指南-10.jpg" alt=""/>
  </div>
  <div>
    <img class="book-thumb" src="img/lukfook/2021消费指南-11.jpg" alt=""/>
  </div>
  
  <div>
    <img class="book-thumb" src="img/lukfook/2021消费指南-12.jpg" alt=""/>
  </div>
  
  <div>
    <img class="book-thumb" src="img/lukfook/2021消费指南-13.jpg" alt=""/>
  </div>
  
  <div>
    <img class="book-thumb" src="img/lukfook/2021消费指南-14.png" alt=""/>
  </div>
      <div>
    <img class="book-thumb" src="img/lukfook/2021消费指南-15.jpg" alt=""/>
  </div>
      <div>
    <img class="book-thumb" src="img/lukfook/2021消费指南-16.jpg" alt=""/>
  </div>
      <div>
    <img class="book-thumb" src="img/lukfook/2021消费指南-17.jpg" alt=""/>
  </div>
      <div>
    <img class="book-thumb" src="img/lukfook/2021消费指南-18.jpg" alt=""/>
  </div>
  
    <div>
    <img class="book-thumb" src="img/lukfook/2021消费指南-19.jpg" alt=""/>
  </div>  
       
 <div>
    <img class="book-thumb" src="img/lukfook/2021消费指南-20.jpg" alt=""/>
  </div>  
     
</div>
     
<style>
    .book-thumb{
         
        width:100%;
        height: 100%;
    }
        .hidden-FIXME{
            display: none;
        }
        #portfolio {
            display: none;
        }
        header { display: none; }
        #contact { display: none; }
        #about {
            display: none;
        }
 
        .navbar-header {
            width: 100% !important;
        }
        .navbar-brand {
            padding-right: 0;
            font-size: 14px !important;
        }
        #nav-buy-now {
            color: black;
            float: right;
            font-size: 14px;
            font-weight: 700;
            margin-right: -10px;
        }
        @media (min-width: 768px) {
            #nav-buy-now {
                margin-right: 0px;
            }
        }
        #bs-example-navbar-collapse-1 {
            display: none;
        }
 
        .wowbook {
            font-family: "Open Sans","Helvetica Neue",Arial,sans-serif;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }
        .wowbook-page-content {
            padding: 1.5em;
        }
        .wowbook ul {
            padding-left: 1em;
        }
        .book-thumb {
            /*height: 150px;*/
            box-shadow: 0 0 3px rgba(0, 0, 0, 0.5)
        }
 
        #book1-trigger, #book2-trigger, #book3-trigger {
            cursor: pointer;
        }
        #book1-trigger:hover, #book2-trigger:hover, #book3-trigger:hover {
            background: #f8f8f8;
        }
 
        .wowbook-lightbox > .wowbook-close {
            background: transparent !important;
            border: none !important;
            color: #222 !important;
            font-size: 2.5em;
        }
        .wowbook-lightbox > .wowbook-close:hover {
            background: #444 !important;
            color: white !important;
            border-radius: 3px;
        }
 
 
        .lightbox-images1 .wowbook-book-container {
            background: #6d6b92; /* Old browsers */
            background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #6d6b92 100%); /* FF3.6-15 */
            background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#6d6b92 100%); /* Chrome10-25,Safari5.1-6 */
            background: radial-gradient(ellipse at center, #ffffff 0%,#6d6b92 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        }
        .lightbox-images1 > .wowbook-close,
        .lightbox-images2 > .wowbook-close {
            color: #ccc !important;
        }
        .lightbox-images2 .wowbook-book-container {
            background: #1E2831; /* Old browsers */
            background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #1E2831 100%); /* FF3.6-15 */
            background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#1E2831 100%); /* Chrome10-25,Safari5.1-6 */
            background: radial-gradient(ellipse at center, #ffffff 0%,#1E2831 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        }
 
 
 
        .lightbox-pdf  .wowbook-book-container {
            background: #e5e5e5 url(./img/bg-lightbox-pdf.png); /* Old browsers */
            background: #e5e5e5 -moz-radial-gradient(center, ellipse cover, #ffffff 20%, #bbbbbb 100%); /* FF3.6-15 */
            background: #e5e5e5 -webkit-radial-gradient(center, ellipse cover, #ffffff 20%,#bbbbbb 100%); /* Chrome10-25,Safari5.1-6 */
            background: #e5e5e5 radial-gradient(ellipse at center, #ffffff 20%,#bbbbbb 100%); /* W3C, IE10+, FF16+, Chrome26+,Opera12+, Safari7+*/
        }
 
 
        .lightbox-html  .wowbook-book-container {
            background: url(img/book_html/wood.jpg);
        }
        .lightbox-html .wowbook-toolbar {
            margin-top: 1em; /* FIXME */
            box-sizing: content-box !important;
        }
 
        .lightbox-html .wowbook-controls {
            border-radius: 6px;
            width: auto;
        }
 
        .lightbox-html.wowbook-mobile .wowbook-toolbar {
            margin: 0;
        }
 
        .lightbox-html.wowbook-mobile .wowbook-controls {
            border-radius: 0;
            width: 100%;
        }
 
 
/*      .lightbox-html .wowbook-controls {
            border-radius: 6px;
            width: auto;
            background: none;
            color: rgba(60, 20, 20, 0.8);
            text-shadow: 0 1px 0 #fff;
            box-shadow: none;
        }
        .lightbox-html .wowbook-control:hover {
            background: none;
            color: white;
            text-shadow: 0 1px 0 #fff, 0 0px 5px rgba(60, 20, 20, 1);
            text-shadow: 0 1px 0 #fff, 0 0px 3px #fff;
        }
*/
        hr {
            max-width: 450px;
        }
    </style>  
     
     
    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
 
    <!-- Plugin JavaScript -->
    <script src="js/jquery.easing.min.js"></script>
    <script src="js/jquery.fittext.js"></script>
    <script src="js/wow.min.js"></script>
    <!-- Custom Theme JavaScript -->
    <script src="js/creative.js"></script>
 
    <link rel="stylesheet" href="./wow_book/wow_book.css" type="text/css" />
    <style>
        .wowbook-right .wowbook-gutter-shadow {
            background-image: url("./img/page_right_background.png");
            background-position: 0 0;
            width: 75px;
        }
        .wowbook-left .wowbook-gutter-shadow {
            background-image: url("./img/page_left_background.png");
            opacity: 0.5;
            width: 60px;
        }
        .wowbook-control-currentPage {
            font-family: "Segoe UI",Helvetica,Arial,sans-serif;
        }
    </style>  
     
<script src="./wow_book/wow_book.min.js"></script>  
<script type="text/javascript">   
$(function(){   
     
                function fullscreenErrorHandler(){
                if (self!=top) return "The frame is blocking full screen mode. Click on 'remove frame' button above and try to go full screen again."
            }
//children: 如何设置字节点目录
var tableOfContents = [
  ["目录", 0],
  ["封面", 1],
  ["目录",2],
  ["酒店",3],
  ["  亚朵酒店",4],
  ["  珀丽酒店",5],   
  ["  明阳酒店", 6],
  ["  艺嘉酒店", 7],
  ["  百合酒店", 8],  
  ["  乐酒店", 9],
  ["  香格里拉酒店",10 ],   
  ["  新新地酒店", 11],    
  ["  维也纳酒店", 12],    
  ["  7天连锁酒店", 13],
  ["  新贝酒店", 14],
  ["餐饮推荐", 15], 
  ["  汉阳馆，海底捞，点都德",16 ],  
  ["  慕湘，探鱼，鱼小妖", 17],    
  ["  酸渡酸菜鱼，龙发鸡煲，忆年四季椰子鸡锅",18 ],  
  ["  丹桂轩（新都店）粤菜，稻香迎喜皇宫",19],
  ["封底", 20],
];
     
$("#book1").wowBook({
  //container: true,
  //containerHeight: 1056,
  //containerWidth: 816*2,
    /**/
  height   : 920,
  width    : 816*2,
  hardcovers: true,
  toolbar: "lastLeft, left, currentPage, right, lastRight, find, toc, zoomin, zoomout, download, flipsound, fullscreen, thumbnails,share", 
  toolbarPosition: "bottom",
  perspective: 4000,
  responsiveHandleWidth: 50 ,
  displayToc: false,
  toc: tableOfContents,
  share: "twitter, facebook, reddit"
 
     
}); 
});
    </script>
</body>
</html>

display pdf:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

<!doctype html>
<html>
<head>
<meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="geovindu,Geovin Du, 涂聚文">
    <meta name="author" content="geovindu">
    <title>WowBook, a flipbook jQuery plugin Preview  pdf- create table of contents</title>
    <script>
        // Break out iframe on iOS cause safari expand iframe to fit the content, thus making
        // the lightbox bigger than the browser window.
        // We need to check for MSStream because Microsoft injected the word iPhone in IE11's userAgent therefore we need to exclude it.
        var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
        if (iOS && top.location!= self.location) {
            top.location = self.location.href;
        }
    </script>
    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
 
    <!-- Custom Fonts -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">
 
    <!-- Plugin CSS -->
    <link rel="stylesheet" href="css/animate.min.css" type="text/css">
 
    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/creative.css" type="text/css">
 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
 
<body id="page-top">
  <div id='book2-trigger' class="col-lg-4 col-md-6 text-center">
                    <div class="service-box">
                        <img class='book-thumb' src='./img/aesop_fables/aesops-fables-cover-thumb(1).jpg' />
                        <h3>PDF</h3>
                        <p class="text-muted">Wowbook rendering a pdf file, with table of contents, selectable text and search(experimental).</p>
                    </div>
</div>    
 <div style='display: none'>
<div id="book2"></div>          
</div>
<style>
        .hidden-FIXME{
            display: none;
        }
        #portfolio {
            display: none;
        }
        header { display: none; }
        #contact { display: none; }
        #about {
            display: none;
        }
 
        .navbar-header {
            width: 100% !important;
        }
        .navbar-brand {
            padding-right: 0;
            font-size: 14px !important;
        }
        #nav-buy-now {
            color: black;
            float: right;
            font-size: 14px;
            font-weight: 700;
            margin-right: -10px;
        }
        @media (min-width: 768px) {
            #nav-buy-now {
                margin-right: 0px;
            }
        }
        #bs-example-navbar-collapse-1 {
            display: none;
        }
 
        .wowbook {
            font-family: "Open Sans","Helvetica Neue",Arial,sans-serif;
        }
        .wowbook-page-content {
            padding: 1.5em;
        }
        .wowbook ul {
            padding-left: 1em;
        }
        .book-thumb {
            height: 150px;
            box-shadow: 0 0 3px rgba(0, 0, 0, 0.5)
        }
 
        #book1-trigger, #book2-trigger, #book3-trigger {
            cursor: pointer;
        }
        #book1-trigger:hover, #book2-trigger:hover, #book3-trigger:hover {
            background: #f8f8f8;
        }
 
        .wowbook-lightbox > .wowbook-close {
            background: transparent !important;
            border: none !important;
            color: #222 !important;
            font-size: 2.5em;
        }
        .wowbook-lightbox > .wowbook-close:hover {
            background: #444 !important;
            color: white !important;
            border-radius: 3px;
        }
 
 
        .lightbox-images1 .wowbook-book-container {
            background: #6d6b92; /* Old browsers */
            background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #6d6b92 100%); /* FF3.6-15 */
            background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#6d6b92 100%); /* Chrome10-25,Safari5.1-6 */
            background: radial-gradient(ellipse at center, #ffffff 0%,#6d6b92 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        }
        .lightbox-images1 > .wowbook-close,
        .lightbox-images2 > .wowbook-close {
            color: #ccc !important;
        }
        .lightbox-images2 .wowbook-book-container {
            background: #1E2831; /* Old browsers */
            background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #1E2831 100%); /* FF3.6-15 */
            background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#1E2831 100%); /* Chrome10-25,Safari5.1-6 */
            background: radial-gradient(ellipse at center, #ffffff 0%,#1E2831 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        }
 
 
 
        .lightbox-pdf  .wowbook-book-container {
            background: #e5e5e5 url(./img/bg-lightbox-pdf.png); /* Old browsers */
            background: #e5e5e5 -moz-radial-gradient(center, ellipse cover, #ffffff 20%, #bbbbbb 100%); /* FF3.6-15 */
            background: #e5e5e5 -webkit-radial-gradient(center, ellipse cover, #ffffff 20%,#bbbbbb 100%); /* Chrome10-25,Safari5.1-6 */
            background: #e5e5e5 radial-gradient(ellipse at center, #ffffff 20%,#bbbbbb 100%); /* W3C, IE10+, FF16+, Chrome26+,Opera12+, Safari7+*/
        }
 
 
        .lightbox-html  .wowbook-book-container {
            background: url(img/book_html/wood.jpg);
        }
        .lightbox-html .wowbook-toolbar {
            margin-top: 1em; /* FIXME */
            box-sizing: content-box !important;
        }
 
        .lightbox-html .wowbook-controls {
            border-radius: 6px;
            width: auto;
        }
 
        .lightbox-html.wowbook-mobile .wowbook-toolbar {
            margin: 0;
        }
 
        .lightbox-html.wowbook-mobile .wowbook-controls {
            border-radius: 0;
            width: 100%;
        }
 
 
/*      .lightbox-html .wowbook-controls {
            border-radius: 6px;
            width: auto;
            background: none;
            color: rgba(60, 20, 20, 0.8);
            text-shadow: 0 1px 0 #fff;
            box-shadow: none;
        }
        .lightbox-html .wowbook-control:hover {
            background: none;
            color: white;
            text-shadow: 0 1px 0 #fff, 0 0px 5px rgba(60, 20, 20, 1);
            text-shadow: 0 1px 0 #fff, 0 0px 3px #fff;
        }
*/
        hr {
            max-width: 450px;
        }
    </style>
 
    <!-- jQuery -->
    <script src="js/jquery.js"></script>
 
    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
 
    <!-- Plugin JavaScript -->
    <script src="js/jquery.easing.min.js"></script>
    <script src="js/jquery.fittext.js"></script>
    <script src="js/wow.min.js"></script>
 
    <!-- Custom Theme JavaScript -->
    <script src="js/creative.js"></script>
 
    <link rel="stylesheet" href="./wow_book/wow_book.css" type="text/css" />
    <style>
        .wowbook-right .wowbook-gutter-shadow {
            background-image: url("./img/page_right_background.png");
            background-position: 0 0;
            width: 75px;
        }
        .wowbook-left .wowbook-gutter-shadow {
            background-image: url("./img/page_left_background.png");
            opacity: 0.5;
            width: 60px;
        }
        .wowbook-control-currentPage {
            font-family: "Segoe UI",Helvetica,Arial,sans-serif;
        }
    </style>
    <script type="text/javascript" src="./wow_book/pdf.combined.min.js"></script>
    <script type="text/javascript" src="./wow_book/wow_book.min.js"></script>
     
     
<script type="text/javascript">
$(function(){   
     
                function fullscreenErrorHandler(){
                if (self!=top) return "The frame is blocking full screen mode. Click on 'remove frame' button above and try to go full screen again."
            }
     
     
    /*
    高度控制
$("#book2").wowBook({
 
   
               height   : 370
                ,width    : 725*2
                // ,maxWidth : 800
                // ,maxHeight : 400
                ,pageNumbers: false
                ,pdf: "2.pdf"
                ,pdfFind: true
                ,pdfTextSelectable: true    
                 
                ,lightboxClass : "lightbox-pdf"
                ,centeredWhenClosed : true
                ,hardcovers : true
                ,curl: false
                ,toolbar: "lastLeft, left, currentPage, right, lastRight, find, toc, zoomin, zoomout, download, flipsound, fullscreen, thumbnails"
                ,toolbarPosition : 'bottom'
                ,perspective: 4000
                ,responsiveHandleWidth : 50
                ,onFullscreenError: fullscreenErrorHandler
                ,responsiveHandleWidth: 50 
                 
            
});*/
           //显示目录   
            var tableOfContents = [
                ["Eiffel Tower", 0],
                ["Breakfast", 1],
                ["Snowy Day", 3],
                ["Mountains", 5],
            ];
     
var optionsBook2 = {
                 height   : 1024
                ,width    : 725*2
                // ,maxWidth : 800
                // ,maxHeight : 400
                ,pageNumbers: false
 
                ,pdf: "./img/aesop_fables/2.pdf"
                ,pdfFind: true
                ,pdfTextSelectable: true
                ,displayToc: false //是否加载时显示目录
                ,toc: tableOfContents
                ,lightbox : "#book2-trigger"
                ,lightboxClass : "lightbox-pdf"
                ,centeredWhenClosed : true
                ,hardcovers : true
                ,curl: false
                ,toolbar: "lastLeft, left, currentPage, right, lastRight, find, toc, zoomin, zoomout, download, flipsound, fullscreen, thumbnails"
                ,thumbnailsPosition : 'bottom'
                ,responsiveHandleWidth : 50
                ,onFullscreenError: fullscreenErrorHandler
  };
             
     
 var books = {
                
                "#book2" : optionsBook2,
                
            };
            $("#book2-trigger").on("click",function(){
                buildBook( "#"+this.id.replace("-trigger", "") );
            })
 
            function buildBook( elem ){
                var book=$.wowBook(elem);
                if (!book) {
                    $(elem).wowBook( books[elem] );
                    book=$.wowBook(elem);
                    console.log(book);
                }
                // book.opts.onHideLightbox = function(){
                //     setTimeout( function(){ book.destroy(); }, 1000);
                // }
                book.showLightbox();
            }
     
     
     
});
</script>
     
     
</body>
</html>

displays html:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

<!doctype html>
<html>
<head>
<meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="geovindu,Geovin Du, 涂聚文">
    <meta name="author" content="geovindu">
    <title>WowBook, a flipbook jQuery plugin Preview html- create table of contents</title>
     <script>
        // Break out iframe on iOS cause safari expand iframe to fit the content, thus making
        // the lightbox bigger than the browser window.
        // We need to check for MSStream because Microsoft injected the word iPhone in IE11's userAgent therefore we need to exclude it.
        var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
        if (iOS && top.location!= self.location) {
            top.location = self.location.href;
        }
    </script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  
 
<script type="text/javascript" src="./wow_book/pdf.combined.min.js"></script>
<link rel="stylesheet" href="./wow_book/wow_book.css" type="text/css" />
        <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <!-- Custom Fonts -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">
 
    <!-- Plugin CSS -->
    <link rel="stylesheet" href="css/animate.min.css" type="text/css">
 
    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/creative.css" type="text/css">
 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
     
</head>
 
<body>
 
        <div id='book3'>
            <div>
                <img src='img/book_html/cover.jpg' class='wowbook-lazy' />
            </div>
            <div>
                <h1>Easy to use</h1>
                <p>Wowbook requires a basic knowledge of html and javascript to be used,
                and comes several features to help you to create a book with minimum effort, like:</p>
                <ul>
                    <li>Toolbar, table of contents and thumbnails can be created automatically.</li>
                    <li>Automatic page numbering.</li>
                    <li>Responsive.</li>
                    <li>Ready to use examples (based on <a href='html5boilerplate.com'>html5 boilerplate</a> ).</li>
                </ul>
            </div>
            <div>
                <h1>PDF support</h1>
                <p>
                    Wowbook render pdf files using the library <a href="https://github.com/mozilla/pdf.js" target="_blank">PDF.js</a> from Mozilla.
                </p>
                <p>Wowbook pdf implementation supports:</p>
                <ul>
                    <li>external(html) links</li>
                    <li>table of contents</li>
                    <li>selectable text</li>
                    <li>experimental: pdf search</li>
                </ul>
                <p><b>Will wowbook render my pdf file?</b> To do a basic test open the pdf file with Firefox (PDF.js is the defaul PDF viewer on Firefox). If you want make sure you can send the file to be tested.
                </p>
                <p>PDF.js works in the following browsers: Firefox, Chrome, Opera, IE10+. Limited support for Safari, Android and IE9. Not supported on IE8. For more information <a href="https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#what-browsers-are-supported" target="_blank">click here</a>.</p>
            </div>
            <div>
                <h1>Responsive</h1>
                <p>Comes with built in features to resize the book to adapt for different screens dimensions.</p>
                <p>Touch support (with pinch to zoom and double click to zoom).</p>
                <p>Responsive toolbar adapts to the size of screen.</p>
                <p>If you need more control on how to resize the book, you can use the javascript API to change the book's size. </p>
            </div>
            <div>
                <h1>Right to Left</h1>
                <p>Wowbook can order the book pages from right to left if you need to use right-to-left script. </p>
                <br/>
                <h1>Lazy Loading</h1>
                <p>Wowbook can defer the loading of a page contents until the page is shown. This is especially useful in books that contains a lot of images.</p>
            </div>
            <div>
                <h1>Slide Show</h1>
                <p>Turn your book into a slide show, with configurable change slide interval.</p>
                <h1>Flash support</h1>
                <p>It's possible to use flash (like youtube videos) in your books, but the page that contains the flash object will be limited to the "basic flipping effect" (and ONLY that page).</p>
            </div>
            <div class='more bg-double-page'>
                <h1>And more</h1>
                <ul>
                    <li>Browser support : <img src='img/book_html/browser_logos-32.png' alt='browser logos'/></li>
                    <li>Keyboard navigation</li>
                    <li>Mouse wheel navigation / zoom</li>
                    <li>Play flipping sound</li>
                    <li>Documentation</li>
                    <li>Source code</li>
                    <li>Examples</li>
                    <li>Rich API</li>
                </ul>
            </div>
            <div>
                <img src='img/book_html/cover_last.jpg'  class='wowbook-lazy' />
            </div>
        </div>    
<style>
        .hidden-FIXME{
            display: none;
        }
        #portfolio {
            display: none;
        }
        header { display: none; }
        #contact { display: none; }
        #about {
            display: none;
        }
 
        .navbar-header {
            width: 100% !important;
        }
        .navbar-brand {
            padding-right: 0;
            font-size: 14px !important;
        }
        #nav-buy-now {
            color: black;
            float: right;
            font-size: 14px;
            font-weight: 700;
            margin-right: -10px;
        }
        @media (min-width: 768px) {
            #nav-buy-now {
                margin-right: 0px;
            }
        }
        #bs-example-navbar-collapse-1 {
            display: none;
        }
 
        .wowbook {
            font-family: "Open Sans","Helvetica Neue",Arial,sans-serif;
            margin-left: auto;
            margin-right: auto;
             
        }
        .wowbook-page-content {
            padding: 1.5em;
        }
        .wowbook ul {
            padding-left: 1em;
        }
        .book-thumb {
            height: 150px;
            box-shadow: 0 0 3px rgba(0, 0, 0, 0.5)
        }
 
        #book1-trigger, #book2-trigger, #book3-trigger {
            cursor: pointer;
        }
        #book1-trigger:hover, #book2-trigger:hover, #book3-trigger:hover {
            background: #f8f8f8;
        }
 
        .wowbook-lightbox > .wowbook-close {
            background: transparent !important;
            border: none !important;
            color: #222 !important;
            font-size: 2.5em;
        }
        .wowbook-lightbox > .wowbook-close:hover {
            background: #444 !important;
            color: white !important;
            border-radius: 3px;
        }
 
 
        .lightbox-images1 .wowbook-book-container {
            background: #6d6b92; /* Old browsers */
            background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #6d6b92 100%); /* FF3.6-15 */
            background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#6d6b92 100%); /* Chrome10-25,Safari5.1-6 */
            background: radial-gradient(ellipse at center, #ffffff 0%,#6d6b92 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        }
        .lightbox-images1 > .wowbook-close,
        .lightbox-images2 > .wowbook-close {
            color: #ccc !important;
        }
        .lightbox-images2 .wowbook-book-container {
            background: #1E2831; /* Old browsers */
            background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #1E2831 100%); /* FF3.6-15 */
            background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#1E2831 100%); /* Chrome10-25,Safari5.1-6 */
            background: radial-gradient(ellipse at center, #ffffff 0%,#1E2831 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        }
 
 
 
        .lightbox-pdf  .wowbook-book-container {
            background: #e5e5e5 url(./img/bg-lightbox-pdf.png); /* Old browsers */
            background: #e5e5e5 -moz-radial-gradient(center, ellipse cover, #ffffff 20%, #bbbbbb 100%); /* FF3.6-15 */
            background: #e5e5e5 -webkit-radial-gradient(center, ellipse cover, #ffffff 20%,#bbbbbb 100%); /* Chrome10-25,Safari5.1-6 */
            background: #e5e5e5 radial-gradient(ellipse at center, #ffffff 20%,#bbbbbb 100%); /* W3C, IE10+, FF16+, Chrome26+,Opera12+, Safari7+*/
        }
 
 
        .lightbox-html  .wowbook-book-container {
            background: url(img/book_html/wood.jpg);
        }
        .lightbox-html .wowbook-toolbar {
            margin-top: 1em; /* FIXME */
            box-sizing: content-box !important;
        }
 
        .lightbox-html .wowbook-controls {
            border-radius: 6px;
            width: auto;
        }
 
        .lightbox-html.wowbook-mobile .wowbook-toolbar {
            margin: 0;
        }
 
        .lightbox-html.wowbook-mobile .wowbook-controls {
            border-radius: 0;
            width: 100%;
        }
 
 
/*      .lightbox-html .wowbook-controls {
            border-radius: 6px;
            width: auto;
            background: none;
            color: rgba(60, 20, 20, 0.8);
            text-shadow: 0 1px 0 #fff;
            box-shadow: none;
        }
        .lightbox-html .wowbook-control:hover {
            background: none;
            color: white;
            text-shadow: 0 1px 0 #fff, 0 0px 5px rgba(60, 20, 20, 1);
            text-shadow: 0 1px 0 #fff, 0 0px 3px #fff;
        }
*/
        hr {
            max-width: 450px;
        }
    </style>  
     
     
<!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
 
    <!-- Plugin JavaScript -->
    <script src="js/jquery.easing.min.js"></script>
    <script src="js/jquery.fittext.js"></script>
    <script src="js/wow.min.js"></script>
    <!-- Custom Theme JavaScript -->
    <script src="js/creative.js"></script>
 
    <link rel="stylesheet" href="./wow_book/wow_book.css" type="text/css" />
    <style>
        .wowbook-right .wowbook-gutter-shadow {
            background-image: url("./img/page_right_background.png");
            background-position: 0 0;
            width: 75px;
        }
        .wowbook-left .wowbook-gutter-shadow {
            background-image: url("./img/page_left_background.png");
            opacity: 0.5;
            width: 60px;
        }
        .wowbook-control-currentPage {
            font-family: "Segoe UI",Helvetica,Arial,sans-serif;
        }
    </style>  
    <script src="./wow_book/wow_book.min.js"></script>
    <script type="text/javascript">   
$(function(){
     
                function fullscreenErrorHandler(){
                if (self!=top) return "The frame is blocking full screen mode. Click on 'remove frame' button above and try to go full screen again."
            }
     
var tableOfContents = [
  ["Eiffel Tower", 0],
  ["Breakfast", 3],
  ["Snowy Day", 5],
  ["Mountains", 7],
];
     
$("#book3").wowBook({
  //container: true,
  //containerHeight: 1056,
  //containerWidth: 816*2,
  height   : 856,
  width    : 725*2,
  hardcovers: true,
  toolbar: "lastLeft, left, currentPage, right, lastRight, find, toc, zoomin, zoomout, download, flipsound, fullscreen, thumbnails,share", 
  toolbarPosition: "bottom",
  perspective: 4000,
  responsiveHandleWidth: 50 ,
  displayToc: true,
  toc: tableOfContents,
  share: "twitter, facebook, reddit"
     
}); 
});
         
    </script>
       
</body>
</html>

from: 3D FlipBook - Sources format

https://previews.customer.envatousercontent.com/files/63124142/index.html

Newspaper FlipBook in jQuery (page-flip.info)Diamond

FlipBook in jQuery (page-flip.info)

BookShelf Responsive (page-flip.info)

https://code.tutsplus.com/tutorials/how-to-use-the-wowbook-jquery-flipbook-plugin--cms-32575 介绍设置目录

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

<!doctype html>
<html>
<head>
<meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="geovindu,Geovin Du, 涂聚文">
    <meta name="author" content="geovindu">
    <title>WowBook, a flipbook jQuery plugin Preview html- create table of contents</title>
     <script>
        // Break out iframe on iOS cause safari expand iframe to fit the content, thus making
        // the lightbox bigger than the browser window.
        // We need to check for MSStream because Microsoft injected the word iPhone in IE11's userAgent therefore we need to exclude it.
        var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
        if (iOS && top.location!= self.location) {
            top.location = self.location.href;
        }
    </script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  
 
<script type="text/javascript" src="./wow_book/pdf.combined.min.js"></script>
<link rel="stylesheet" href="./wow_book/wow_book.css" type="text/css" />
        <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <!-- Custom Fonts -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">
 
    <!-- Plugin CSS -->
    <link rel="stylesheet" href="css/animate.min.css" type="text/css">
 
    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/creative.css" type="text/css">
 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
     
</head>
 
<body>
<!--
0,1 为封面页
第3页为示示第一页开始
最后两页为底封页
--->
        <div id='book3'>
            <div>
                <img src='img/book_html/cover.jpg' class='wowbook-lazy' />
            </div>
            <div>
                <h1>Easy to use</h1>
                <p>Wowbook requires a basic knowledge of html and javascript to be used,
                and comes several features to help you to create a book with minimum effort, like:</p>
                <ul>
                    <li>Toolbar, table of contents and thumbnails can be created automatically.</li>
                    <li>Automatic page numbering.</li>
                    <li>Responsive.</li>
                    <li>目录</li>
                    <li>中国人.........................<a href="#book3/3">第1页</a></li>
                    <li>涂聚文.........................<a href="#book3/4">第2页</a></li>
                    <li>呀，啦嘞.......................<a href="#book3/5">第3页</a></li>
                    <li>扫贫...........................<a href="#book3/6">第4页</a></li>
                    <li>Ready to use examples (based on <a href='html5boilerplate.com'>html5 boilerplate</a> ).</li>
                </ul>
            </div>
            <div>
                <h1>PDF support</h1>
                <p>
                    Wowbook render pdf files using the library <a href="https://github.com/mozilla/pdf.js" target="_blank">PDF.js</a> from Mozilla.
                </p>
                <p>Wowbook pdf implementation supports:</p>
                <ul>
                    <li>external(html) links</li>
                    <li>table of contents</li>
                    <li>selectable text</li>
                    <li>experimental: pdf search</li>
                </ul>
                <p><b>Will wowbook render my pdf file?</b> To do a basic test open the pdf file with Firefox (PDF.js is the defaul PDF viewer on Firefox). If you want make sure you can send the file to be tested.
                </p>
                <p>PDF.js works in the following browsers: Firefox, Chrome, Opera, IE10+. Limited support for Safari, Android and IE9. Not supported on IE8. For more information <a href="https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#what-browsers-are-supported" target="_blank">click here</a>.</p>
                <p><a href="#book3/2">返回目录</a></p>
            </div>
            <div>
                <h1>Responsive</h1>
                <p>Comes with built in features to resize the book to adapt for different screens dimensions.</p>
                <p>Touch support (with pinch to zoom and double click to zoom).</p>
                <p>Responsive toolbar adapts to the size of screen.</p>
                <p>If you need more control on how to resize the book, you can use the javascript API to change the book's size. </p>
                <p><a href="#book3/2">返回目录</a></p>
            </div>
            <div>
                <h1>Right to Left</h1>
                <p>Wowbook can order the book pages from right to left if you need to use right-to-left script. </p>
                <br/>
                <h1>Lazy Loading</h1>
                <p>Wowbook can defer the loading of a page contents until the page is shown. This is especially useful in books that contains a lot of images.</p>
                <p><a href="#book3/2">返回目录</a></p>
            </div>
            <div>
                <h1>Slide Show</h1>
                <p>Turn your book into a slide show, with configurable change slide interval.</p>
                <h1>Flash support</h1>
                <p>It's possible to use flash (like youtube videos) in your books, but the page that contains the flash object will be limited to the "basic flipping effect" (and ONLY that page).</p>
                <p><a href="#book3/2">返回目录</a></p>
            </div>
            <div class='more bg-double-page'>
                <h1>And more</h1>
                <ul>
                    <li>Browser support : <img src='img/book_html/browser_logos-32.png' alt='browser logos'/></li>
                    <li>Keyboard navigation</li>
                    <li>Mouse wheel navigation / zoom</li>
                    <li>Play flipping sound</li>
                    <li>Documentation</li>
                    <li>Source code</li>
                    <li>Examples</li>
                    <li>Rich API</li>
                </ul>
            </div>
            <div>
                <img src='img/book_html/cover_last.jpg'  class='wowbook-lazy' />
            </div>
        </div>    
<style>
        .hidden-FIXME{
            display: none;
        }
        #portfolio {
            display: none;
        }
        header { display: none; }
        #contact { display: none; }
        #about {
            display: none;
        }
 
        .navbar-header {
            width: 100% !important;
        }
        .navbar-brand {
            padding-right: 0;
            font-size: 14px !important;
        }
        #nav-buy-now {
            color: black;
            float: right;
            font-size: 14px;
            font-weight: 700;
            margin-right: -10px;
        }
        @media (min-width: 768px) {
            #nav-buy-now {
                margin-right: 0px;
            }
        }
        #bs-example-navbar-collapse-1 {
            display: none;
        }
 
        .wowbook {
            font-family: "Open Sans","Helvetica Neue",Arial,sans-serif;
            margin-left: auto;
            margin-right: auto;
             
        }
        .wowbook-page-content {
            padding: 1.5em;
        }
        .wowbook ul {
            padding-left: 1em;
        }
        .book-thumb {
            height: 150px;
            box-shadow: 0 0 3px rgba(0, 0, 0, 0.5)
        }
 
        #book1-trigger, #book2-trigger, #book3-trigger {
            cursor: pointer;
        }
        #book1-trigger:hover, #book2-trigger:hover, #book3-trigger:hover {
            background: #f8f8f8;
        }
 
        .wowbook-lightbox > .wowbook-close {
            background: transparent !important;
            border: none !important;
            color: #222 !important;
            font-size: 2.5em;
        }
        .wowbook-lightbox > .wowbook-close:hover {
            background: #444 !important;
            color: white !important;
            border-radius: 3px;
        }
 
 
        .lightbox-images1 .wowbook-book-container {
            background: #6d6b92; /* Old browsers */
            background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #6d6b92 100%); /* FF3.6-15 */
            background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#6d6b92 100%); /* Chrome10-25,Safari5.1-6 */
            background: radial-gradient(ellipse at center, #ffffff 0%,#6d6b92 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        }
        .lightbox-images1 > .wowbook-close,
        .lightbox-images2 > .wowbook-close {
            color: #ccc !important;
        }
        .lightbox-images2 .wowbook-book-container {
            background: #1E2831; /* Old browsers */
            background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #1E2831 100%); /* FF3.6-15 */
            background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#1E2831 100%); /* Chrome10-25,Safari5.1-6 */
            background: radial-gradient(ellipse at center, #ffffff 0%,#1E2831 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        }
 
 
 
        .lightbox-pdf  .wowbook-book-container {
            background: #e5e5e5 url(./img/bg-lightbox-pdf.png); /* Old browsers */
            background: #e5e5e5 -moz-radial-gradient(center, ellipse cover, #ffffff 20%, #bbbbbb 100%); /* FF3.6-15 */
            background: #e5e5e5 -webkit-radial-gradient(center, ellipse cover, #ffffff 20%,#bbbbbb 100%); /* Chrome10-25,Safari5.1-6 */
            background: #e5e5e5 radial-gradient(ellipse at center, #ffffff 20%,#bbbbbb 100%); /* W3C, IE10+, FF16+, Chrome26+,Opera12+, Safari7+*/
        }
 
 
        .lightbox-html  .wowbook-book-container {
            background: url(img/book_html/wood.jpg);
        }
        .lightbox-html .wowbook-toolbar {
            margin-top: 1em; /* FIXME */
            box-sizing: content-box !important;
        }
 
        .lightbox-html .wowbook-controls {
            border-radius: 6px;
            width: auto;
        }
 
        .lightbox-html.wowbook-mobile .wowbook-toolbar {
            margin: 0;
        }
 
        .lightbox-html.wowbook-mobile .wowbook-controls {
            border-radius: 0;
            width: 100%;
        }
 
 
/*      .lightbox-html .wowbook-controls {
            border-radius: 6px;
            width: auto;
            background: none;
            color: rgba(60, 20, 20, 0.8);
            text-shadow: 0 1px 0 #fff;
            box-shadow: none;
        }
        .lightbox-html .wowbook-control:hover {
            background: none;
            color: white;
            text-shadow: 0 1px 0 #fff, 0 0px 5px rgba(60, 20, 20, 1);
            text-shadow: 0 1px 0 #fff, 0 0px 3px #fff;
        }
*/
        hr {
            max-width: 450px;
        }
    </style>  
     
     
<!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
 
    <!-- Plugin JavaScript -->
    <script src="js/jquery.easing.min.js"></script>
    <script src="js/jquery.fittext.js"></script>
    <script src="js/wow.min.js"></script>
    <!-- Custom Theme JavaScript -->
    <script src="js/creative.js"></script>
 
    <link rel="stylesheet" href="./wow_book/wow_book.css" type="text/css" />
    <style>
        .wowbook-right .wowbook-gutter-shadow {
            background-image: url("./img/page_right_background.png");
            background-position: 0 0;
            width: 75px;
        }
        .wowbook-left .wowbook-gutter-shadow {
            background-image: url("./img/page_left_background.png");
            opacity: 0.5;
            width: 60px;
        }
        .wowbook-control-currentPage {
            font-family: "Segoe UI",Helvetica,Arial,sans-serif;
        }
    </style>  
    <script src="./wow_book/wow_book.min.js"></script>
    <script type="text/javascript">   
$(function(){
     
                function fullscreenErrorHandler(){
                if (self!=top) return "The frame is blocking full screen mode. Click on 'remove frame' button above and try to go full screen again."
            }
     
var tableOfContents = [
  ["Eiffel Tower", 0],
  ["Breakfast", 3],
  ["Snowy Day", 5],
  ["Mountains", 7],
];
     
$("#book3").wowBook({
  //container: true,
  //containerHeight: 1056,
  //containerWidth: 816*2,
  height   : 856,
  width    : 725*2,
  hardcovers: true,
  toolbar: "lastLeft, left, currentPage, right, lastRight, find, toc, zoomin, zoomout, download, flipsound, fullscreen, thumbnails,share", 
  toolbarPosition: "bottom",
  perspective: 4000,
  responsiveHandleWidth: 50 ,
  displayToc: true,
  toc: tableOfContents,
  share: "twitter, facebook, reddit"
     
}); 
});
         
    </script>
       
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

<!doctype html>
<html>
<head>
<meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="geovindu,Geovin Du, 涂聚文">
    <meta name="author" content="geovindu">
    <title>WowBook, a flipbook jQuery plugin Preview  pdf- create table of contents</title>
    <script>
        // Break out iframe on iOS cause safari expand iframe to fit the content, thus making
        // the lightbox bigger than the browser window.
        // We need to check for MSStream because Microsoft injected the word iPhone in IE11's userAgent therefore we need to exclude it.
        var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
        if (iOS && top.location!= self.location) {
            top.location = self.location.href;
        }
    </script>
    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
 
    <!-- Custom Fonts -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">
 
    <!-- Plugin CSS -->
    <link rel="stylesheet" href="css/animate.min.css" type="text/css">
 
    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/creative.css" type="text/css">
 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
 
<body id="page-top">
  <div id='book2-trigger' class="col-lg-4 col-md-6 text-center">
                    <div class="service-box">
                        <img class='book-thumb' src='./img/aesop_fables/aesops-fables-cover-thumb(1).jpg' />
                        <h3>PDF</h3>
                        <p class="text-muted">Wowbook rendering a pdf file, with table of contents, selectable text and search(experimental).</p>
                    </div>
</div>    
 <div style='display: none'>
<div id="book2"></div>          
</div>
<style>
        .hidden-FIXME{
            display: none;
        }
        #portfolio {
            display: none;
        }
        header { display: none; }
        #contact { display: none; }
        #about {
            display: none;
        }
 
        .navbar-header {
            width: 100% !important;
        }
        .navbar-brand {
            padding-right: 0;
            font-size: 14px !important;
        }
        #nav-buy-now {
            color: black;
            float: right;
            font-size: 14px;
            font-weight: 700;
            margin-right: -10px;
        }
        @media (min-width: 768px) {
            #nav-buy-now {
                margin-right: 0px;
            }
        }
        #bs-example-navbar-collapse-1 {
            display: none;
        }
 
        .wowbook {
            font-family: "Open Sans","Helvetica Neue",Arial,sans-serif;
        }
        .wowbook-page-content {
            padding: 1.5em;
        }
        .wowbook ul {
            padding-left: 1em;
        }
        .book-thumb {
            height: 150px;
            box-shadow: 0 0 3px rgba(0, 0, 0, 0.5)
        }
 
        #book1-trigger, #book2-trigger, #book3-trigger {
            cursor: pointer;
        }
        #book1-trigger:hover, #book2-trigger:hover, #book3-trigger:hover {
            background: #f8f8f8;
        }
 
        .wowbook-lightbox > .wowbook-close {
            background: transparent !important;
            border: none !important;
            color: #222 !important;
            font-size: 2.5em;
        }
        .wowbook-lightbox > .wowbook-close:hover {
            background: #444 !important;
            color: white !important;
            border-radius: 3px;
        }
 
 
        .lightbox-images1 .wowbook-book-container {
            background: #6d6b92; /* Old browsers */
            background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #6d6b92 100%); /* FF3.6-15 */
            background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#6d6b92 100%); /* Chrome10-25,Safari5.1-6 */
            background: radial-gradient(ellipse at center, #ffffff 0%,#6d6b92 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        }
        .lightbox-images1 > .wowbook-close,
        .lightbox-images2 > .wowbook-close {
            color: #ccc !important;
        }
        .lightbox-images2 .wowbook-book-container {
            background: #1E2831; /* Old browsers */
            background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #1E2831 100%); /* FF3.6-15 */
            background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#1E2831 100%); /* Chrome10-25,Safari5.1-6 */
            background: radial-gradient(ellipse at center, #ffffff 0%,#1E2831 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        }
 
 
 
        .lightbox-pdf  .wowbook-book-container {
            background: #e5e5e5 url(./img/bg-lightbox-pdf.png); /* Old browsers */
            background: #e5e5e5 -moz-radial-gradient(center, ellipse cover, #ffffff 20%, #bbbbbb 100%); /* FF3.6-15 */
            background: #e5e5e5 -webkit-radial-gradient(center, ellipse cover, #ffffff 20%,#bbbbbb 100%); /* Chrome10-25,Safari5.1-6 */
            background: #e5e5e5 radial-gradient(ellipse at center, #ffffff 20%,#bbbbbb 100%); /* W3C, IE10+, FF16+, Chrome26+,Opera12+, Safari7+*/
        }
 
 
        .lightbox-html  .wowbook-book-container {
            background: url(img/book_html/wood.jpg);
        }
        .lightbox-html .wowbook-toolbar {
            margin-top: 1em; /* FIXME */
            box-sizing: content-box !important;
        }
 
        .lightbox-html .wowbook-controls {
            border-radius: 6px;
            width: auto;
        }
 
        .lightbox-html.wowbook-mobile .wowbook-toolbar {
            margin: 0;
        }
 
        .lightbox-html.wowbook-mobile .wowbook-controls {
            border-radius: 0;
            width: 100%;
        }
 
 
/*      .lightbox-html .wowbook-controls {
            border-radius: 6px;
            width: auto;
            background: none;
            color: rgba(60, 20, 20, 0.8);
            text-shadow: 0 1px 0 #fff;
            box-shadow: none;
        }
        .lightbox-html .wowbook-control:hover {
            background: none;
            color: white;
            text-shadow: 0 1px 0 #fff, 0 0px 5px rgba(60, 20, 20, 1);
            text-shadow: 0 1px 0 #fff, 0 0px 3px #fff;
        }
*/
        hr {
            max-width: 450px;
        }
    </style>
 
    <!-- jQuery -->
    <script src="js/jquery.js"></script>
 
    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
 
    <!-- Plugin JavaScript -->
    <script src="js/jquery.easing.min.js"></script>
    <script src="js/jquery.fittext.js"></script>
    <script src="js/wow.min.js"></script>
 
    <!-- Custom Theme JavaScript -->
    <script src="js/creative.js"></script>
 
    <link rel="stylesheet" href="./wow_book/wow_book.css" type="text/css" />
    <style>
        .wowbook-right .wowbook-gutter-shadow {
            background-image: url("./img/page_right_background.png");
            background-position: 0 0;
            width: 75px;
        }
        .wowbook-left .wowbook-gutter-shadow {
            background-image: url("./img/page_left_background.png");
            opacity: 0.5;
            width: 60px;
        }
        .wowbook-control-currentPage {
            font-family: "Segoe UI",Helvetica,Arial,sans-serif;
        }
    </style>
    <script type="text/javascript" src="./wow_book/pdf.combined.min.js"></script>
    <script type="text/javascript" src="./wow_book/wow_book.min.js"></script>
     
     
<script type="text/javascript">
$(function(){   
     
                function fullscreenErrorHandler(){
                if (self!=top) return "The frame is blocking full screen mode. Click on 'remove frame' button above and try to go full screen again."
            }
     
     
    /*
    高度控制
$("#book2").wowBook({
 
   
               height   : 370
                ,width    : 725*2
                // ,maxWidth : 800
                // ,maxHeight : 400
                ,pageNumbers: false
                ,pdf: "2.pdf"
                ,pdfFind: true
                ,pdfTextSelectable: true    
                 
                ,lightboxClass : "lightbox-pdf"
                ,centeredWhenClosed : true
                ,hardcovers : true
                ,curl: false
                ,toolbar: "lastLeft, left, currentPage, right, lastRight, find, toc, zoomin, zoomout, download, flipsound, fullscreen, thumbnails"
                ,toolbarPosition : 'bottom'
                ,perspective: 4000
                ,responsiveHandleWidth : 50
                ,onFullscreenError: fullscreenErrorHandler
                ,responsiveHandleWidth: 50 
                 
            
});*/
           //显示目录   
            var tableOfContents = [
                ["Eiffel Tower", 0],
                ["Breakfast", 1],
                ["Snowy Day", 3],
                ["Mountains", 5],
            ];
     
var optionsBook2 = {
                 height   : 1024
                ,width    : 725*2
                // ,maxWidth : 800
                // ,maxHeight : 400
                ,pageNumbers: false
 
                ,pdf: "./img/aesop_fables/2.pdf"
                ,pdfFind: true
                ,pdfTextSelectable: true
                ,displayToc: false //是否加载时显示目录
                ,toc: tableOfContents
                ,lightbox : "#book2-trigger"
                ,lightboxClass : "lightbox-pdf"
                ,centeredWhenClosed : true
                ,hardcovers : true
                ,curl: false
                ,toolbar: "lastLeft, left, currentPage, right, lastRight, find, toc, zoomin, zoomout, download, flipsound, fullscreen, thumbnails"
                ,thumbnailsPosition : 'bottom'
                ,responsiveHandleWidth : 50
                ,onFullscreenError: fullscreenErrorHandler
  };
             
     
 var books = {
                
                "#book2" : optionsBook2,
                
            };
            $("#book2-trigger").on("click",function(){
                buildBook( "#"+this.id.replace("-trigger", "") );
            })
 
            function buildBook( elem ){
                var book=$.wowBook(elem);
                if (!book) {
                    $(elem).wowBook( books[elem] );
                    book=$.wowBook(elem);
                    console.log(book);
                }
                // book.opts.onHideLightbox = function(){
                //     setTimeout( function(){ book.destroy(); }, 1000);
                // }
                book.showLightbox();
            }
     
     
     
});
</script>
     
     
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

<!doctype html>
<html>
<head>
<meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="geovindu,Geovin Du, 涂聚文">
    <meta name="author" content="geovindu">
    <title>WowBook, a flipbook jQuery plugin Preview images- create table of contents</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  
 
<script type="text/javascript" src="./wow_book/pdf.combined.min.js"></script>
<link rel="stylesheet" href="./wow_book/wow_book.css" type="text/css" />
        <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <!-- Custom Fonts -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">
 
    <!-- Plugin CSS -->
    <link rel="stylesheet" href="css/animate.min.css" type="text/css">
 
    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/creative.css" type="text/css">
 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
 
     
</head>
 
<body id="page-top">
 
 
     
     
<div id="book1">
      
  <div>
    <img class="book-thumb" src="img/lukfook/index.jpg" alt=""/>
  </div>
 <div>
    <h1>目录</h1>
       <ul>
                    <li>目录</li>
                    <li>酒店推荐.........................<a href="#book1/3">第1页</a>
                    <ul>
                        <li>涂聚文.........................<a href="#book1/4">第2页</a></li>
                        <li>呀，啦嘞.......................<a href="#book1/5">第3页</a></li>
                        <li>扫贫...........................<a href="#book1/6">第4页</a></li>
                    </ul>
                    </li>
                    <li>餐饮推荐...........................<a href="#book1/14">第12页</a></li>
 
     </ul>
 
    </div>
  <div>
    <img class="book-thumb" src="img/lukfook/02.png" alt=""/>
  </div>
  
  <div>
    <img class="book-thumb" src="img/lukfook/03.jpg" alt=""/>
  </div>
  
  <div>
    <img class="book-thumb" src="img/lukfook/04.jpg" alt=""/>
  </div>
      <div>
    <img class="book-thumb" src="img/lukfook/05.jpg" alt=""/>
  </div>
      <div>
    <img class="book-thumb" src="img/lukfook/06.jpg" alt=""/>
  </div>
      <div>
    <img class="book-thumb" src="img/lukfook/07.jpg" alt=""/>
  </div>
      <div>
    <img class="book-thumb" src="img/lukfook/08.png" alt=""/>
  </div>
 
    <div>
    <img class="book-thumb" src="img/lukfook/09.jpg" alt=""/>
  </div>  
 
    <div>
    <img class="book-thumb" src="img/lukfook/10.jpg" alt=""/>
  </div>
  <div>
    <img class="book-thumb" src="img/lukfook/11.jpg" alt=""/>
  </div>
  
  <div>
    <img class="book-thumb" src="img/lukfook/12.jpg" alt=""/>
  </div>
  
  <div>
    <img class="book-thumb" src="img/lukfook/13.jpg" alt=""/>
  </div>
  
  <div>
    <img class="book-thumb" src="img/lukfook/14.jpg" alt=""/>
  </div>
      <div>
    <img class="book-thumb" src="img/lukfook/15.jpg" alt=""/>
  </div>
      <div>
    <img class="book-thumb" src="img/lukfook/16.jpg" alt=""/>
  </div>
      <div>
    <img class="book-thumb" src="img/lukfook/17.jpg" alt=""/>
  </div>
      <div>
    <img class="book-thumb" src="img/lukfook/18.jpg" alt=""/>
  </div>
  
    <div>
    <img class="book-thumb" src="img/lukfook/19.jpg" alt=""/>
  </div>  
       
 <div>
    <img class="book-thumb" src="img/lukfook/20.jpg" alt=""/>
  </div>  
     
</div>
     
<style>
    .book-thumb{
         
        width:100%;
        height: 100%;
    }
        .hidden-FIXME{
            display: none;
        }
        #portfolio {
            display: none;
        }
        header { display: none; }
        #contact { display: none; }
        #about {
            display: none;
        }
 
        .navbar-header {
            width: 100% !important;
        }
        .navbar-brand {
            padding-right: 0;
            font-size: 14px !important;
        }
        #nav-buy-now {
            color: black;
            float: right;
            font-size: 14px;
            font-weight: 700;
            margin-right: -10px;
        }
        @media (min-width: 768px) {
            #nav-buy-now {
                margin-right: 0px;
            }
        }
        #bs-example-navbar-collapse-1 {
            display: none;
        }
 
        .wowbook {
            font-family: "Open Sans","Helvetica Neue",Arial,sans-serif;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }
        .wowbook-page-content {
            padding: 1.5em;
        }
        .wowbook ul {
            padding-left: 1em;
        }
        .book-thumb {
            /*height: 150px;*/
            box-shadow: 0 0 3px rgba(0, 0, 0, 0.5)
        }
 
        #book1-trigger, #book2-trigger, #book3-trigger {
            cursor: pointer;
        }
        #book1-trigger:hover, #book2-trigger:hover, #book3-trigger:hover {
            background: #f8f8f8;
        }
 
        .wowbook-lightbox > .wowbook-close {
            background: transparent !important;
            border: none !important;
            color: #222 !important;
            font-size: 2.5em;
        }
        .wowbook-lightbox > .wowbook-close:hover {
            background: #444 !important;
            color: white !important;
            border-radius: 3px;
        }
 
 
        .lightbox-images1 .wowbook-book-container {
            background: #6d6b92; /* Old browsers */
            background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #6d6b92 100%); /* FF3.6-15 */
            background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#6d6b92 100%); /* Chrome10-25,Safari5.1-6 */
            background: radial-gradient(ellipse at center, #ffffff 0%,#6d6b92 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        }
        .lightbox-images1 > .wowbook-close,
        .lightbox-images2 > .wowbook-close {
            color: #ccc !important;
        }
        .lightbox-images2 .wowbook-book-container {
            background: #1E2831; /* Old browsers */
            background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #1E2831 100%); /* FF3.6-15 */
            background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#1E2831 100%); /* Chrome10-25,Safari5.1-6 */
            background: radial-gradient(ellipse at center, #ffffff 0%,#1E2831 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        }
 
 
 
        .lightbox-pdf  .wowbook-book-container {
            background: #e5e5e5 url(./img/bg-lightbox-pdf.png); /* Old browsers */
            background: #e5e5e5 -moz-radial-gradient(center, ellipse cover, #ffffff 20%, #bbbbbb 100%); /* FF3.6-15 */
            background: #e5e5e5 -webkit-radial-gradient(center, ellipse cover, #ffffff 20%,#bbbbbb 100%); /* Chrome10-25,Safari5.1-6 */
            background: #e5e5e5 radial-gradient(ellipse at center, #ffffff 20%,#bbbbbb 100%); /* W3C, IE10+, FF16+, Chrome26+,Opera12+, Safari7+*/
        }
 
 
        .lightbox-html  .wowbook-book-container {
            background: url(img/book_html/wood.jpg);
        }
        .lightbox-html .wowbook-toolbar {
            margin-top: 1em; /* FIXME */
            box-sizing: content-box !important;
        }
 
        .lightbox-html .wowbook-controls {
            border-radius: 6px;
            width: auto;
        }
 
        .lightbox-html.wowbook-mobile .wowbook-toolbar {
            margin: 0;
        }
 
        .lightbox-html.wowbook-mobile .wowbook-controls {
            border-radius: 0;
            width: 100%;
        }
 
 
/*      .lightbox-html .wowbook-controls {
            border-radius: 6px;
            width: auto;
            background: none;
            color: rgba(60, 20, 20, 0.8);
            text-shadow: 0 1px 0 #fff;
            box-shadow: none;
        }
        .lightbox-html .wowbook-control:hover {
            background: none;
            color: white;
            text-shadow: 0 1px 0 #fff, 0 0px 5px rgba(60, 20, 20, 1);
            text-shadow: 0 1px 0 #fff, 0 0px 3px #fff;
        }
*/
        hr {
            max-width: 450px;
        }
    </style>  
     
     
    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
 
    <!-- Plugin JavaScript -->
    <script src="js/jquery.easing.min.js"></script>
    <script src="js/jquery.fittext.js"></script>
    <script src="js/wow.min.js"></script>
    <!-- Custom Theme JavaScript -->
    <script src="js/creative.js"></script>
 
    <link rel="stylesheet" href="./wow_book/wow_book.css" type="text/css" />
    <style>
        .wowbook-right .wowbook-gutter-shadow {
            background-image: url("./img/page_right_background.png");
            background-position: 0 0;
            width: 75px;
        }
        .wowbook-left .wowbook-gutter-shadow {
            background-image: url("./img/page_left_background.png");
            opacity: 0.5;
            width: 60px;
        }
        .wowbook-control-currentPage {
            font-family: "Segoe UI",Helvetica,Arial,sans-serif;
        }
    </style>  
     
<script src="./wow_book/wow_book.min.js"></script>  
<script type="text/javascript">   
$(function(){   
     
                function fullscreenErrorHandler(){
                if (self!=top) return "The frame is blocking full screen mode. Click on 'remove frame' button above and try to go full screen again."
            }
//children: 如何设置字节点目录
var tableOfContents = [
  ["封面", 0],
  ["目录",1],
  ["酒店",2],
  ["  亚朵酒店",3],
  ["  珀丽酒店",4],   
  ["  明阳酒店", 5],
  ["  艺嘉酒店", 6],
  ["  百合酒店", 7],  
  ["  乐酒店", 8],
  ["  香格里拉酒店", 9],    
  ["  新新地酒店", 10],    
  ["  维也纳酒店", 11],    
  ["  7天连锁酒店", 12],   
  ["餐饮推荐", 13], 
  ["  汉阳馆，海底捞，点都德", 14],  
  ["  ", 15], 
  ["  ", 16], 
  ["  ", 17],
  ["  ", 18],
  ["封底", 19],
];
     
$("#book1").wowBook({
  //container: true,
  //containerHeight: 1056,
  //containerWidth: 816*2,
    /**/
  height   : 920,
  width    : 816*2,
  hardcovers: true,
  toolbar: "lastLeft, left, currentPage, right, lastRight, find, toc, zoomin, zoomout, download, flipsound, fullscreen, thumbnails,share", 
  toolbarPosition: "bottom",
  perspective: 4000,
  responsiveHandleWidth: 50 ,
  displayToc: false,
  toc: tableOfContents,
  share: "twitter, facebook, reddit"
 
     
}); 
});
    </script>
</body>
</html>

　https://docs.microsoft.com/en-us/previous-versions/dotnet/articles/aa478959(v=msdn.10)?redirectedfrom=MSDN

https://www.codeproject.com/articles/23949/building-trees-from-lists-in-net

https://www.c-sharpcorner.com/article/create-jstree-simply/

https://gijgo.com/tree/demos/bootstrap-treeview

https://asp.net.bigresource.com/c-Generate-table-of-content-using-itextsharp--klZPlsSN9.html

https://stackoverflow.com/questions/39037594/how-to-create-table-of-contents-in-itextsharp

https://stackoverflow.com/questions/187619/is-there-a-javascript-solution-to-generating-a-table-of-contents-for-a-page

https://github.com/leisn/MarkdigToc

https://webdevtrick.com/dynamic-table-of-contents/

https://webdevtrick.com/demos/table-of-contents/

<!doctype html>
<html>
<head runat="server">
<meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="geovindu,Geovin Du, 涂聚文">
    <meta name="author" content="geovindu">
    <title>深圳展廳『消費指南』小冊子</title>
 <script type="text/javascript">
        // Break out iframe on iOS cause safari expand iframe to fit the content, thus making
        // the lightbox bigger than the browser window.
        // We need to check for MSStream because Microsoft injected the word iPhone in IE11's userAgent therefore we need to exclude it.
        var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
        if (iOS && top.location!= self.location) {
            top.location = self.location.href;
        }
    </script>
    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <!-- jQuery -->
    <script type="text/javascript" src="js/jquery-3.6.0.js"></script>
    <!-- Custom Fonts -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">
 
    <!-- Plugin CSS -->
    <link rel="stylesheet" href="css/animate.min.css" type="text/css">
 
    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/creative.css" type="text/css">
 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
 
</head>
 
<body id="page-top">
    <!-- Bootstrap Core JavaScript -->
    <script  type="text/javascript" src="js/bootstrap.min.js"></script>
     
    <form id="form1" runat="server">
    <div runat="server" id="geovindu">   
    </div>
  <div id="book1">  
    <asp:Repeater ID="rptList" runat="server">
  <HeaderTemplate>
  </HeaderTemplate>
  <ItemTemplate>
 
        <%#Eval("LetImage")%> 
   
  </ItemTemplate>
  <FooterTemplate>
    <%#rptList.Items.Count == 0 ? "<div align=\"center\" colspan=\"4\">暫無記錄</div>" : ""%>
  
  </FooterTemplate>
  </asp:Repeater>
 </div> 
     
    </form>
   <link rel="stylesheet" href="./css/bookthumb.css" type="text/css" /> 
    <!-- Plugin JavaScript -->
    <script type="text/javascript" src="js/jquery.easing.min.js"></script>
    <script type="text/javascript" src="js/jquery.fittext.js"></script>
    <script type="text/javascript" src="js/wow.min.js"></script>
    <!-- Custom Theme JavaScript -->
    <script type="text/javascript" src="js/creative.js"></script>
 
    <link rel="stylesheet" href="./lib/wow_book.css" type="text/css" />
    <link rel="stylesheet" href="./css/book.css" type="text/css" />
     
     
<script type="text/javascript" src="./lib/wow_book.min.js"></script>    
<script type="text/javascript" src="./js/bookimg.js"/></script> 
     
</body>
</html>

posted @ 2021-09-14 10:46 ®Geovin Du Dream Park™ 阅读(1014) 评论(0) 编辑收藏举报

®Geovin Du Dream Park™

why we only heard about haves and have-nots, but we did'nt heard about doers and doer-nots. 人生是一种心境,生活是一种艺术,成功是一种心态,幸福是一种感觉,竞争是一种建构,情感是一种容合.学习是一种成长.

WowBook, a flipbook jQuery plugin Preview images,pdf, html

公告

搜索

常用链接

我的标签

积分与排名

随笔分类

随笔档案

文章分类

相册

捷为工作室

阅读排行榜

评论排行榜

推荐排行榜

最新评论