FancyZoom.jsをwebp、svgもズーム対応に

FancyZoom.jsをwebp、svgもズーム対応に

htmlを作る際、画像リンクをクリックでズームしてくれる
FancyZoom.js
ですが、作られたのが2008年とかなり昔になってしまいました。
jQuerry版もあるのですが、v1.1のほうが軽く使いやすいので、
ウチのサイト内でもいたるところに使わせていただいております。

刺繍.com 刺繍作品集
刺繍.comでお作りした作品集です。

古いからといって、何が問題かというと、、、

最近使われだした 画像形式:webp ファイル、ベクターファイル形式:svg ファイルが
ただのリンクになってしまい、次ページで画像が表示されてしまいます。

そこで FancyZoom.js の 85行目の

if (links[i].getAttribute(“href”).search(/(.*)\.(jpg|jpeg|gif|png|bmp|tif|tiff)/gi) != -1) {

の tiff の後ろに |webp|svg を書き加えます。

if (links[i].getAttribute(“href”).search(/(.*)\.(jpg|jpeg|gif|png|bmp|tif|tiff|webp|svg)/gi) != -1) {

これを保陣してサーバにアップすれば、新しい形式の画像ファイルもズーム表示してくれます。
jsファイルの書き換えは自己責任でお願いします。(^^)/

*
FancyZoom.jsをwebp、svgもズーム対応に

コメント

タイトルとURLをコピーしました