Top>画像スワイプ表示プラグイン

#author("2022-02-01T18:36:01+09:00","default:admin","admin")
#author("2022-03-02T01:16:56+09:00","default:admin","admin")
#setlinebreak(off)
&seo(eyecatch){./eye-catch.png};
&seo(description){PukiWiki用画像スワイプ表示プラグインのサンプルページです。実際に動作するサンプル(デモ)を公開し、パソコン・スマホ・タブレットで共通した操作性とユーザーエクスペリエンスの実現性を示してPukiWikiの可能性を広げます。画像スワイプ表示ユニットはアライメント(左寄せ・中央寄せ・右寄せ)指定で表示が可能です。};
&seo(keywords){PukiWiki,SEの良心,PukiWiki改造計画,レスポンシブデザイン対応,スマホ対応,画像拡張表示,画像スワイプ表示,プラグイン,アライメント指定,左寄せ,中央寄せ,右寄せ,サンプル,参照記事};
&seo(tag){PukiWiki,SEの良心,PukiWiki改造計画,レスポンシブデザイン対応,スマホ対応,画像拡張表示,画像スワイプ表示,プラグイン,アライメント指定,左寄せ,中央寄せ,右寄せ,サンプル,参照記事};
#setlinebreak(on)
#norelated
----
[[タグ>/Tag]]:[[PukiWiki>Tag/PukiWiki]], [[SEの良心>Tag/SEの良心]], [[PukiWiki改造計画>Tag/PukiWiki改造計画]], [[レスポンシブデザイン対応>Tag/レスポンシブデザイン対応]], [[スマホ対応>Tag/スマホ対応]], [[画像拡張表示>Tag/画像拡張表示]], [[画像スワイプ表示>Tag/画像スワイプ表示]], [[プラグイン>Tag/プラグイン]], [[アライメント指定>Tag/アライメント指定]], [[左寄せ>Tag/左寄せ]], [[中央寄せ>Tag/中央寄せ]], [[右寄せ>Tag/右寄せ]], [[サンプル>Tag/サンプル]], [[参照記事>Tag/参照記事]]
----
#br
#contents

2022/02/01 (火) 更新

#sortable_table(,head=#f0f0f0,odd=#ffffff,even=#f6f9fb,width=50,nowrap){{
|~項目|~内容|h
|CENTER:80|LEFT:|c
|カテゴリ|[[画像拡張表示>Tag/画像拡張表示]]:[[プラグイン>Tag/プラグイン]]|
|公開日|2021年09月17日|
|バージョン|0.1.0|
}}
#html{{
<!-- JSON-LD マークアップ -->
<script type="application/ld+json">
{
  "@context" : "http://schema.org",
  "@type" : "SoftwareApplication",
  "name" : "PukiWiki用画像スワイプ表示プラグイン",
  "url" : "https://pukiwiki.dajya-ranger.com/?8084fbec0d",
  "author" : {
    "@type" : "Person",
    "name" : "オヤジ戦隊ダジャレンジャー"
  },
  "datePublished" : "2021-09-17",
  "publisher" : {
    "@type" : "Organization",
    "name" : "SEの良心"
  },
  "applicationCategory": "BusinessApplication",
  "downloadUrl" : "https://dajya-ranger.com/sdm_downloads/image-swipe-plugin-for-member/",
  "screenshot" : "https://pukiwiki.dajya-ranger.com/?plugin=attach&refer=8084fbec0d&openfile=eye-catch.png",
  "softwareVersion" : "0.1.0",
  "operatingSystem": [ "Windows", "OSX", "Linux", "FreeBSD" ],
  "requirements" : "PukiWiki1.5.3",
  "aggregateRating": {
    "@type": "AggregateRating",
    "bestRating": "5",
    "ratingValue": "5",
    "ratingCount": "1"
  },
  "offers": {
    "@type": "Offer",
    "price": "1000",
    "priceCurrency": "YEN"
  }
}
</script>
}}
#br

