• 虹色ミツバチ
  • freoカスタマイズメモ、テンプレート・プラグイン配布/officeTIPS
検索プラグイン
虹色ミツバチ

> Entry >freo>freoTips>その他TIPS> freoのcolorboxで表示される画像に自動的にrel="lightbox"を付与する方法

【freo】【freoTips】【その他TIPS】freoのcolorboxで表示される画像に自動的にrel="lightbox"を付与する方法

freoで投稿する画像のうち、エントリー、ページ、メディアの設定で「自動でサムネイルを作成する」と、設定されている場合、サイズが大きい画像はサムネイルが自動作成され、サイト上にはサムネイルが表示され、元のファイルにリンクが貼られて、クリックするとcolorboxというjQueryを利用して拡大表示されます。
colorboxには様々な機能があります。
そのひとつに、「aタグ(リンクタグ)内に『rel="任意の名前"』を設定すると、同じ名前の属性を持つ画像がグループ化される」というのがあります。

freoのcolorboxで表示される画像に自動的にrel="lightbox"を付与する方法

freoに投稿された画像で、colorboxが利用されているもののリンクに、自動的に属性(rel)を追加する方法は以下のとおりです。
今回はためしに「rel=lightbox」という属性を付与してみます。

  1. [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>
    
    と記入する
  2. 下記ファイルをダウンロードして、[freo/js]フォルダに保存する。
    32877_colorbox_rel.zip
  3. [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" });
});

 のようにすればよいと思います。

ページ移動

関連記事

ページ上部へ