相簿手動/自動輪播分享

相簿輪播
 

原來不必靠Flash,用jQuery也能做出手動/自動輪播切換的相簿!!

找這款找超久的!!>///<

這款相簿輪播,提供了各種不同的樣式做選擇

第一種主要是以分頁方式顯示,相簿輪播完一頁後,會自動跳到第二頁做輪播

只要點選照片,或照片左上角的Pause Slideshow 就可以自動跳回手動輪播

相簿輪播-分頁式

也有另外一種方式,也是滿常見的,用左右拉霸去做照片瀏覽!!

相簿輪播-拉霸式

網站上共提供了五款樣式做選擇

下載的封包檔,更提供了五款的Html sample檔喔!!

真是超貼心的啦!!

下面介紹一下主要的架構:

1. 原始檔內,Head主要使用的幾個js和css檔

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Galleriffic | Custom layout with external controls</title>
<link rel="stylesheet" href="css/basic.css" type="text/css" />
<link rel="stylesheet" href="css/galleriffic-5.css" type="text/css" />

<!-- <link rel="stylesheet" href="css/white.css" type="text/css" /> -->
<link rel="stylesheet" href="css/black.css" type="text/css" />

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.history.js"></script>
<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
<!-- We only want the thunbnails to display when javascript is disabled -->
<script type="text/javascript">
document.write('<style>.noscript { display: none; }</style>');
</script>
</head>
</html>

2. 原始檔輪播內容區塊的基本架構

<html>
<body>
<<a href="http://www.w3.org/TR/html4/struct/global.html#edef-DIV">div</a> <a href="http://www.w3.org/TR/html4/struct/global.html#adef-id">id</a>="controls"></div> /*自動/手動切換、前一張/後一張*/
<<a href="http://www.w3.org/TR/html4/struct/global.html#edef-DIV">div</a> <a href="http://www.w3.org/TR/html4/struct/global.html#adef-id">id</a>="loading"></div>
<<a href="http://www.w3.org/TR/html4/struct/global.html#edef-DIV">div</a> <a href="http://www.w3.org/TR/html4/struct/global.html#adef-id">id</a>="slideshow"></div> /*大圖輪播區*/
<<a href="http://www.w3.org/TR/html4/struct/global.html#edef-DIV">div</a> <a href="http://www.w3.org/TR/html4/struct/global.html#adef-id">id</a>="caption"></div> /*圖片說明區*/
<<a href="http://www.w3.org/TR/html4/struct/global.html#edef-DIV">div</a> <a href="http://www.w3.org/TR/html4/struct/global.html#adef-id">id</a>="thumbs"> /*小圖選單區*/
<<a href="http://www.w3.org/TR/html4/struct/lists.html#edef-UL">ul</a> <a href="http://www.w3.org/TR/html4/struct/global.html#adef-class">class</a>="thumbs noscript">
<<a href="http://www.w3.org/TR/html4/struct/lists.html#edef-LI">li</a>>
<<a href="http://www.w3.org/TR/html4/struct/links.html#edef-A">a</a> <a href="http://www.w3.org/TR/html4/struct/global.html#adef-class">class</a>="thumb" <a href="http://www.w3.org/TR/html4/struct/links.html#adef-name-A">name</a>="optionalCustomIdentifier" <a href="http://www.w3.org/TR/html4/struct/links.html#adef-href">href</a>="path/to/slide" <a href="http://www.w3.org/TR/html4/struct/global.html#adef-title">title</a>="your image title">
<<a href="http://www.w3.org/TR/html4/struct/objects.html#edef-IMG">img</a> <a href="http://www.w3.org/TR/html4/struct/objects.html#adef-src-IMG">src</a>="path/to/thumbnail" <a href="http://www.w3.org/TR/html4/struct/objects.html#adef-alt">alt</a>="your image title again for graceful degradation" />
</a>
<<a href="http://www.w3.org/TR/html4/struct/global.html#edef-DIV">div</a> <a href="http://www.w3.org/TR/html4/struct/global.html#adef-class">class</a>="caption">
(Any html can go here)
</div>
</li>
... (repeat for every image in the gallery)
</ul>
</div>
</body>
</html>

