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")
});

回答No.1

fujillin · ベストアンサー

よくわからないけれど、これかな？
http://www.twospy.com/galleriffic/example-5.html

斜め読みだけれど、HTML内に
　<div class="photo-index"></div>
ってちゃんとありますか？

1）まずデモと同じものを用意して動作することを確認。
2）自分の思っているものに、一部セッティングを修正して、再度確認。
3）動かない場合は直前の修正がおかしい。

一度に全部変えないで、こまめに2）と3）を繰り返すようにすれば、どこが悪いのかわかるのでは？

お礼

ご回答ありがとうございます！
非常に参考になりました。
色々と試してみます！