/index.php
PHP | 406 lines | 358 code | 48 blank | 0 comment | 16 complexity | fa44994910c2d2189369914c7b711c45 MD5 | raw file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
- <title>Gareth Fuller | Gallery example</title>
-
- <!--[if lt IE 9]>
- <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
- <![endif]-->
- <!--
- Hey,
- Thanks for having a peek at the source, I think you will find everything in order :)
- -->
-
- <!-- META -->
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <meta name="description" content="Gareth Fuller, Gallery example page" />
- <meta name="author" content="Gareth Fuller" />
-
- <link rel="author" type="text/plain" href="/humans.txt" />
- <!-- CSS -->
- <link rel="stylesheet" href="assets/css/reset.css" media="screen" type="text/css" />
- <link rel="stylesheet" href="assets/css/style.css" media="screen" type="text/css" />
- <!--<link rel="stylesheet" href="assets/css/print.css" media="print"/>-->
-
- </head>
- <body>
- <div id="content">
- <header>
- <h1>Gareth Gallery</h1>
- <p>Below are some examples of usage for the superb garethGallery, feel free to view source, copy and paste! Much love.</p>
- </header>
-
- <section>
- <header>
- <h2>Simple</h2>
- </header>
- <div id="gallery" class="gallery-example">
- <ul id="gallery-inner">
- <li><img src="assets/img/slide-one.gif" /></li>
- <li><img src="assets/img/slide-two.gif" /></li>
- <li><img src="assets/img/slide-three.gif" /></li>
- <li><img src="assets/img/slide-four.gif" /></li>
- <li><img src="assets/img/slide-five.gif" /></li>
- </ul>
- <!-- next and previous buttons -->
- <a href="#" rel="prev" id="previous-button" class="gallery-buttons previous" title="Previous"></a>
- <a href="#" rel="next" id="next-button" title="Next" class="gallery-buttons next"></a>
- </div>
- </section>
-
-
- <section>
- <header>
- <h2>Thumbnails</h2>
- </header>
- <div id="gallery-thumbs" class="gallery-example">
- <ul id="gallery-thumbs-inner">
- <li><img src="assets/img/slide-one.gif" /></li>
- <li><img src="assets/img/slide-two.gif" /></li>
- <li><img src="assets/img/slide-three.gif" /></li>
- <li><img src="assets/img/slide-four.gif" /></li>
- <li><img src="assets/img/slide-five.gif" /></li>
- <li><img src="assets/img/slide-one.gif" /></li>
- <li><img src="assets/img/slide-two.gif" /></li>
- <li><img src="assets/img/slide-three.gif" /></li>
- <li><img src="assets/img/slide-four.gif" /></li>
- <li><img src="assets/img/slide-five.gif" /></li>
- <li><img src="assets/img/slide-one.gif" /></li>
- <li><img src="assets/img/slide-two.gif" /></li>
- <li><img src="assets/img/slide-three.gif" /></li>
- <li><img src="assets/img/slide-four.gif" /></li>
- <li><img src="assets/img/slide-five.gif" /></li>
- </ul>
- <!-- next and previous buttons -->
- <a href="#" rel="prev" id="previous-button-thumbs" class="gallery-buttons previous" title="Previous"></a>
- <a href="#" rel="next" id="next-button-thumbs" title="Next" class="gallery-buttons next"></a>
- </div>
-
- <div id="thumbnails-wrapper" class="thumbnails">
- <ul id="thumbnails-inner">
- <li class="active"><a href="#"><img src="assets/img/thumbs/thumb-one.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-two.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-three.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-four.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-five.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-one.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-two.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-three.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-four.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-five.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-one.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-two.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-three.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-four.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-five.gif" /></a></li>
-
- </ul>
-
- <a href="#" rel="prev" id="previous-button-thumbs-icons" class="gallery-buttons-thumbs previous" title="Previous"></a>
- <a href="#" rel="next" id="next-button-thumbs-icons" title="Next" class="gallery-buttons-thumbs next"></a>
- </div>
- </section>
-
-
- <section>
- <header>
- <h2>Thumbnails (fade)</h2>
- </header>
- <div id="gallery-thumbs-fade" class="gallery-example">
- <ul id="gallery-thumbs-fade-inner">
- <li class='active'><img src="assets/img/slide-one.gif" /></li>
- <li><img src="assets/img/slide-two.gif" /></li>
- <li><img src="assets/img/slide-three.gif" /></li>
- <li><img src="assets/img/slide-four.gif" /></li>
- <li><img src="assets/img/slide-five.gif" /></li>
- <li><img src="assets/img/slide-one.gif" /></li>
- <li><img src="assets/img/slide-two.gif" /></li>
- <li><img src="assets/img/slide-three.gif" /></li>
- <li><img src="assets/img/slide-four.gif" /></li>
- <li><img src="assets/img/slide-five.gif" /></li>
- <li><img src="assets/img/slide-one.gif" /></li>
- <li><img src="assets/img/slide-two.gif" /></li>
- <li><img src="assets/img/slide-three.gif" /></li>
- <li><img src="assets/img/slide-four.gif" /></li>
- <li><img src="assets/img/slide-five.gif" /></li>
- </ul>
- <!-- next and previous buttons -->
- <a href="#" rel="prev" id="previous-button-thumbs-fade" class="gallery-buttons previous" title="Previous"></a>
- <a href="#" rel="next" id="next-button-thumbs-fade" title="Next" class="gallery-buttons next"></a>
- </div>
-
- <div id="thumbnails-wrapper-fade" class="thumbnails">
- <ul id="thumbnails-inner-fade">
- <li class="active"><a href="#"><img src="assets/img/thumbs/thumb-one.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-two.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-three.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-four.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-five.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-one.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-two.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-three.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-four.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-five.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-one.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-two.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-three.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-four.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-five.gif" /></a></li>
-
- </ul>
-
- <a href="#" rel="prev" id="previous-button-thumbs-icons-fade" class="gallery-buttons-thumbs previous" title="Previous"></a>
- <a href="#" rel="next" id="next-button-thumbs-icons-fade" title="Next" class="gallery-buttons-thumbs next"></a>
- </div>
- </section>
-
- <section>
- <header>
- <h2>Responsive and more complex</h2>
- <p>This example is using responsive image swapping, a more complex structure and the progress bar for when the transitions occur</p>
- </header>
- <div id="gallery-complex" class="gallery-example">
- <ul id="gallery-complex-inner">
- <li>
- <header>
- <h3>Title for slide one</h3>
- </header>
- <figure>
- <img src="assets/img/slide-one.gif" data-high-res="http://placekitten.com/g/570/400" />
- <figcaption>
- This is the text about slide one
- </figcaption>
- </figure>
- </li>
- <li>
- <header>
- <h3>Title for slide two</h3>
- </header>
- <figure>
- <img src="assets/img/slide-two.gif" data-high-res="http://placekitten.com/g/570/400" />
- <figcaption>
- This is the text about slide two
- </figcaption>
- </figure>
- </li>
- <li>
- <header>
- <h3>Title for slide three</h3>
- </header>
- <figure>
- <img src="assets/img/slide-three.gif" data-high-res="http://placekitten.com/g/570/400" />
- <figcaption>
- This is the text about slide three
- </figcaption>
- </figure>
- </li>
- <li>
- <header>
- <h3>Title for slide four</h3>
- </header>
- <figure>
- <img src="assets/img/slide-four.gif" data-high-res="http://placekitten.com/g/570/400" />
- <figcaption>
- This is the text about slide four
- </figcaption>
- </figure>
- </li>
- <li>
- <header>
- <h3>Title for slide five</h3>
- </header>
- <figure>
- <img src="assets/img/slide-five.gif" data-high-res="http://placekitten.com/g/570/400" />
- <figcaption>
- This is the text about slide five
- </figcaption>
- </figure>
- </li>
- <li>
- <header>
- <h3>Title for slide six</h3>
- </header>
- <figure>
- <img src="assets/img/slide-one.gif" data-high-res="http://placekitten.com/g/570/400" />
- <figcaption>
- This is the text about slide six
- </figcaption>
- </figure>
- </li>
- <li>
- <header>
- <h3>Title for slide seven</h3>
- </header>
- <figure>
- <img src="assets/img/slide-two.gif" data-high-res="http://placekitten.com/g/570/400" />
- <figcaption>
- This is the text about slide seven
- </figcaption>
- </figure>
- </li>
- <li>
- <header>
- <h3>Title for slide eight</h3>
- </header>
- <figure>
- <img src="assets/img/slide-three.gif" data-high-res="http://placekitten.com/g/570/400" />
- <figcaption>
- This is the text about slide eight
- </figcaption>
- </figure>
- </li>
- <li>
- <header>
- <h3>Title for slide nine</h3>
- </header>
- <figure>
- <img src="assets/img/slide-four.gif" data-high-res="http://placekitten.com/g/570/400" />
- <figcaption>
- This is the text about slide nine
- </figcaption>
- </figure>
- </li>
- </ul>
-
- <div class="progress-bar">
- <div id="status" class="status"></div>
- </div>
- <!-- next and previous buttons -->
- <a href="#" rel="prev" id="previous-button-complex" class="gallery-buttons previous" title="Previous"></a>
- <a href="#" rel="next" id="next-button-complex" title="Next" class="gallery-buttons next"></a>
- </div>
-
- <div id="thumbnails-wrapper-complex" class="thumbnails">
- <ul id="thumbnails-inner-complex">
- <li class="active"><a href="#"><img src="assets/img/thumbs/thumb-one.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-two.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-three.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-four.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-five.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-one.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-two.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-three.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-four.gif" /></a></li>
- </ul>
-
- <a href="#" rel="prev" id="previous-button-icons-complex" class="gallery-buttons-thumbs previous" title="Previous"></a>
- <a href="#" rel="next" id="next-button-icons-complex" title="Next" class="gallery-buttons-thumbs next"></a>
- </div>
- </section>
-
-
- <section>
- <header>
- <h2>Multi Line thumbs and per page data</h2>
- <p>This example has multi-line complex thumbnails and per page data for both thumbnail panes and main slides</p>
- </header>
- <div id="gallery-multi" class="gallery-example">
-
- <div id="thumbnails-wrapper-multi" class="thumbnails">
- <div class="relative-wrapper">
- <ul id="thumbnails-inner-multi">
- <li>
- <ul>
- <li class="active"><a href="#"><img src="assets/img/thumbs/thumb-one.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-two.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-three.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-four.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-five.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-one.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-two.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-three.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-four.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-two.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-three.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-four.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-five.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-one.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-two.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-three.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-four.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-two.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-three.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-four.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-five.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-one.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-two.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-three.gif" /></a></li>
- </ul>
- </li>
- <li>
- <ul>
- <li><a href="#"><img src="assets/img/thumbs/thumb-two.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-three.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-four.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-five.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-one.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-two.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-three.gif" /></a></li>
- <li><a href="#"><img src="assets/img/thumbs/thumb-four.gif" /></a></li>
- </ul>
- </li>
- </ul>
-
- <a href="#" rel="prev" id="previous-button-icons-multi" class="gallery-buttons-thumbs previous" title="Previous"></a>
- <a href="#" rel="next" id="next-button-icons-multi" title="Next" class="gallery-buttons-thumbs next"></a>
- </div>
- <div id="pageNumThumbs"></div>
- </div>
- <ul id="gallery-multi-inner">
- <?php for($i = 0; $i < 32; $i ++) : ?>
- <li <?php echo ($i == 0) ? 'class="active"' : ''; ?>>
- <header>
- <h3>Title for slide</h3>
- </header>
- <figure>
- <img src="assets/img/slide-one.gif" data-high-res="http://placekitten.com/g/570/400" />
- <figcaption>
- This is the text about slide one
- </figcaption>
- </figure>
- </li>
- <?php endfor; ?>
- </ul>
-
- <div class="progress-bar">
- <div id="status-multi" class="status"></div>
- </div>
- <!-- next and previous buttons -->
- <a href="#" rel="prev" id="previous-button-multi" class="gallery-buttons previous" title="Previous"></a>
- <a href="#" rel="next" id="next-button-multi" title="Next" class="gallery-buttons next"></a>
- </div>
-
- <div id="pageNum"></div>
- <a id="view-thumbs" href="#" title="click here to view thumbnails">View thumbs</a>
- </section>
-
- </div>
- </body>
-
- <!-- Load all JS last -->
- <script type="text/javascript" src="assets/js/jquery-1.8.2.min.js"></script>
- <script type="text/javascript" src="assets/js/garethGallery.js"></script>
- <script type="text/javascript" src="assets/js/script.js"></script>
-
- </html>