2014年08月08日

WOW Sliderを使ってみました(2)〜改造編

 WOW Sliderは商用利用でなければ、無料で使っていいとのことでありがたいのですが、右下のウォーターマークがどうしても目障りです。
 さらに、全ての画像について、ウォーターマークと同じ位置に、文字(デフォルトだとWOWSlide.com。変更できない)が書き込まれています。画像を動く設定にしているときには特に目障りです。
 これが昨日、試しに作ってみたスライダーです。

wowslider09.gif


 右下の角の取れた四角の方(赤っぽい風景)がウォーターマークで、その左にある四角(背景は湖)の方が、画像に焼き込まれた文字です。

  同じことを考える人は結構いて、対処もあちこちに書かれていますが、バージョンが上がると仕様が変わっていて、対処も変える必要があります。
 「WOWSlider.com」という文字列をスクリプトから探して、その文字列部分を削除するという対処を私も考えましたが、今のバージョン5.6ではすでに、スクリプト中(コメント行を除く)に「WOWSlider.com」の文字列はありません。

 しかし、こちらのコメントに


Jari says
15 April, 2014 at 2:05 pm

For people that are still struggling with this, you have to open wowslider.js in the engine1 folder and search for ‘margin’ then put in front of margin this code: ‘ visibility:”hidden” ‘
This worked for me.

というのがありました。

 ‘margin’はありますが、いくつもあってどうしようかと思いましたが、何と最初の‘margin’が該当箇所でした。

オリジナル:
if(ad){ad.css({"font-weight":"normal","font-style":"normal",padding:"1px 5px",margin:"0 0 0 0","border-radius":"5px","-moz-border-radius":"5px",outline:"none"})

改造版:
if(ad){ad.css({"font-weight":"normal","font-style":"normal",padding:"1px 5px",visibility:"hidden",margin:"0 0 0 0","border-radius":"5px","-moz-border-radius":"5px",outline:"none"})

 オリジナルの状態です。ウォーターマークも画像上の文字も見えます。

wowslider_watermark01.jpg


 改造により、ウォーターマークが見えない状態。画像上の文字は、元のままなので見えます。

wowslider_watermark02.jpg


 DATA1(数字は変わる)フォルダーに作られた文字入りの画像ファイルを、オリジナルの文字なし画像ファイルに置き換えます。ファイル名は同じにした方がいいかも…。(変えた場合はどうなるか、ためしていません。)
 違いが分かるように、敢えて、オリジナルとの交換ではなく、文字部分に赤と黄色の色を付けてみました。

wowslider_watermark03.jpg


 実際の表示状態です。





----
追記
 書き換え箇所は
margin:"0 0 0 0"
で探すのが簡単なようです。1箇所しかないので。

 さらに別の方法。
 同じ箇所(のすぐ後ろ)にshowという指定があるので、それをhideにする、という方法が有効な場合もあるようです。これは、試していません。

----
追々記

 showの書き換えを試してみました。

オリジナル
;if(ad){ad.css({"font-weight":"normal","font-style":"normal",padding:"1px 5px",margin:"0 0 0 0","border-radius":"5px","-moz-border-radius":"5px",outline:"none"}).attr({href:"http://"+e.toLowerCase()}).html(e).bind("contextmenu",function(c){return false}).show().appendTo(at||document.body)

改造後
;if(ad){ad.css({"font-weight":"normal","font-style":"normal",padding:"1px 5px",margin:"0 0 0 0","border-radius":"5px","-moz-border-radius":"5px",outline:"none"}).attr({href:"http://"+e.toLowerCase()}).html(e).bind("contextmenu",function(c){return false}).hide().appendTo(at||document.body)

 これも大丈夫でした。


posted by kewpie at 19:13| Comment(0) | TrackBack(0) | 日記
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/102238474
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
コメントの投稿について
○お名前とコメント欄の記入は必須です。
○メールアドレスは任意です。記入されても公開はされません。管理人のみに知らされます。
○スパム防止のため、
・ホームページアドレス欄への記入はできません。
・コメント欄にURLは記入できません。
・スパムと思われる語を記入できません。
 これらをしようとすると、最終的に投稿完了できません。
○投稿完了後に、管理人の判断でスパムと判断した投稿は削除させていただきます。