【freo】【freoTips】【その他TIPS】freoのcolorboxで表示される画像に自動的にrel="lightbox"を付与する方法
- 2014/01/19 18:43
- colorbox
- サムネイル
- 画像
- javascript
- 58
freoで投稿する画像のうち、エントリー、ページ、メディアの設定で「自動でサムネイルを作成する」と、設定されている場合、サイズが大きい画像はサムネイルが自動作成され、サイト上にはサムネイルが表示され、元のファイルにリンクが貼られて、クリックするとcolorboxというjQueryを利用して拡大表示されます。
colorboxには様々な機能があります。
そのひとつに、「aタグ(リンクタグ)内に『rel="任意の名前"』を設定すると、同じ名前の属性を持つ画像がグループ化される」というのがあります。
freoのcolorboxで表示される画像に自動的にrel="lightbox"を付与する方法
freoに投稿された画像で、colorboxが利用されているもののリンクに、自動的に属性(rel)を追加する方法は以下のとおりです。
今回はためしに「rel=lightbox」という属性を付与してみます。
- [freo/templates/header.html]の<head>~</head>タグ内に
<script type="text/javascript" src="{$freo.core.http_url}{$smarty.const.FREO_JS_DIR}32877_colorbox_rel.js"></script>
- 下記ファイルをダウンロードして、[freo/js]フォルダに保存する。
32877_colorbox_rel.zip - [freo/templates/header.html]と[freo/js/32877_colorbox_rel.js]をアップロードする
なお、たとえばdiv#entry内のサムネイルにのみrelを付与したい場合は、上記ファイルをダウンロードしてエディタで下記のように編集してください。
$(function(){ $('#entry a[href$=".jpg"],#entry a[href$=".jpeg"],#entry a[href$=".JPG"],#entry a[href$=".JPEG"],#entry a[href$=".png"],#entry a[href$=".PNG"],#entry a[href$=".gif"],#entry a[href$=".GIF"]').attr({ rel: "lightbox" }); });
また、
「div#media_category1」内のサムネイルのリンクには「lightbox_media_category1」を、
「div#media_category2」内のサムネイルのリンクには「lightbox_media_category2」を、
「div#media_category3」内のサムネイルのリンクには「lightbox_media_category3」をそれぞれ付与したい場合は、
$(function(){ $('#media_category1 a[href$=".jpg"],#media_category1 a[href$=".jpeg"],#media_category1 a[href$=".JPG"],#media_category1 a[href$=".JPEG"],#media_category1 a[href$=".png"],#media_category1 a[href$=".PNG"],#media_category1 a[href$=".gif"],#media_category1 a[href$=".GIF"]').attr({ rel: "lightbox_media_category1" }); $('#media_category2 a[href$=".jpg"],#media_category2 a[href$=".jpeg"],#media_category2 a[href$=".JPG"],#media_category2 a[href$=".JPEG"],#media_category2 a[href$=".png"],#media_category1 a[href$=".PNG"],#media_category1 a[href$=".gif"],#media_category1 a[href$=".GIF"]').attr({ rel: "lightbox_media_category2" }); $('#media_category3 a[href$=".jpg"],#media_category3 a[href$=".jpeg"],#media_category3 a[href$=".JPG"],#media_category3 a[href$=".JPEG"],#media_category3 a[href$=".png"],#media_category3 a[href$=".PNG"],#media_category3 a[href$=".gif"],#media_category3 a[href$=".GIF"]').attr({ rel: "lightbox_media_category3" }); });
のようにすればよいと思います。