Infinite Scrollプラグインで次のページが連番で振られて無い時のページングの仕方

FacebookのGraph APIを使って、Infinite Scrollプラグインで無限スクロールのページを作成してたところ、Graph APIの次のページへのリンクが連番で振られて無くて、Infinite Scrollブラグインのページングがうまく出来なかった。
デフォルトだと、URLの中から数値を見つけて、勝手に数値のところをインクリメントしてくれるらしい。

https://graph.facebook.com/v2.10/012345678/photos?access_token=xxxxxx&after=abcde
みたいなURLが
https://graph.facebook.com/v3.10/012345678/photos?access_token=xxxxxx&after=abcde
になっていた。

オプションで path が関数で指定出来るので、それを使う。
(今回はrubyでサーバー側は実装)

ruby
def photos
begin
if params[:page]
@photos = Koala::Facebook::API.new(access_token).get_page(params[:page])
else
@photos = Koala::Facebook::API.new(access_token).get_connections(params[:album_id], 'photos', {
local: 'ja-jp',
fields: ['album', 'picture', 'name', 'images']
})
end
rescue => e
logger.error "#{__method__} !! Failed to get photos !! #{e}"
end
if params[:page].present?
render partial: 'partials/photo_lists', locals: {photos: @photos}
end
end

def access_token
# access_tokenを取得する
end

html
<div class="container">
<%= render partial: 'photo_lists', locals: {photos: @photos} %>
</div>

_photo_lists
<div class="item">
<% photos.each do |photo| %>
<%= image_path(photo['picture']) %>
<% end %>
<nav class="pagination">
<%= link_to 'Next', url_for(:page => photos.next_page_params), rel: 'next' if photos.next_page %>
</nav>
</div>

javascript
$('.container').infinitescroll({
navSelector: 'nav.pagination',
nextSelector: 'nav.pagination a[rel=next]',
itemSelector: '.item',
path: function(page) {
console.log("page:" + page); // <- 次のページが入ってくる
return $('.container .pagination').eq(page - 2).find('a').attr('href');
},
});


2ページ目以降も、返却させるpartialの中にページング情報も入れておいて、Infinite Scrollのオプションのpathで、そのpartialの中のリンク先を設定させるのがポイント。

参考サイト
https://github.com/arsduo/koala/wiki/Graph-API
コンテンツを自動的に読み込んで無限スクロールさせる方法
スポンサーサイト

fancyboxをページ読み込み時に開く方法

fancyboxをページ読み込み時に開く方法のメモ。

■JavaScript
$(document).ready(function(){
$.fancybox.open($('.fancy'));
});


■HTML
<div class="fancy>
中身
</div>



ちなみに、閉じるは
$(document).ready(function(){
$.fancybox.close();
});

jqueryでスクロールすると、固定位置に表示したりする

jqueryでスクロールすると、固定位置に表示したりする方法を色々紹介してくれているサイト。

jQueryでスクロールすると表示する系いろいろ

jQueryでスムーススクロール

とても簡単にスムーズスクロールが実装出来た。

$(function(){
// #で始まるアンカーをクリックした場合に処理
$('a[href^=#]').click(function() {
// スクロールの速度
var speed = 400;// ミリ秒
// アンカーの値取得
var href= $(this).attr("href");
// 移動先を取得
var target = $(href == "#" || href == "" ? 'html' : href);
// 移動先を数値で取得
var position = target.offset().top;
// スムーススクロール
$($.browser.safari ? 'body' : 'html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});


jquery読み込んで、上記を実行させるだけ。
リンクタグでhref="#"みたいに、#からはじまる奴だけ選んで、勝手に実行してくれる。

参考サイト

jQueryでスムーススクロール

googlemap api v3で複数ピンを立てて、ズームレベルを適切な形にする方法

v2だとgetBoundsZoomLevelと言う関数でやるんみたいだけど、v3だとそれが無くなっているらしい。
やり方を見つけたのでメモ。

<head>内

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
<!--
google.maps.event.addDomListener(window, 'load', function()
{
var mapOptions = {
zoom: 20,
center: new google.maps.LatLng(),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true
};
var mapObj = new google.maps.Map(document.getElementById('gmap'), mapOptions);
var minLatLng = new google.maps.LatLng(最小緯度,最小経度);
var maxLatLng = new google.maps.LatLng(最大緯度,最大経度);
var latLngBounds = new google.maps.LatLngBounds(minLatLng, maxLatLng);
var bounds = new google.maps.LatLngBounds();
bounds.extend(minLatLng);
bounds.extend(maxLatLng);
mapObj.fitBounds(bounds);

// 位置情報
var locations = {
list: [
{ name: "タイトル1", latlng: new google.maps.LatLng(緯度,経度) },
{ name: "タイトル2", latlng: new google.maps.LatLng(緯度,経度) },
{ name: "タイトル3", latlng: new google.maps.LatLng(緯度,経度) },
{ name: "タイトル4", latlng: new google.maps.LatLng(緯度,経度) },
],

// Getter
getAll: function()
{
return this.list;
}
};

// マーカーを作成
jQuery.each(locations.getAll(), function(i, station)
{
var marker = new google.maps.Marker({
position: station.latlng,
map: mapObj,
title: station.name
});
});
});
-->
</script>


<body>で。

<div id="gmap" style="width:640px;height:400px;">ヒットする結果はありませんでした。



ピンを立てる緯度経度で、それぞれ最大・最小の緯度経度を求めて
boundsを広げるようにする。

参考サイト
Google Maps JavaScript API V3 リファレンス
地名や住所から緯度・経度を取得する
Google Map APIで縮尺と位置の自動調節

プロフィール

U2K

Author:U2K
いろいろプログラムに関しての覚え書きをちょくちょくと書いていきます。

オススメ










オススメ

忍者AdMax

u2k on Twitter

最近の記事