下記コードで画像を張り付けていますが、 colorbox使用時のようなポップアップ出来ません。
ratio_3_2の時のように改良できないでしょうか。
<a href="/files/uploads/190337657_1019017598634258_4201831071631592100_n__midium.jpg" rel="colorbox" title="昼間の佐賀関港"><img align="" alt="昼間の佐賀関港" src="/files/uploads/190337657_1019017598634258_4201831071631592100_n__midium.jpg" /></a> <a href="/files/uploads/196808094_1202994626815412_8660232461053257043_n__large.jpg" rel="colorbox" title="店内からの眺望（夕日）"><img align="" alt="店内からの眺望（夕日）" src="/files/uploads/196808094_1202994626815412_8660232461053257043_n__midium.jpg" />`
【環境情報】
・baserCMSのバージョン：4.4.4
・レンタルサーバー名：ロリポップ
・使用テーマ：omotenashi2（4系）
・PHPスキル（自己評価）： E
こんにちは。
下記記事の著者です。
ratio_3_2 で 【colorbox】 を使用して「ポップアップカスタマイズが出来る方」であれば、可能かと思います。
◆方法１
元々組み込まれている「Magnific Popup」を利用する方法
（少し長いですが全て読まれてできそうならやってみて下さい。）
https://forum-archive.basercms.net/modules/newbb/viewtopic.php?topic_id=2166&forum=5#forumpost7975
◆方法２
ratio_3_2 と同様に 【colorbox】を組み込む
baserCMS は、画像の rel 属性に「colorbox」が自動で付与されます。
１．レイアウトテンプレートから「Magnific Popup」関連のスクリプトの記述を消去。
２．style.css から「Magnific Popup」関連の記述を削除（しなくても動作に問題ないですが・・）
３．ratio_3_2 同様に「colorbox」を組み込めば実現が可能です。
実際に組み込んだサイトがあります。
ソースを覗いて頂ければ、組み込み順などが解るかと思います。
「いいね！」 1
ご教授ありがとうございます。
方法1で各ページは表示できるようになったのですが、indxページが対応できません。
きい本的にindxは無理なのでしょうか。
<div class="bgb-wysiwyg" data-bgb="wysiwyg">
<div class="bgt-container bgt-ckeditor-container" data-bgt="ckeditor" data-bgt-ver="2.1.0">
<div class="bge-ckeditor" data-bge="ckeditor">
<section class="colBox colBox__bgColor bgColor-grey-100">
<div class="container">
<h2 class="contents__hl contents__hl--center fontNotoSerif">美しき日本の文化と<br />
多様性に富んだ諸外国の文化との融合を目指して</h2>
<div class="contents__readBox contents__readBox--center">
<p class="contents__read" style="text-align: center;">食文化を中心に、医療・環境・地域創世の一端を担い、全ての人たちの幸せへの懸け橋になりたいと思っています。<br />
一人の力は小さくとも、志ある人達が集う事によってどんな事も可能に出来る！<br />
株式会社レオーネはそう信じて一歩前へ進んでいきます。</p>
<div style="text-align: center;"> </div>
<p style="text-align: center;"><a href="/files/uploads/pho_top01__large.jpg" rel="colorbox" title="和タリアン：ステッラママ1号店"><img align="" alt="和タリアン：ステッラママ1号店" src="/files/uploads/pho_top01__midium.jpg" /></a> <a href="/files/uploads/pho_top02__large.jpg" rel="colorbox" title="和タリアン：ステッラママ レオーネドルチェ"><img align="" alt="和タリアン：ステッラママ レオーネドルチェ" src="/files/uploads/pho_top02__midium.jpg" /></a> <a href="/files/uploads/pho_top03__large.jpg" rel="colorbox" title="和タリアン shioya"><img align="" alt="和タリアン shioya" src="/files/uploads/pho_top03__midium.jpg" /></a></p>
</div>
</div>
</section>
</div>
</div>
</div>
※グレーバックも対応しなくなっちゃいました・・・（最初からやり直そうかとも思ってます。）
ご返信ありがとうございます。
テスト環境が無いので何とも言えませんが、
indexページは、「現状では」無理かもしれません。
トップページ（index）も
同じレイアウトテンプレート（default）を読み込ませていると思います。
他の各ページでポップアップが出来ているのでしたら、
トップページで出来ない事はありません。
（画像のhtmlコードが正しい場合）
◆最もよくある原因として・・
※スクリプトが競合（※コンフリクト）している場合
→ トップページは、ヘッダー画像の切り替え用に（/js/slick.min.js）読み込んでいると思います。
同ページ内のスクリプトが原因で、動作しない事があります。
（恐らくこれだと思われます）
読み込ませる順番や記述等の調整で回避できれば、動作するかと思います。
■経験談より
ページごとにレイアウトテンプレートは変えた方が良いです。
・トップページ用
・固定ページ
・ブログ記事用
・お問い合わせ用
固定ページに、トップページ用の画像スライダーのスクリプトやCSSは不要ですし、お問い合わせページは、コンタクトフォーム用のスクリプトが読み込まれます。
他のスクリプトが邪魔して、コンタクトフォームが働かない不具合も起こりますので・・
ここから先は、クリエイティブ パートナー様にご相談されると良いかと思います。
「いいね！」 1
スクリプトの競合が原因であれば、下手に触って壊してしまうよりもポップアップではなく各ページへのリンクとして画像のレイアウトを考えてみます。
ご教授ありがとうございました。
「いいね！」 1