3. JS控制區塊

<html>
<body>
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('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, div.navigation a.pageLink').opacityrollover({
mouseOutOpacity:   onMouseOutOpacity,
mouseOverOpacity:  1.0,
fadeSpeed:         'fast',
exemptionSelector: '.selected'
});

// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay:                     2500,
numThumbs:                 10,
preloadAhead:              10,
enableTopPager:            false,
enableBottomPager:         false,
imageContainerSel:         '#slideshow',
controlsContainerSel:      '#controls',
captionContainerSel:       '#caption',
loadingContainerSel:       '#loading',
renderSSControls:          true,
renderNavControls:         true,
playLinkText:              'Play Slideshow',
pauseLinkText:             'Pause Slideshow',
prevLinkText:              '&lsaquo; Previous Photo',
nextLinkText:              'Next Photo &rsaquo;',
nextPageLinkText:          'Next &rsaquo;',
prevPageLinkText:          '&lsaquo; Prev',
enableHistory:             true,
autoStart:                 false,
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);

// Update the photo index display
this.$captionContainer.find('div.photo-index')
.html('Photo '+ (nextIndex+1) +' of '+ this.data.length);
},
onPageTransitionOut:       function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn:        function() {
var prevPageLink = this.find('a.prev').css('visibility', 'hidden');
var nextPageLink = this.find('a.next').css('visibility', 'hidden');

// Show appropriate next / prev page links
if (this.displayedPage > 0)
prevPageLink.css('visibility', 'visible');

var lastPage = this.getNumPages() - 1;
if (this.displayedPage < lastPage)
nextPageLink.css('visibility', 'visible');

this.fadeTo('fast', 1.0);
}
});

/**************** Event handlers for custom next / prev page links **********************/

gallery.find('a.prev').click(function(e) {
gallery.previousPage();
e.preventDefault();
});

gallery.find('a.next').click(function(e) {
gallery.nextPage();
e.preventDefault();
});

/****************************************************************************************/

/**** Functions to support integration of galleriffic with the jquery.history plugin ****/

// PageLoad function
// This function is called when:
// 1. after calling $.historyInit();
// 2. after calling $.historyLoad();
// 3. after pushing "Go Back" button of a browser
function pageload(hash) {
// alert("pageload: " + hash);
// hash doesn't contain the first # character.
if(hash) {
$.galleriffic.gotoImage(hash);
} else {
gallery.gotoIndex(0);
}
}

// Initialize history plugin.
// The callback is called at once by present location.hash.
$.historyInit(pageload, "advanced.html");

// set onlick event for buttons using the jQuery 1.3 live method
$("a[rel='history']").live('click', function(e) {
if (e.button != 0) return true;

var hash = this.href;
hash = hash.replace(/^.*#/, '');

// moves to a new page.
// pageload is called at once.
// hash don't contain "#", "?"
$.historyLoad(hash);

return false;
});

/****************************************************************************************/
});
</script>
</body>
</html>

小建議:

在拉霸式的部份,
因為是一次把圖片全部LOAD出來,
如果選單圖片沒有經過縮圖處理的話,
網站LOADING量太大,可是會造成圖沒辦法跑出來的冏境喔!!(冏)

所以在這邊建議,
此相簿輪播不妨可搭配"縮圖函式"一起服用,效果最佳啦!!^^b

參考連結:http://www.twospy.com/galleriffic/index.html

One Response to 相簿手動/自動輪播分享

  1. 阿賢 說道:

    請問大大!!!如果小弟想要將大圖跟小圖的位置調換的話,應該要怎樣改呢???
    就是小圖放右邊,大圖放左邊!!!!

發表迴響

您的電子郵件位址並不會被公開。 必要欄位標記為 *

*

您可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

lineShare
lineShare