Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!-- Start Advanced Gallery Html Containers -->
- <div id="gallery" class="content">
- <div id="controls" class="controls"></div>
- <div class="slideshow-container">
- <div id="loading" class="loader"></div>
- <div id="slideshow" class="slideshow"></div>
- </div>
- <div id="caption" class="caption-container"></div>
- </div>
- <div id="thumbs" class="navigation">
- <ul class="thumbs noscript">
- <li>
- <a class="thumb" name="leaf" href="images/slideshow/home/imageTEST.jpg" title="Title #0">
- <img src="images/slideshow/home/thumbnail/image1.jpg" alt="Title #0" />
- </a>
- <div class="caption">
- <div class="image-title"></div>
- <div class="image-desc"></div>
- </div>
- </li>
- <li>
- <a class="thumb" name="drop" href="images/slideshow/home/image2.jpg" title="Title #1">
- <img src="images/slideshow/home/thumbnail/image1.jpg" alt="Title #1" />
- </a>
- <div class="caption">
- </div>
- </li>
- <li>
- <a class="thumb" name="bigleaf" href="images/slideshow/home/image3.jpg" title="Title #2">
- <img src="images/slideshow/home/thumbnail/image1.jpg" alt="Title #2" />
- </a>
- <div class="caption">
- <div class="image-title"></div>
- <div class="image-desc"></div>
- </div>
- </li>
- <li>
- <a class="thumb" name="lizard" href="images/slideshow/home/image4.jpg" title="Title #3">
- <img src="images/slideshow/home/thumbnail/image1.jpg" alt="Title #3" />
- </a>
- <div class="caption">
- <div class="image-title"></div>
- <div class="image-desc"></div>
- </div>
- </li>
- <li>
- <a class="thumb" href="images/slideshow/home/image5.jpg" title="Title #4">
- <img src="images/slideshow/home/thumbnail/image1.jpg" alt="Title #4" />
- </a>
- <div class="caption">
- <div class="image-title"></div>
- <div class="image-desc"></div>
- </div>
- </li>
- <li>
- <a class="thumb" href="images/slideshow/home/image6.jpg" title="Title #5">
- <img src="images/slideshow/home/thumbnail/image1.jpg" alt="Title #5" />
- </a>
- <div class="caption">
- <div class="image-title"></div>
- <div class="image-desc"></div>
- </div>
- </li>
- <li>
- <a class="thumb" href="images/slideshow/home/image7.jpg" title="Title #6">
- <img src="images/slideshow/home/thumbnail/image1.jpg" alt="Title #6" />
- </a>
- <div class="caption">
- <div class="image-title"></div>
- <div class="image-desc"></div>
- </div>
- </li>
- <li>
- <a class="thumb" href="images/slideshow/home/image8.jpg" title="Title #7">
- <img src="images/slideshow/home/thumbnail/image1.jpg" alt="Title #7" />
- </a>
- <div class="caption">
- <div class="image-title"></div>
- <div class="image-desc"></div>
- </div>
- </li>
- <!--<li>
- <a class="thumb" href="images/slideshow/home/image8.jpg" title="Title #7">
- <img src="images/slideshow/home/thumbnail/image1.jpg" alt="Title #7" />
- </a>
- <div class="caption">
- <div class="image-title">Title #7</div>
- <div class="image-desc">Description</div>
- </div>
- </li>-->
- </ul>
- ...
- <script type="text/javascript">
- jQuery(document).ready(function($) {
- // We only want these styles applied when javascript is enabled
- $('div.navigation').css({'width' : '300px', 'float' : 'right', 'margin-right' : '-170px', 'margin-top' : '-50px'});
- $('div.content').css('display', 'block');
- // Initially set opacity on thumbs and add
- // additional styling for hover effect on thumbs
- var onMouseOutOpacity = 0.67;
- $('#thumbs ul.thumbs li').opacityrollover({
- mouseOutOpacity: onMouseOutOpacity,
- mouseOverOpacity: 1.0,
- fadeSpeed: 'fast',
- exemptionSelector: '.selected'
- });
- // Initialize Advanced Galleriffic Gallery
- var gallery = $('#thumbs').galleriffic({
- delay: 10000,
- numThumbs: 8,
- preloadAhead: 1,
- enableTopPager: false,
- enableBottomPager: true,
- maxPagesToShow: 1,
- imageContainerSel: '#slideshow',
- controlsContainerSel: '#controls',
- captionContainerSel: '#caption',
- loadingContainerSel: '#loading',
- renderSSControls: true,
- renderNavControls: false,
- playLinkText: false,
- pauseLinkText: false,
- prevLinkText: '‹ Previous Photo',
- nextLinkText: 'Next Photo ›',
- nextPageLinkText: 'Next ›',
- prevPageLinkText: '‹ Prev',
- enableHistory: false,
- autoStart: true,
- syncTransitions: true,
- defaultTransitionDuration: 900,
- onSlideChange: function(prevIndex, nextIndex) {
- // 'this' refers to the gallery, which is an extension of $('#thumbs')
- this.find('ul.thumbs').children()
- .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
- .eq(nextIndex).fadeTo('fast', 1.0);
- },
- onPageTransitionOut: function(callback) {
- this.fadeTo('fast', 0.0, callback);
- },
- onPageTransitionIn: function() {
- this.fadeTo('fast', 1.0);
- }
- });
- });
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement