Gallerifficの画像の枚数

質問

Gallerifficを使ってホームページを作っているのですがexample-2でflickrから直接画像をと思ってます。
その場合サムネイル（表示できる画像）が全部で20枚しか読み取れません。
どこをいじれば変更できるのでしょうか？

回答No.3

wmin-2014

画像のパスが抜けてますよ。

●メイン画像
<a class="thumb" href="元画像のパス" title="Title #番号">

「元画像のパス」とは、画像ファイルへのリンクです。

例：thumb01.jpg

HTMLファイルと同じフォルダ内なら、

<a class="thumb" href="thumb01.jpg" title="Title #番号">

HTMLファイルと同じフォルダ内に「images」フォルダを作って、そこに画像ファイルを格納しているなら

<a class="thumb" href="images/thumb01.jpg" title="Title #番号">

●サムネイル画像
<img src="サムネイル用画像のパス" alt="Title #番号" />

例：photo01.jpg

HTMLファイルと同じフォルダ内なら、
<img src="photo01.jpg" alt="Title #番号" />

HTMLファイルと同じフォルダ内に「images」フォルダを作って、そこに画像ファイルを格納しているなら
<img src="images/photo01.jpg" alt="Title #番号" />

参考：Galleriffic
http://www.twospy.com/galleriffic/

4. Within the thumbnails container element, build your graceful degrading unordered list of thumbnails linking to the image slides as such:

<div id="thumbs">
<ul class="thumbs noscript">
<li>
<a class="thumb" name="optionalCustomIdentifier" href="path/to/slide" title="your image title">
<img src="path/to/thumbnail" alt="your image title again for graceful degradation" />
</a>
<div class="caption">
(Any html can go here)
</div>
</li>
... (repeat for every image in the gallery)
</ul>
</div>

It is important to specify the 'thumb' class for the link that should serve as the thumbnail and the 'caption' class for the element that should serve as the caption. When an image is selected for display in the slideshow, any elements with the 'caption' class will be rendered within the specified caption container element above.

お礼

どうやらＲＳＳでは最大20枚しか写真が取得できないみたいです。
違う方法考えてみますので何かヒントがあれば教えてください。
http://okwave.jp/qa/q8710472.html
いろいろとありがとうございました。

補足

下記の感じでJSONを使って自動でflickrより画像を取り出しflickrに画像をアップすると自動でホームページも変わるようにしたいのです。

でも吸出しも出来るし画像をアップしたら自動で更新もするのですが画像が20枚しか表示されないんです。

ややこしくてすみません。
よろしくお願いします。

<script type="text/javascript">
jQuery(document).ready(function($) {
$.getJSON("https://api.flickr.com/services/feeds/photoset.gne?set=72157627333838469&nsid=65620942@N05&lang=en-us&format=json&jsoncallback=?", function(data){
$.each(data.items, function(i,item){
var newthumb = $("ul.thumbs").children("li:first").clone();
var baseimg = item.media.m;

var thumbimg = baseimg.replace("_m.jpg", "_s.jpg");
$(newthumb).find("img").attr("src", thumbimg);

var disimg = baseimg.replace("_m.jpg", ".jpg");
$(newthumb).find(".thumb").attr("href", disimg);

var lgeimg = baseimg.replace("_m.jpg", "_b.jpg");
$(newthumb).find(".download").children("a").attr("href", lgeimg);

var title = item.title;
var description = item.description;

var desc = $("<div />").append(description);
if ($(desc).children().size() == 3) {
description = $(desc).children("p:last").html();
} else {
description = "";
}

$(newthumb).find(".image-title").empty().html(title);
$(newthumb).find(".image-desc").empty().html(description);
$(newthumb).find(".image-auth").empty().html(item.author);

$("ul.thumbs").append(newthumb);
});

$("ul.thumbs").children("li:first").remove();

// 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({
per_page:500,
delay: 2500,

回答No.2

wmin-2014

サムネイルの表示数ではなくて、全体の表示数についてなのですね。
画像を30枚アップロードしたとありますが、HTMLソース部分も画像数分を記述してますか？

こちでもサンプルを試してみました。
サムネイルの表示数を「5」にして、サンプルのHTMLソース（下記）を15個ほど追加してみました。
サンプルでは24個の画像がありましたので、追加15個で39個にしてみましたが、ちゃんと8ページまで表示されました。

<li>
<a class="thumb" href="元画像のパス" title="Title #番号">
<img src="サムネイル用画像のパス" alt="Title #番号" />
</a>
<div class="caption">
<div class="image-title">Title #番号</div>
<div class="image-desc">キャプションのテキスト</div>
</div>
</li>

ただ、1度だけ、似た現象が出ました。39個分の画像が出るはずなのに、半分ほどしか認識されませんでした。
HTMLは一見問題なさそうでしたが、念のため、最初から記述しなおしてみたら今度は問題なく動作しました。

HTML部分の記述に問題ないようでも、もう一度上記部分のみ記述しなおしてみた方が良いかもしれません。バグか、もしくはどこかにHTMLの記述ミスがあるのかもしれません。

補足

こんな感じで<li>　　～　　</li>を増やしたらいいのでしょうか？
やってみたのですがうまく出来ず増やした数だけ画像の無いサムネイルが増えました。
申し訳ありませんがもう少し詳しく教えてください。
よろしくお願いします。

<ul class="thumbs noscript">
<li>
<a class="thumb" name="leaf" href="" title="Title #0">
<img src="" alt="Title #0" />
</a>
<div class="caption">

<div class="image-title">Title #0</div>
<div class="image-desc">Description</div>
<div class="image-auth"></div>
</div>
</li>
<li>
<a class="thumb" name="leaf" href="" title="Title #0">
<img src="" alt="Title #0" />
</a>
<div class="caption">

<div class="image-title">Title #0</div>
<div class="image-desc">Description</div>
<div class="image-auth"></div>
</div>
</li>

</ul>

回答No.1

wmin-2014

プラグインを呼び出す部分に

numThumbs: 20,

を追加して、この「20」を変更すればいいのでは？

配布元参照：Galleriffic
http://www.twospy.com/galleriffic/

例：
jQuery(document).ready(function($) {
var gallery = $('#thumbs').galleriffic({
numThumbs: 30,
});
});

補足

1ページのサムネイルの表示数ではなく全体のサムネイル数の変更です。
現在1ページに12枚表示できるようにしてあり2ページ目に行くと8枚しか表示されません。
flickrのアルバムには30枚ほどアップロードしております。
よろしくお願いします。