社内のパンフレットを、電子カタログにしたいぃ！
販売促進として、パンフレットを作成していましたが
ウェブ上でも見られたらいいなーと思い調べてみました。
フリーで、広告が表示されてもいいよ！って方なら
沢山サービスがあります。
アジャストブック
http://www.adjustbook.com/
Sigil
http://pc.nikkeibp.co.jp/article/knowhow/20140602/1132305/
issuu
http://kotori-blog.com/webservice/issuu/
ミックスペーパー
http://mixpaper.jp/
などなど、、、
でも、広告入りだと楽天に外部URL申請する際に落とされます。
実際、落とされました・・・；；
と、いう事で自作で作成してみました。
といっても、少しだけ HTML・CSSの知識があればオッケーですー
参考にしたサイト様
http://webkaru.net/jquery-plugin/zoomer/
このページから スクリプトのデーターをダウンロードします
https://github.com/FormstoneClassic/Zoomer
この中にある、
jquery.fs.zoomer.css
jquery.fs.zoomer.js
jquery.fs.zoomer.min.js
を取り出して、htmlと同じフォルダに放り込みます
今回は、HTML5で作成します。
そして以下のソースを貼り付けます
<head>
<meta charset="utf-8">
<!-- IE対策 -->
<meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1">
<!-- IE対策 -->
<meta name="description" content="デモページ">
<title>電子カタログ風</title>
<link href="jquery.fs.zoomer.css" rel="stylesheet" type="text/css" media="all">
<style>
.zoomer_wrapper {
border: 1px solid #ddd;
border-radius: 3px;
height: 500px;
margin: 10px 0;
overflow: hidden;
width: 100%;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.fs.zoomer.js"></script>
<script>
$(document).ready(function() {
$(".zoomer_basic").zoomer();
});
</script>
</head>
<body>
<h1>デモページ</h1>
<div class="zoomer_wrapper zoomer_basic">
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
<img src="5.jpg" />
<img src="6.jpg" />
<img src="7.jpg" />
<img src="8.jpg" />
</div>
</body>
※2015.10.14追記しました！コメント頂きましたMさんのアドバイスで、
IE対策の記述を入れています。
もともと、拡大縮小だけがしたくて導入しましたが、
なんと・・・・！！！
複数ファイル・ページめくりができるということで
電子カタログとしても使えるのでは？と思い
今回これを作ってみることにしました＾＾
<div class="zoomer_wrapper zoomer_basic">～</div>
の間の画像枚数を増やすだけです。
ページを ペラリ・・・とめくる感じはありませんが
データー次第で見開きもつくれますし、
縦幅も自由！
しかも初期表示は決めた縦幅で全体を収めてくれるので分かりやすい！
そして、シンプルでオシャレ、広告一切なし！
どうでしょうか？？？
パンフレットだけではなく、ちょっとした説明ページとして
使われても良いと思います＾＾
2015.06.01 追記
IEで画像が読込中のまま表示されないと気付き、
ハマってしまいました・・・
あらゆる対策をしているのですが、治らない・・・
多分、キャッシュのせいかなと思うのですが、
一応参考サイトを掲載しておきます。
Internet Explorer によるコンテンツ キャッシュを無効にする
https://code.msdn.microsoft.com/jQuery-howto-10502352
[jQUery] IE対策のためajaxでのキャッシュの無効化
http://www.tailtension.com/jquery/1384/
jQuery.ajax でリクエストをキャッシュさせない方法
http://d.hatena.ne.jp/hasegawayosuke/20090925/p1
jQueryが動かない場合に簡単に動かす方法・手順【初心者向け】
http://manablog.org/jquery-not-work/
$.ajax()がIEでうまく動かない
http://d.hatena.ne.jp/herher/20120322/1332416166
IE7だけjQueryが動かないとき
http://doshiroutonike.com/web/javascript-web/486/
IE撲滅運動しようかな・・・ｗ
私の変な発想ですが、IEのページの中に
擬似ブラウザをiframeみたいなので表示させて
IEなんだけど、ページの中身はFirefoxとかできないかなーなんてｗ
※2015.10.14追記しました！コメント頂きましたMさんのアドバイスで、
IE対策の記述を入れています。
あと、こんなサイトを見つけました。
電子書籍、電子ドキュメントを簡単に libura（ライブラ）
http://libura.com/
シルバーライトをインストしないと見られないあたりが
ちょっと気に入らないのですが・・・
それと、これです。
勉強不足で、PDFアップしましたけどどうするのやら？？
PDFを手軽に閲覧できるWebカタログに変換してくれるWebサービス・Youblisher.com
http://kachibito.net/web-service/youblisher.html
■■■■■■■■■■■
2016.03.01
電子カタログについて、新しいエントリーを書きました！
こちらもどうぞ。
http://atmark-axis.com/web/363/
最後までお読みいただきありがとうございます♪
今回の情報が、少しでもお役に立てれば幸いです。 ランキングにも参加していますので、ポチッとお願いします＾＾ さらに情報をシェアいただければ、とっても嬉しいです♪
コメント