jQueryを使用したギャラリー
下記、スクリプトを書きましたが、
Prev / Nextは表示されるのですが、枚数の取得→ (1 of 4) このような表記が表示されません。
なぜでしょうか？
.html('('+ (nextIndex+1) +' of '+ (this.data.length) + ')');
この部分がその表記部分だと思うのですが、、、
なにぶん、素人なもので理解が出来ず。
どなたかご教授頂けたらと思います。何卒宜しくお願い致します！！！！！
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.content').css('display', 'block');
$(".each-gallery").each(function(i){
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs' + i).galleriffic({
delay: 600,
numThumbs: 10,
preloadAhead: 10,
enableTopPager: false,
enableBottomPager: false,
imageContainerSel: '#slideshow'+ i,
controlsContainerSel: '#controls'+ i,
captionContainerSel: '#caption'+ i,
loadingContainerSel: '#loading'+ i,
renderSSControls: false,
renderNavControls: true,
prevLinkText: 'Prev',
nextLinkText: 'Next',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
autoStart: false,
syncTransitions: false,
defaultTransitionDuration: 600,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs')
.hide();
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('('+ (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);
}
});
gallery.find('a.prev').click(function(e) {
gallery.previousPage();
e.preventDefault();
});
gallery.find('a.next').click(function(e) {
gallery.nextPage();
e.preventDefault();
});
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.
/****************************************************************************************/
});
$('.linkToPrevWorks').children().click(function(){
$(this).parent().next().children('.toggleWrapper').fadeIn(900);
$(this).parent().css("display","none");
});
jQuery(document).ready(function($) {
$('.imgWrapper').children().next('img').css("margin-top", "20px")
});
お礼
ご回答ありがとうございます！参考にさせて頂きます！