* PukiWiki用画像スワイプ表示プラグイン [#udec142f]

** 概要 [#k1e96d26]
- 暫定公開版です([[PukiWiki1.5.3>>https://pukiwiki.osdn.jp/?PukiWiki/Download/1.5.3]]で動作確認済)
- 本プラグインを利用することで、ブロック型プラグインとしてページに添付された単数または複数画像を拡張表示し、次の機能を可能にします(マウス・キーボード・タッチ操作)
-- ズーム表示
-- 全画面表示
-- スワイプ操作
-- ピンチイン・ピンチアウト操作
-- SNS(Facebook・Twitter・Pinterest)でのシェアおよび画像ダウンロード
- インライン型プラグインとしても動作し、インライン要素内でも単数または複数画像の拡張表示が可能です
- 画像の拡張表示は、''高さ'' or ''横幅指定''(ピクセル単位)・''アライメント''(''左寄せ・中央寄せ・右寄せ'')''指定''・''フレーム無し指定''が可能で、''レスポンシブ対応''です
- 設置や使い方に関しては[[メインサイト>>https://dajya-ranger.com]]の記事「PukiWikiの画像表示を拡張する!」(仮称・執筆予定)を参照して下さい
- 本バージョンは[[オンラインサロン>>https://dajya-ranger.square.site/]]会員(''PukiWiki開発基本会員''以上)のみの''限定公開''です(バージョンアップした際に旧バージョンを無料一般公開する予定)
- 本バージョンは[[オンラインサロン>>https://salon.dajya-ranger.com/]]会員(''PukiWiki開発基本会員''以上)のみの''限定公開''です(バージョンアップした際に旧バージョンを無料一般公開する予定)
#br

* ブロック型 [#e64b947d]

** オプション指定なし(画像高さ指定:240px/画像アライメント:中央/画像フレーム:あり) [#oab61e1f]
 #image_swipe{{
 ロードランナー.jpg:ロードランナー
 タイニーゼビウス.jpg
 ギャラクシアン.jpg
 ハイドライド.jpg
 }}

#image_swipe{{
ロードランナー.jpg:ロードランナー
タイニーゼビウス.jpg
ギャラクシアン.jpg
ハイドライド.jpg
}}
#br

** 画像横幅指定:240px/画像アライメント:左/画像フレーム:なし [#becaa275]
 #image_swipe(width=240,left,noframe){{
 ロードランナー.jpg:ロードランナー
 タイニーゼビウス.jpg
 ギャラクシアン.jpg
 ハイドライド.jpg
 }}

#image_swipe(width=240,left,noframe){{
ロードランナー.jpg:ロードランナー
タイニーゼビウス.jpg
ギャラクシアン.jpg
ハイドライド.jpg
}}
#br

* インライン型 [#bb9a8917]

** ソートテーブルでの例 [#rff094b9]
 #sortable_table(String|,autonum,head=#f0f0f0,odd=#ffffff,even=#f6f9fb,nowrap,width=100){{
 |~対象|~ゲーム|h
 |CENTER:|LEFT:|c
 |PC-6001ml2系|画像アライメント:左/画像フレーム:なし&br;&image_swipe(left,noframe){ギャラクシアン.jpg:ギャラクシアン,グロブダー.jpg:グロブダー};|
 |PC-6601系|画像アライメント:中央/画像フレーム:あり&br;&image_swipe(){ロードランナー.jpg:ロードランナー,タイニーゼビウス.jpg:タイニーゼビウスmk2};|
 |SR専用|画像アライメント:右/画像フレーム:なし&br;&image_swipe(right,noframe){ハイドライド.jpg:ハイドライド,テラ4001.jpg:スターアーサー伝説Ⅲテラ4001};|
 }}

#sortable_table(String|,autonum,head=#f0f0f0,odd=#ffffff,even=#f6f9fb,nowrap,width=100){{
|~対象|~ゲーム|h
|CENTER:|LEFT:|c
|PC-6001ml2系|画像アライメント:左/画像フレーム:なし&br;&image_swipe(left,noframe){ギャラクシアン.jpg:ギャラクシアン,グロブダー.jpg:グロブダー};|
|PC-6601系|画像アライメント:中央/画像フレーム:あり&br;&image_swipe(){ロードランナー.jpg:ロードランナー,タイニーゼビウス.jpg:タイニーゼビウスmk2};|
|SR専用|画像アライメント:右/画像フレーム:なし&br;&image_swipe(right,noframe){ハイドライド.jpg:ハイドライド,テラ4001.jpg:スターアーサー伝説Ⅲテラ4001};|
}}
#br

* 参照記事 [#ce6ca975]
- ダウンロード
-- [[PukiWiki用画像スワイプ表示プラグイン>>https://dajya-ranger.com/sdm_downloads/image-swipe-plugin-for-member/]]
- PukiWikiの画像表示を拡張する!(仮称・執筆予定)
#br

CENTER:[[&ref(MenuBar/オンラインサロン.png,nolink,オンラインサロン「SEの良心・友の会」);>>https://dajya-ranger.square.site]] [[&ref(MenuBar/ダウンロード.png,nolink,ダウンロード);>>ダウンロード]] [[&ref(MenuBar/お問い合わせ.png,nolink,お問い合わせ);>>お問い合わせ]]
CENTER:[[&ref(MenuBar/オンラインサロン.png,nolink,オンラインサロン「SEの良心・友の会」);>>https://salon.dajya-ranger.com/]] [[&ref(MenuBar/ダウンロード.png,nolink,ダウンロード);>>ダウンロード]] [[&ref(MenuBar/お問い合わせ.png,nolink,お問い合わせ);>>お問い合わせ]]
#br

#html{{
<p align="center">
<a href="https://px.a8.net/svt/ejp?a8mat=2ZRJRL+3E1VSI+CO4+6BU5T" target="_blank" rel="nofollow">
<img border="0" width="728" height="90" alt="" src="https://www28.a8.net/svt/bgt?aid=181004241205&wid=001&eno=01&mid=s00000001642001063000&mc=1"></a>
<img border="0" width="1" height="1" src="https://www14.a8.net/0.gif?a8mat=2ZRJRL+3E1VSI+CO4+6BU5T" alt="">
</p>
}}
#br

----

#comment
#br

IP:14.8.19.97 TIME:"2022/03/02 (水) 01:16:56" REFERER:"https://pukiwiki.dajya-ranger.com/?cmd=edit&amp;page=%E7%94%BB%E5%83%8F%E3%82%B9%E3%83%AF%E3%82%A4%E3%83%97%E8%A1%A8%E7%A4%BA%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3" USER_AGENT:"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36 OPR/83.0.4254.62"


トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ ログイン   最終更新のRSS