• サイト内検索
  • サイトマップ
  • twitter
  • pixiv

エントリー

ホーム    ブログ    サイト備忘録

freo備忘録:LightBox系JS"PhotoSwipe"導入

PhotoSwipe

PhotoSwipe: Responsive JavaScript Image Galler
PhotoSwipeをLightboxのように簡単設置できるjQuery無料配布 | Free jQuer

いわゆるLightBox系ですね。
画像をクリックするとその場でオシャンティに表示してくれる系のJS。
PhotoSwipeは以前から導入していたので設置の際の記憶が曖昧ですが、多分上記のサイトを参考にさせていただいたと思います(^ω^;)

PCとスマホ両方の挙動が好きなのと、設置と画像表示する際の記述が簡単なのでPhotoSwipeにしました。
特にスマホでの挙動が面白くて好きですv
本のサンプルをグループ化してどんどん次へ前へとスライドしたり拡大したり出来るのでとっても便利です(´∀`*)ウフフ

設置でトラブったのは下記の一点のみ。

freoに元々jquery.jsは入っているが、なぜかPhotoSwipeが動作しなかったのでjquery.min.jsを改めてうpした。

バージョンの関係とかで違いが色々あるんですかね?
…うむ、わからん(゜∀。)

同人誌個別ページの画像は
ソースに直接PhotoSwipeで開くように記述
していますが、
通常の記事投稿画面で投稿した場合にもPhotoSwipeで画像が開くよう
下記サイトを参考に以下のように変更しました。

freoでfancyBox2を導入するには | Web Liberty&freoカスタマイズ集
templates/internals/admin/iframe_media.html
の以下の部分(二箇所)を変更。

title="<a href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}

↓変更 rel="lightbox" class="swipe"を追加(特殊文字をエスケープで)

title="<a rel="lightbox" class="swipe" href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}

それとサムネイルが作成されない画像にも画像へのリンクを張りたかったので以下の部分を変更。

{elseif $file.width and $file.height}
title="<img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}medias/{$freo.query.path}{$file.name}" alt="" width="{$file.width}" height="{$file.height}" />"

↓変更

{elseif $file.width and $file.height}
title="&lt;a rel=&quot;lightbox&quot; class=&quot;swipe&quot; title=&quot;&quot; href=&quot;{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}medias/{$freo.query.path}{$file.name}&quot;&gt;&lt;img src=&quot;{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}medias/{$freo.query.path}{$file.name}&quot; alt=&quot;&quot; width=&quot;{$file.width}&quot; height=&quot;{$file.height}&quot; /&gt;</a&gt;"

エスケープ文字で弄るのってミスるの怖すぎてひやひやするぜぇ~
((((;゚Д゚))))

通常表示用の header.htmlからはcolorboxのjsとcssは抜いてますが、 管理画面ではcolorboxをそのまま使用しています。
変更する箇所が多くて大変なので(^ω^;)

freo導入メモまとめは以下。
freo導入まとめ

このページのタイトルとURLをコピーする

ブログ関連記事

ユーティリティ

イベント参加予定

2019年04月29日
申込済み
2019年05月12日
申込済み
2019年05月26日
申込済み
2019年08月10日
申込済み
同人情報

新着作品

黒頭巾くんとオオカミさん2 同人誌

2019年2月17日異種ラブ新刊

書店: とらのあな アリスブックス

DL版: 後日更新予定

黒頭巾くんとオオカミさん 同人誌

2018年4月30日けもケット新刊

書店: とらのあな アリスブックス

DL版: BOOTH DiGiket DLsite FANZA

隣人注意報 前編 同人誌

2014年3月9日J.GARDEN新刊

書店: 後日更新予定

DL版: 後日更新予定

作品一覧

書店

とらのあな
アリスブックス
DiGiket.com
BL同人・ボーイズラブ・BLマンガのダウンロードなら「DLsite がるまに」